Using Inline SVG -- What am I missing?

by **keith** » Thu Dec 03, 2009 9:34 pm

Hello all!

I am working to get the hang of using SVG inside HTML 5 documents. I am not having much success. I am hoping someone here can help.

I have a very simple test that is not working. I am not sure why.

Here is the markup I am using:

Code: Select all: <!DOCTYPE html> <html> <body> <h1>SVG/HTML 5 Example</h1> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle id="myCircle" cx="100" cy="75" r="50" fill="blue" stroke="firebrick" stroke-width="3" /> <text x="60" y="155">Hello World</text> </svg> </body> </html>

It does nothing but show me the H1 anf the plain text "Hello World". There is no circle.

I have tried it on FF 2.0 Win2K and FF 3.5 Linux.

Any ideas? Other HTML 5 and SVG work on both of these browsers.

Thanks in advance!

Keith

by **zcorpan** » Thu Dec 03, 2009 10:13 pm

You need Firefox 3.6 or trunk and set html5.enable to true in about:config for inline SVG in text/html to work.

by **keith** » Thu Dec 03, 2009 11:06 pm

zcorpan wrote:You need Firefox 3.6 or trunk and set html5.enable to true in about:config for inline SVG in text/html to work.

Great! Thank you for that. I will try it.

BTW, how come this site works on the same browser? Magic? ;-)

http://emacsformacosx.com/
Isn't it inline SVG and HTML 5? It works perfectly on both of my browsers. But, even if I paste the code from this page into a blank document, it doesn't work in either browser? I guess this is where I am having the most confusion.[/url]

by **zcorpan** » Thu Dec 03, 2009 11:17 pm

keith wrote:BTW, how come this site works on the same browser? Magic?
http://emacsformacosx.com/

That page uses text/xml, not text/html. Inline SVG in XHTML has always worked in browsers that support SVG and XHTML.

by **keith** » Fri Dec 04, 2009 12:36 am

zcorpan wrote:That page uses text/xml, not text/html. Inline SVG in XHTML has always worked in browsers that support SVG and XHTML.

Oh my! I didn't realize that part. Thank you so much! Neat! That makes so much more sense now! :-)

by **zcorpan** » Fri Dec 04, 2009 12:56 am

(SVG can also be used in HTML today by pointing to it with object/iframe/img, and some browsers also support SVG in CSS as background-image or generated content etc.)

Using Inline SVG -- What am I missing?

Using Inline SVG -- What am I missing?

Who is online

Who is online