Problem embedding SVG graphic on web page

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

Problem embedding SVG graphic on web page

Addanc
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.
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Problem embedding SVG graphic on web page

Jeff Schiller
On Nov 30, 7:44 am, Addanc <[hidden email]> 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
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Problem embedding SVG graphic on web page

Addanc
On 30/11/09 15:43, codedread wrote:

> On Nov 30, 7:44 am, Addanc <[hidden email]> 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

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.
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Problem embedding SVG graphic on web page

Boris Zbarsky
On 11/30/09 12:23 PM, Addanc wrote:
> 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
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Problem embedding SVG graphic on web page

Jeff Schiller
On Nov 30, 12:16 pm, Boris Zbarsky <[hidden email]> wrote:
> On 11/30/09 12:23 PM, Addanc wrote:
>
> > 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

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
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Problem embedding SVG graphic on web page

Addanc
On 30/11/09 18:31, codedread wrote:

> On Nov 30, 12:16 pm, Boris Zbarsky <[hidden email]> wrote:
>> On 11/30/09 12:23 PM, Addanc wrote:
>>
>>> 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
>
> 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

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.
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Problem embedding SVG graphic on web page

Helder Magalhães
Hi 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.

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


[1] https://bugs.webkit.org/show_bug.cgi?id=10687
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg