Problem embedding SVG graphic on web page
Addanc
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.
codedread
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
Addanc
Cheers Jeff, the object mark-up work around does the job; although it
does break Safari and Chrome, but I can live with that as their browser
stats appear low.
Does anybody no the schedule for implementing the <img> embedding
capability.
Boris Zbarsky
> Cheers Jeff, the object mark-up work around does the job; although it
> does break Safari and Chrome
Uh... it does? <object> should work fine in those. Testcase?
-Boris
codedread
Yes, I would agree with Boris - the <object> tag works fine for me on
my web pages in all browsers that support SVG: http://blog.codedread.com/
I'd like to see a test case.
> Does anybody no the schedule for implementing the <img> embedding
> capability.
You probably want to follow these bugs:
https://bugzilla.mozilla.org/show_bug.cgi?id=276431
https://bugzilla.mozilla.org/show_bug.cgi?id=231179
I believe this functionality was intended for Mozilla 1.9.1 and 1.9.2,
but it keeps slipping.
Jeff
Addanc
The <object> mark-up works perfectly with Firefox and Opera; with Safari
and Chrome the SVG is rendered perfectly but the SVG boxes appear
incapable of inheriting the background colour/image from the parent box.
I am not a web developer, so I probably need to have a bit more of a
play with the CSS to fix this; it already been a pain in the ass getting
IE6, IE7 and IE8 to do something sensible.
HelderMagalhaes
> The <object> mark-up works perfectly with Firefox and Opera; with Safari
> and Chrome the SVG is rendered perfectly but the SVG boxes appear
> incapable of inheriting the background colour/image from the parent box.
Seems like you've hit WebKit's bug 10687 [1]... :-|
> I am not a web developer, so I probably need to have a bit more of a
> play with the CSS to fix this;
In my quick tests I wasn't able to work around this behavior. But of
course that, if you manage to workaround it, please be sure to share
the solution! :-)
Regards,
Helder