Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Preserve aspect ratio of SVG assets #333

Closed
sssoleileraaa opened this issue Apr 26, 2019 · 2 comments
Closed

Preserve aspect ratio of SVG assets #333

sssoleileraaa opened this issue Apr 26, 2019 · 2 comments
Labels
help wanted Extra attention is needed

Comments

@sssoleileraaa
Copy link
Contributor

sssoleileraaa commented Apr 26, 2019

Since SVGs can be scaled to any width and height in Qt we have to be careful to preserve aspect ratios. To preserve an aspect ratio of an image, we need to explicitly define it in the GUI code, e.g. https://github.com/freedomofpress/securedrop-client/pull/328/files.

You can find aspect ratios in the SVG files themselves. For example the offline refresh icon is 20:19 and the active refresh icon is 16:17.

To find aspect ratio information, look at the SVG files in an editor such as Sublime or Atom. Usually there will be information such as width, height, and viewbox fields. Sometimes there is just a viewbox field, see paperclip.svg, but that's enough information to go on. For example, the paperclip SVG has viewBox="0 0 448 512". So that's a 448:512 -> 7:8 aspect ratio, which looks right when you open the image of the paperclip in a browser.

Sometimes it makes sense to request a new SVG that is 16:16 instead of 16:17 in the case where a Qt widget uses a square aspect ratio as the default. After comparing the different SVG files we currently use the in the client, I think the paperclip is a good example of an ideal SVG. It's a small file, easy to read, and the default viewbox is large so we can clearly see that the image looks correct. The only other improvement that would be nice to have would be an aspect ratio field to make it easier to verify that we are scaling correctly.

@sssoleileraaa sssoleileraaa added the help wanted Extra attention is needed label May 1, 2019
@sssoleileraaa sssoleileraaa changed the title SVG aspect ratios Preserve aspect ratio of SVG assets May 1, 2019
@eloquence
Copy link
Member

@creviera will add this to the wiki as docs, then close.

@sssoleileraaa
Copy link
Contributor Author

Closing in favor of maintaining this information in the wiki: https://github.com/freedomofpress/securedrop-client/wiki/Preserving-Aspect-Ratio-of-SVGs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

2 participants