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 remended will be patible with this.

Please could someone suggest the best / most cross-browser patible 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, ( .html / .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 (). 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.

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 remended will be patible with this.

Please could someone suggest the best / most cross-browser patible 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/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.). 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.

• javascript
• ios
• html
• safari
• svg

Share Improve this question Follow edited May 30, 2012 at 15:12 Mike Samuel 121k3030 gold badges227227 silver badges254254 bronze badges asked Mar 22, 2011 at 8:07 Craig McDonnellCraig McDonnell 3111 silver badge22 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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.

Take a look at this page: http://www.schepers/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.