Displaying SVG in HTML

Question

Hello,

I have a web service that returns a string of svg code. My problem is, I'm not sure what to do with it. I've never worked with SVG before. My questions are:

1) Is SVG have strong browser support? 2) How do I actually display the image that the SVG represents?

Thank you

Answer 1

SVG is supported by nearly all major browsers except IE i think but that also can be rendered with some plugin. IE renders VML

I suggest using RaphaelJS http://raphaeljs.com/reference.html#image

EDIT :

var r = Raphael("holder", 600, 540); //"holder" is the id of an empty div in html file 
r.image("lion.svg", 140, 140, 320, 240);// r.image(src,x,y,width,height)

Answer 2

Starting with HTML5, you can embed SVG directly in a HTML document. This is supported by all of the major modern browsers, except Internet Explorer. You can use the HTML canvas concept (as illustrated here )

But, since you most likely can't leave IE folks behind yet, you can go with one of the three legacy options shown here

Answer 3

Most state-of-the-art-browsers do support SVG, but few still used browsers (for example Internet Explorer 7) fail. So for perfect compatibility you should stick to gif, jpg or png formats. Test your own browser here: http://alphanemoon.com/2008/artikel/inline-svg-browser-test.xhtml

Answer 4

Svg is a specification for XML. Most modern browsers can just display it inline, but Internet Explorer can't.

I recommend wrapping all your svg content in svgweb, which is a thin layer around the svg code. If the user is using a standard compliant browser, it will display the svg normally. Otherwise, it converts it into flash content.

Answer 5

A good starting point is svgboilerplate.com.