-
Notifications
You must be signed in to change notification settings - Fork 39
Preserving Aspect Ratio of SVGs
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.