[ HOME ]

Scaling SVG Graphics with Javascript


this browser is not able to show SVG: http://getfirefox.com is free and does it! If you use Internet Explorer, you can also get a plugin: http://www.adobe.com/svg/viewer/install/main.html
choose here: xsmall or small or medium or 1:1 or large or ...

rendered as png for reference:


here more about SVG: this doc was my only source for this demonstration. especially the part about scripting is very interesting. this example shows how to rescale a svg more or less dynamically. there are also methods for scaling (rotation, transformation) svg dynamically and as an animation. this doc does the following:
  1. SVG doc is loaded embedded in the HTML, where an init function in the SVG file's ECMA-script-part ...
  2. ... registers functions in the top.* space. therefore, a script in this HTML file can call those HTML2svg functions which execute something in the SVG graphic. therefore you have to open the SVG file in a texteditor
  3. the init function of the HTML file resizes the svg to its initial dimension

relevant code

tested to work with following setups

related stuff


here you can find more on SVG, even a modified copy of my site

license and disclamer note

you can use all or parts of this and only this single site plus the embedded svg file without permission. my aim is to help the adoption of svg as a styling element in HTML sites. this is tested to work flawlessly with mozilla firefox 1.5. I'm not responsible for any other damage. feedback