These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:25 pm Advanced search

Using Inline SVG -- What am I missing?

Here you can discuss things related to HTML and the Web in general that do not fit in to other categories.

Using Inline SVG -- What am I missing?

Postby 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
keith
<h6>
 
Posts: 3
Joined: Thu Dec 03, 2009 9:24 pm

Postby 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.
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden

Postby 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]
keith
<h6>
 
Posts: 3
Joined: Thu Dec 03, 2009 9:24 pm

Postby 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. :)
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden

Postby 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! :-)
keith
<h6>
 
Posts: 3
Joined: Thu Dec 03, 2009 9:24 pm

Postby 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.)
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden


Return to General Discussion

Who is online

Users browsing this forum: No registered users and 0 guests