Which browsers support svg, and how?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Not sure which ng to post this question to: I'm trying
to google info about svg (scalable vector graphics)
image support in different browsers, and what html tag(s)
are used to embed svg images.  Seems to me like a straightforward
question, but hard (for me) to google any straightforward info.
Are there any reasonably easy-to-understand and reasonably
authoritative pages that discuss this?  (Or a more appropriate
ng to post the question in?)

Best I could glean was to use one of the following constructs.
Suppose you have a file image.svg containing an svg rendering
of the identical image that's in gif format in file image.gif .
Then <img src="image.gif"> would display the gif file.
Now, the corresponding construct for svg should (afaict) be either
     <mediaobject  id="label">
         <imagedata  format="SVG"  fileref="image.svg"/>
or alternatively, maybe
     <object data="image.svg" type="image/svg+xml">
       <embed src="image.svg" type="image/svg+xml"/>

Lots of typing ... and it doesn't work (for me).
Firefox (version 1.5 and later) is supposed to have some kind
of native svg support, but doesn't seem to handle the above.
And there's an adobe svg plugin that everybody seems to say
is garbage, and that adobe says it no longer supports.
Can anyone point me to a page with reliable info?  Thanks,
John Forkosh  ( mailto:  j@f.com  where j=john and f=forkosh )

Re: Which browsers support svg, and how?

JohnF wrote:

a question in the subject line :-)

SVG is supported by every browser I have to hand, safari, chrome, firefox,
seamonkey, opera, *except* any version of IE. For IE you have to use VML
which is quite similar but with a totally different syntax.

So, basically, SVG is not viable in the wild unless you back it up with VML.

Quoted text here. Click to load it

There is very little out there about how it's done. You have to search for
SVG and wade through the millions of hits. Some are very worthwhile. Some
are rubbish. But this is always the case :-)

Some of the stuff at mozilla is OK. W3schools has a tutorial that is sort of
OK. There are a few examples.

http://www.svgbasics.com has lots of examples.

Beware if those things that use javascript to translate SVG to VML. They do
sort of work but don't do everything and sometimes run like a dog. They are
however useful for exploring the similarities between SVG and VML. excanvas
is one. raphael is another.

I have written my own at a higher level, up in PHP. Single calls to the
members of a PHP class produce both SVG and VML.

It's at proof of concept stage but does produce reasonable output. Here is
an example of the HTML it produces, complete with all the rough edges that
you expect from a proof of concept page. The namespace stuff and the
stylesheet if to turn on VML in IE.


You can see the SVG and VML produced. Conditional comments are used to feed
VML to IE and SVG to the others.

The major concept that needed proving is how to embed SVG directly into an
HTML page. SVG is an XML application and the page it lives in is <svg> as
you have found, not <html>. I stuff the whole lot into an object embedded
into the HTML page, like you are trying to do. This was stolen from some
post on some forum somewhere that I found after several hours of googling
and have long since lost.

Neither SVG nor VML do text very well and they do it very differently. In
fact for Firefox  you need the 3.1  beta to do it at all.

I overlay HTML text  over the top of the SVG or VML graphics. Simple and it
works. Of course everything is absolutely positioned but that's OK as this
page is destined for print.

Quoted text here. Click to load it

Don't. You don't want your viewers to have to download a plugin.

Quoted text here. Click to load it

No, not really.


Re: Which browsers support svg, and how?

Quoted text here. Click to load it

Thanks so much for all the very useful information, Richard.
"Destined for print" (your words just above) was actually
my reason for asking.  I generate pages with images rendered
as gif or png that (obviously) don't print very well, see
for examples.  And I was hoping to offer
            http://dvisvgm.sourceforge.net /
as another conversion option for better print quality.
It's easy enough for me to program, but my simple tests
and now your more elaborate remarks don't make it seem
very practical for users to use (at least not at this
point in time).  Thanks again,
John Forkosh  ( mailto:  j@f.com  where j=john and f=forkosh )

Site Timeline