Which browsers support svg, and how?

04-10-2009

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">
<imageobject>
<imagedata format="SVG" fileref="image.svg"/>
</imageobject>
</mediaobject>
or alternatively, maybe
<object data="image.svg" type="image/svg+xml">
<embed src="image.svg" type="image/svg+xml"/>
</object>

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: where j=john and f=forkosh )

04-10-2009

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.

> 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?)

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.

http://barefile.com.au/test/graph.html

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.

> And there's an adobe svg plugin that everybody seems to say
> is garbage, and that adobe says it no longer supports.

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

> Can anyone point me to a page with reliable info? Thanks,

No, not really.

--
Richard.

04-12-2009

rf <> wrote:
> JohnF wrote:
>
> 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.
>
>> Are there any reasonably easy-to-understand and reasonably
>> authoritative pages that discuss this?
>
> 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.
> 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.
> http://barefile.com.au/test/graph.html
> 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.
>
>> Can anyone point me to a page with reliable info? Thanks,
> No, not really.

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
http://www.forkosh.com/mathtex.html
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: where j=john and f=forkosh )

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Browsers, browsers! Quo vadis?	El Kabong	HTML	23	05-13-2007 08:55 PM
Multiple browsers support and themes	=?Utf-8?B?TWFuc28=?=	ASP .Net	0	03-22-2006 09:45 AM
Two Browsers work! Two browsers won't load. Internet game service won't load	jimmie	Computer Support	1	02-26-2006 08:36 AM
How to discover what various Browsers (and versions support)?	Rob R. Ainscough	ASP .Net	1	06-25-2005 01:16 AM
Which browsers support <IFRAME> ?	David D.	HTML	9	01-12-2005 09:09 AM