Scalable Vector Graphics (SVG) has been around since the dawn of time. Well, since 1999 when the W3C started work on it at least. I remember doing some at University and needing various plugins depending on which browser you wanted to render the end result in.
Due to the recent anticipation and uptake of HTML5 compliance in modern browsers (allowing for elements such as
<canvas> – which allows developers to harness the power of vector graphics directly on web pages).
SVG is an open, XML based file format for creating two-dimensional vector graphics – both static and dynamic (animated). As these files are basically code/markup, they can be generated by applications such as Photoshop, but can also be handcrafted and more importantly, modified.
Recently, Sanjay wrote an article about Applying the Pareto principle to software testing and wanted to include an image from Wikipedia in the post that was in SVG format. The issue he faced was that IE9 appeared to be clipping the image, rather than resizing it to the size he wanted. This is highlighted in the image shown on the right.
It’s really no suprise that the recent support for SVG has led to inconsistencies between the top browsers and how they render the results.
Whilst Google Chrome, Mozilla Firefox, Safari and Opera all behave in the same way (whether correct or not), IE9 sets its own standard.
It’s pretty obvious that IE9 is failing here. It’s clipping the image (in this case to 100×100), instead of resizing it.
Taking a look at the SVG code (below), we can see that the dimensions of the image (width and height) are clearly set to 470px by 475px.
Looking at the code above, one aspect is missing – the “viewBox”. This is similar to how the viewport works on iOS devices. Whilst the width and height attributes set the size of an image, it is the viewBox that determines the viewport of the image – basically, what bit of the image you can see. When this isn’t present, the majority of browsers use the img tag width and height attributes to resize the images, but Internet Explorer 9 uses them to define the viewBox, thus clipping the image.
So, lets add the viewBox. The viewBox attribute takes the following format –
viewBox="[Starting X Coordinate] [Starting Y Coordinate] [Ending X Coordinate] [Ending Y Coordinate]".
Here, we’ve just made the viewBox the same dimensions as the image. We could get clever here, but let’s not!
This then gives us the following – correct – output.