Copy & paste the code below to embed this comment.
sroussey
I think when HTML5 becomes the norm, we will see a lot more of SVG on the web. That is why I added a bunch of support for SVG in the 1.5 release of Firebug. It’s fun to tinker like that!
Shelley already mentioned that she had forgotten she had flipped the html5.enable pref to true.
Since I implemented the preference in Firefox, I thought I’d clarify a few of things:
Firefox 3.6, as shipped in its default configuration, does not support SVG in text/html.
There is no Mac vs. other difference here. The hidden pref is cross-platform.
The pref does more than enables SVG in text/html. Flipping the pref replaces the entire HTML parser in Gecko with a snapshot of an HTML5 parser as of end of June 2009. If you use the old snapshot of the parser, you’ll be exposed to bugs that have been fixed since the end of June. Thus, if you want to be on the edge and use an HTML5 parser, it’s much better to do so with “trunk nightlies”:http://nightly.mozilla.org/ than with the 3.6 release.
Embedding SVGs into websites is something that concerns me. It’s not because I don’t trust your word or not believe what you’re saying—I do. I just don’t feel comfortable using a filetype that takes so much work for such minor results.
However, I’m going to keep this article in mind and look for a situation where I can use SVG images in the future. But it’s doubtful that it’ll be applicable to the type of sites I design.
Either way, thank you for taking the time to write up this two-part article.
For example, Safari/Webkit does not currently render a transparent background for the object element.
FWIW, that’s “bug 10687”:https://bugs.webkit.org/show_bug.cgi?id=10687. If one’s interested, just CC to that issue, as the WebKit bug tracker doesn’t allow voting. ;-)
Also, at first I didn’t understand the empty span element when embedding SVG within an object tag. That will be used as fallback content, so it is useful whenever SVG is only for decoration. When it’s used for functionality, then one will definitely want to display fallback content. :) Details in a “related SVG Developers thread”:http://tech.groups.yahoo.com/group/svg-developers/message/60373… ;)
Just noticed the Textile interpreter has messed up my entry, changing up the “noses” (’-’ character) in my entry to a strikeout. This didn’t occur in the “suggested link”:http://textism.com/tools/textile/ on Textile…
As pointed out in the 2nd comment, the <span>-tag (with funny ending slash?) should be removed because as you can see, it’s confusing. ;) And some people might even copy and paste it as is.
Another little mistake from the same paragraph: you tell readers to “set the src attribute to the SVG file”. This should be the “data attribute”, of course, as seen in the example you provide.
Copy & paste the code below to embed this comment.
janis7s
Hi,
I’m currently working on a project for a client and i’m using a resizable background image. I want the website to look fresh on every load so want two use the rotator.php for this.
Anyone knows what is the best solution to make a website where background img height and with always is 100%, resizes when you scale the brower and renews the image on every load?
Copy & paste the code below to embed this comment.
CHUCKclmnz
would love to see web page and code examples of how svg can be positioned and scaled in place of gif and jpg graphics (not just backgrounds )and how to give the user zoom control of the graphic that could scale (top z index) over the rest of the page.
thanks
22 Reader Comments
Back to the ArticleShelley Powers
Folks, my apologies:
I did not include in the article directions for enabling HTML5 in Firefox 3.6. I did this so long ago, that I forgot.
You have to enable HTML5 support before the SVG will show. The only way to enable support for HTML5 is by typing the following into the location bar:
about:config
In the page that opens, after the warning, you then look for a property:
html5.enable
You need to set this to true.
This is only for folks that are comfortable with this bleeding edge change.
In the meantime, I have an XHTML version that you can all see at
http://burningbird.net/svg/example4.html
sroussey
I think when HTML5 becomes the norm, we will see a lot more of SVG on the web. That is why I added a bunch of support for SVG in the 1.5 release of Firebug. It’s fun to tinker like that!
Shelley Powers
I saw that in the release notes, Steve. I think it’s a terrific addition to an excellent development tool.
hsivonen
Shelley already mentioned that she had forgotten she had flipped the html5.enable pref to true.
Since I implemented the preference in Firefox, I thought I’d clarify a few of things:
Theo
I was wondering about all that SVG stuff, had no idea about it.There is a lot to learn for me, this will be my starting point.
Thank you for this great article!
traxor
Embedding SVGs into websites is something that concerns me. It’s not because I don’t trust your word or not believe what you’re saying—I do. I just don’t feel comfortable using a filetype that takes so much work for such minor results.
However, I’m going to keep this article in mind and look for a situation where I can use SVG images in the future. But it’s doubtful that it’ll be applicable to the type of sites I design.
Either way, thank you for taking the time to write up this two-part article.
Regards,
Luke
Helder
Hi Shelley! :-)
Great article(s)! Few nits:
FWIW, that’s “bug 10687”:https://bugs.webkit.org/show_bug.cgi?id=10687. If one’s interested, just CC to that issue, as the WebKit bug tracker doesn’t allow voting. ;-)
Also, at first I didn’t understand the empty span element when embedding SVG within an object tag. That will be used as fallback content, so it is useful whenever SVG is only for decoration. When it’s used for functionality, then one will definitely want to display fallback content. :
) Details in a “related SVG Developers thread”:http://tech.groups.yahoo.com/group/svg-developers/message/60373… ;)Helder
Just noticed the Textile interpreter has messed up my entry, changing up the “noses” (’-’ character) in my entry to a strikeout. This didn’t occur in the “suggested link”:http://textism.com/tools/textile/ on Textile…
andrew-bkk
This is a really good article but it does little to counter the feeling that a lot of work is needed to achieve, well, not a lot actually.
Florian Schmitt
Hi Shelley,
first off thanks for these articles. Nice read.
As pointed out in the 2nd comment, the <span>-tag (with funny ending slash?) should be removed because as you can see, it’s confusing. ;) And some people might even copy and paste it as is.
Another little mistake from the same paragraph: you tell readers to “set the src attribute to the SVG file”. This should be the “data attribute”, of course, as seen in the example you provide.
janis7s
Hi,
I’m currently working on a project for a client and i’m using a resizable background image. I want the website to look fresh on every load so want two use the rotator.php for this.
Anyone knows what is the best solution to make a website where background img height and with always is 100%, resizes when you scale the brower and renews the image on every load?
Thanks,
Janis Sevens
CHUCKclmnz
would love to see web page and code examples of how svg can be positioned and scaled in place of gif and jpg graphics (not just backgrounds )and how to give the user zoom control of the graphic that could scale (top z index) over the rest of the page.
thanks