Which browsers support svg, and how?

J

JohnF

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,
 
R

rf

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.
Click to expand...
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?)
Click to expand...


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.
Click to expand...

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,
Click to expand...

No, not really.
 
J

JohnF

rf said:
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.


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.

No, not really.
Click to expand...

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,
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Docking electron desktop app above browsers and other applications. 7
embed svg file in html 2
HTML5 in Firefox and other browsers 1
HTML5 <video> and <audio> support for several browsers 15
Ruby and SVG 6
How To Create Javascript from SVG 1.0 Image ? 0
SVG rendering 1
Sencha Touch--Support 2 browsers in just 228K! 64

Members online

Total: 49 (members: 1, guests: 48)
Robots: 159

Forum statistics

Threads
473,990
Messages
2,570,211
Members
46,796
Latest member
SteveBreed

Latest Threads

Top