Re: Problem embedding SVG graphic on web page

On Nov 30, 7:44 am, Addanc <[email protected]> wrote:
> I have a simple web page where I include an SVG graphic created with
> Inkscape using the following mark-up:
>
> <p>
>         <img src="myGraphic.svg" alt="myGraphic description" />
> </p>
>
> When I display the web page with firefox, it just prints the "alt"
> description in stead of rendering the SVG graphic; when I open the SVG
> graphic file directly with firefox it renders it perfectly. Where am I
> going wrong?
>
> Opera, Chrome and Safari all render the SVG graphic correctly when the
> web page is opened with them.

Sadly, Firefox has not implemented this yet (you cannot embed SVGs in
a web page using the <img> tag or using CSS background-image).  Of the
browsers that natively support SVG, Firefox is the only browser not to
implement this feature.

You can either:

1) Use the <object> tag:

  <object data="foo.svg" type="image/svg+xml">Fallback content here</
object>

In my opinion, this is the best bet if you have installed a SVG plugin
for IE.

2) Use the <iframe> tag

3) Put the markup inline in a XHTML page (application/xhtml+xml) -
won't work in IE.

4) Put the markup inline in a HTML page and use some JavaScript to
dynamically inject the markup as true SVG. There are examples of this
on the web (see Sam Ruby's blog: http://intertwingly.net/blog)

Regards,
Jeff Schiller