Skip to content

Preserving Aspect Ratio of SVGs

Allie Crevier edited this page Jul 31, 2020 · 1 revision

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.

Clone this wiki locally