CODEWITHSUNDEEP
html
Anthony
Anthony

Reputation: 4050

HTML5 svg not working

I'm using Chrome version 5.0.375.55 and Firefox version 3.5.9 but I can't get the HTML5 code below to display a box.

<!DOCTYPE html> <!-- this tells browser, this is HTML5 -->
<html>
<body>
 <svg width="200" height="200"> 
 <rect
  x="0" y="0"
  width="100" height="100"
  fill="blue" stroke="red"
  stroke-width="5px"
  rx="8" ry="8"
  id="myRect" class="chart" />
 </svg>
</body>
</html>

The following sites stated that my browsers support HTML5 and svg so what gives?

http://caniuse.com/
http://www.html5test.com/

Upvotes: 4

Views: 22776

Answers (5)

user400077
user400077

Reputation: 21

it worked by saving the file as xhtml, but I'm not sure why.

Upvotes: 2

Ms2ger
Ms2ger

Reputation: 15983

Firefox 4 will support SVG in HTML. WebKit will probably start working on it in the coming months.

Upvotes: 1

Drew LeSueur
Drew LeSueur

Reputation: 20145

This is how I got it to work I called the file test.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> 
 <rect
  x="0" y="0"
  width="100" height="100"
  fill="blue" stroke="red"
  stroke-width="5px"
  rx="8" ry="8"
  id="myRect" class="chart" />
 </svg>
</body>
</html>

Good luck!

Upvotes: 10

Vladislav
Vladislav

Reputation: 19

try in Firefox about:config, search for html and enable "true" value. What next? Wait will Firefox 4. As for WebKit please read: http://trac.webkit.org/wiki/WebKit%20plus%20SVG. You are not alone. I'm also waiting for SVG.

Upvotes: 1

amphetamachine
amphetamachine

Reputation: 30595

Have you tried using the SVG XML namespace for your tags? Like so:

<html xmlns:svg="http://www.w3.org/2000/svg">
    <!-- ... -->
    <svg:svg width="200" height="200"> 
        <svg:rect
          x="0" y="0"
          width="100" height="100"
          fill="blue" stroke="red"
          stroke-width="5px"
          rx="8" ry="8"
          id="myRect" class="chart" />
    </svg:svg>
</html>

Upvotes: 4

Related Questions