I would like to include an SVG image in an HTML5 webpage to interact with this SVG using JavaScript and apply CSS styles. If possible, I would prefer to save the SVG in a separate file. I hope that I can use the web page offline, so I hope that any solution will be compatible with this.
Please, can someone suggest the best / most cross-browser way? If on all browsers there is no way that will work in all browsers, I would be happy to agree on a way to work with the iOS 4.3 Safari browser :-)
Thanks in advance!
Thanks to everyone and apologized for not updating before - unfortunately, another project distracted me! After a while, playing with various alternatives, ( http://tavmjong.free.fr/SVG/SVG_IN_HTML/svg_in_html.html / http://www.schepers.cc/svg/blendups/embedding.html) I still could not use the external .svg file and keep JS in the main HTML5 file, that is, I could not get these approaches so that the SVG file could reference JS functions, or allow the HTML file to access the elements from the included SVG file. Even the built-in SVG does not work on iOS yet :( So, I'm going to try my luck with Raphael (http://raphaeljs.com). I think this may mean that I will need to create the SVG programmatically, and not just connect to the external .svg file I just need to write a script to translate the contents of the SVG into JS Raphael function calls and hope to avoid other other stumbling blocks.
source
share