Images in SVG: Beware of Aspect Ratio!

SVG is a fantastic technology that is becoming increasingly popular as our web browsers get increasingly more powerful. I actually think that SVG offers many advantages over Canvas.

SVG is a vector graphics format, but it also allows raster images to be used. Naturally, when zooming in, your raster images will lose quality as they have a ‘digital zoom’ applied. It is also possible to draw the image at a different size as the source file, for example you could use a 1×1 image and draw it at 100×100. If you want to see what that looks like, I’ve made you a demo.

But what happens if your source image is 100×100, and you draw it with a height of 100 and a width of 75? (Write down your answer if you have some paper!)

 

If you answered that the image would get scaled to fill the 75×100 hole, congratulations! You’re wrong. That was my assumption, too. The reason is likely because we have been conditioned to think this way with other web technologies – after all, it’s what happens when you draw an image with HTML, CSS, and even on Canvas.

What actually happens is that the image will only occupy 75×75 – it maintains its aspect ratio. I have made a demo to demonstrate this. (Remember to view source to see what’s going on).

SVG file in Chrome

What web browsers such as Chrome see (Click to open)

If you’re using Inkscape, you may be confused by this (I sure was!), as their implementation will scale to fill the hole… inkscape aspect ratio bug

Unfortunately, it’s a bug.

There’s actually an attribute for the image tag in SVG that controls this behavior – the preserveAspectRatio attribute. This will need to be set to “none” in order to make the image scale to fill the hole.

Here’s a demo using the preserveAspectRatio attribute:

SVG in Chrome

What Chrome displays after using preserveAspectRatio=”none” (Click to open)

So if you’re ever drawing images in SVG, be careful, and if you need to alter the aspect ratio from the original, make sure you are using preserveAspectRatio=”none”.

Did you guess correctly, and what are your thoughts on this? Personally, I find the value =”none” a little strange – I would have expected a true or false value. They’ve actually made it a little more powerful than this to give you more control over the behavior when the image is preserving aspect ratio.

This post is part of our “SVG Article Index” in these articles, we aim to help you build knowledge and understand SVG.

If you’re a first-time reader, or simply want to be notified when we post new articles and updates, you can keep up to date by social media (TwitterFacebook and Google+) or the Blog RSS.

The following two tabs change content below.
Leon is a Developer at IDRsolutions, focusing mainly on development of the PDF to HTML5/SVG converter. He was a speaker at JavaOne 2012, co-presenting a session titled 'Lessons Learned in Writing a PDF-to-JavaFX Converter for NetBeans'.

Related Posts:

Leon Atherton

About Leon Atherton

Leon is a Developer at IDRsolutions, focusing mainly on development of the PDF to HTML5/SVG converter. He was a speaker at JavaOne 2012, co-presenting a session titled 'Lessons Learned in Writing a PDF-to-JavaFX Converter for NetBeans'.

2 thoughts on “Images in SVG: Beware of Aspect Ratio!

  1. Billy

    Thanks so much for posing this. I was running into a problem I couldn’t quite peg, and adding preserveAspectRatio=”none” fixed it, though, to be honest, even after your post, I’m not 100% why.

    I’m drawing an image with an SVG source to canvas via ctx.drawImage() (which works GREAT with SVG, btw). Everything worked as intended in Chrome, but in IE, the drawn SVG image looked squished horizontally, even with no scaling applied (natural dimensions) in drawImage. That’s the part I don’t quite get – since I wasn’t doing any additional scaling to begin with, why was this even a factor?

    Any insight would be appreciated.

    • Thanks for commenting Billy, I’m glad my article helped!

      I’m not 100% sure why the behavior is different in IE. But I do know that I spend a lot of time making stuff work in IE, so it’s not unusual…

      When you draw the SVG to canvas are you specifying the width and height to draw at? It may be be worth trying if you’re not (or not if you are).

      There’s a few ways of drawing SVG to canvas – it may be interesting to try the different ways and see if it makes any difference. I suggest a couple of ways in this article: http://blog.idrsolutions.com/2012/09/how-to-draw-svg-on-html-5-canvas-and-why-you-might-want-to/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>