Including SVG in HTML5 for iOS

Question

I'd like to include an SVG image in an HTML5 web page, to interact with this SVG via JavaScript, and to apply CSS styling. If possible, I'd prefer to keep the SVG in a separate file. I'm hoping to be able to use the web page offline so hopefully whatever solution is recommended will be compatible with this.

Please could someone suggest the best / most cross-browser compatible way of doing this? If there's not really a method that will work across all browsers, I'd be happy to settle for a way that works with iOS 4.3's Safari browser :-)

Thanks in advance!

---

Thanks to everyone and apologies for not giving an update sooner - Unfortunately, I got distracted by another project! After some time playing with various alternative options, ( http://tavmjong.free.fr/SVG/SVG_IN_HTML/svg_in_html.html / http://www.schepers.cc/svg/blendups/embedding.html ) I've still not been able to use an external .svg file and keep the JS in the main HTML5 file - i.e. I've been unable to get these approaches to allow the SVG file to reference JS functions, or to allow the HTML file to gain access to elements from the included SVG file. Even inline SVG doesn't yet work on iOS :( So, I'm going to try my luck with Raphael (http://raphaeljs.com). I think this may mean that I'll need to create the SVG programatically rather than being able to just link to an external .svg file. I'll just have to write a script to translate the SVG content to JS Raphael function calls and hope to avoid any other other stumbling blocks.

Answer 1

Take a look at this page: http://www.schepers.cc/svg/blendups/embedding.html

It shows five different ways of embedding an external SVG file into HTML (note that these aren't the only ways, but they are the simplest). It's also a quick way to check the capabilities of a particular browser.

Answer 2

It depends the browsers you are targeting. Modern browsers (IE9, Chrome, Firefox4...) support inline SVG. Older browsers may require some alternatives.

Here there is an online test to check browser support by using several methods to include the SVG.

http://tavmjong.free.fr/SVG/SVG_IN_HTML/svg_in_html.html

But I think that if you are using HTML5, then you are targeting modern browsers so you should use inline svg with the <svg> tag.