Phil Archer

SVG Demo: Compare SVG and Static Image When Enlarged

In preparation for a new W3C course on SVG I wanted to produce a simple demo of at least one reason why SVG is so good and why it's such fantastic news that it's moving into the mainstream. Here's the little demo:

Enlarge Reset

You can see the CSS and JavaScript in the source code but it's worth recording a few experiences I had along the way.

The basic structure is that each image is within a <div /> element. The PNG's width is set to 100% of the available space so that when we change the size of the div, the image will expand/contract accordingly.

Notice that the width of the two main divs is set not in the document level <style /> definitions but inline. I found that this was necessary for the script to pick up the width value. This discovery came after much gnashing of teeth and general complaints about the unfairness of the universe - and reading a post by katana on Thank you!

Notice the use of a regex to extract the numerical value in the style attribute, then converting the variable type to integer (using parseInt) before multiplying by the factor variable. An earlier version simply added 100 to the variable and JavaSscript did this as strings which made no sense at all.

The final workaround I had to include came about not through having to handle the usual Important Exception to every rule of Web content creation but through a peculiarity of the WebKit browsers (Chrome and Safari). It is their behaviour that forced me to define and manipulate the height as well as the width. Without a height definition, the div surrounding the SVG image is about 3 times the desired height. I don't know why, it just is. So I had to define the height (and that's when I changed from adding a constant 100 to the width when enlarging to using a multiplication factor that could be applied to both width and height.


August 2010