PNG
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:
PNG
SVG
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 ozzu.com. 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.
HTH