Search code examples
htmlgoogle-chromesvginternet-explorer-9

Inkscape .HTML SVG file works in Chrome but not in IE9


I have the following Inkscape exported SVG:

[TESTSVG.HTML]

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="744.09448819"
   height="1052.3622047"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   sodipodi:docname="mainscreen.svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.7"
     inkscape:cx="175.99454"
     inkscape:cy="739.86976"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1366"
     inkscape:window-height="706"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       sodipodi:type="arc"
       style="fill:#ff0000;fill-opacity:1;stroke:#495677;stroke-width:23.16900062999999900;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       id="circle1"
       sodipodi:cx="227.14285"
       sodipodi:cy="156.6479"
       sodipodi:rx="47.142857"
       sodipodi:ry="44.285713"
       d="m 274.28571,156.6479 a 47.142857,44.285713 0 1 1 -94.28571,0 47.142857,44.285713 0 1 1 94.28571,0 z"
       inkscape:label="#path2985" />
    <rect
       style="fill:#ffff00;fill-opacity:1;stroke:#495677;stroke-width:4.86899999999999980;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       id="box1"
       width="284.28571"
       height="110"
       x="312.85715"
       y="98.076469"
       inkscape:label="#box1" />
  </g>
</svg>

Save as an HTML file (TESTSVG.HTML), it works in Chrome but not in IE9. If you change the file name to .SVG (TESTSVG.SVG), it will work on both browsers.

I need to make it work on IE9 using the HTML extension.

Tks for any help.


Solution

  • If it's acceptable to have two files, you can do the following (tested in IE9). You'd save your SVG as test.svg in this case:

    <?xml version="1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <object data='test.svg'></object>  
    
    
    
    </body>
    </html>