SVG not showing in Opera and Firefox, but Chrome

It is supported, in fact :) You have two options - old one, using XHTML, and new one, using HTML5 and a modern browser with an HTML5 parser:

XHTML example (works in most browsers, including old Internet Explorer with the Adobe plugin installed):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
  <head>
    <title>SVG embedded inline in XHTML</title>
  </head>

  <body>
    <h1>SVG embedded inline in XHTML</h1>

    <object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"> </object>
    <?import namespace="svg" urn="http://www.w3.org/2000/svg" implementation="#AdobeSVG"?>

    <svg:svg version="1.1" baseProfile="full" width="300px" height="200px">
      <svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/>
    </svg:svg>

  </body>

</html>

html5 example(atm supported by IE9, FF4 and Chrome, Safari in near future):

<!DOCTYPE html>
<html>
  <head>
    <title>SVG in text/html</title>
  </head>

  <body>
    <h1>SVG in text/html</h1>
    <p><svg height=86 width=90 viewBox='5 9 90 86' style='float: left;'>
      <path stroke=#F53F0C stroke-width=10 fill=#F5C60C stroke-linejoin=round d='M 10,90 L 90,90 L 50,14 Z'/>
      <line stroke=black stroke-width=10 stroke-linecap=round x1=50 x2=50 y1=45 y2=75 />
    </svg><b>Warning:</b> Remember that &PlusMinus; means that there are two
    solutions!</p>

  </body>
</html>

You need an HTML5 parser for that to get that properly displayed, e.g. Firefox 4, or Opera 11.50. Check out caniuse.com for more browser details.

You can use XHTML with inline SVG images and it will work in all SVG-capable browsers though. See here for an example.

Tags:

Cross Browser

Svg

Recent Posts