stackoom
  简体   繁体   中英

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

 原文  2013-10-15 19:47:51  4   4    html/ html5/ google-chrome/ svg/ internet-explorer-9

Question

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.

4 answers

solution1
 1  2013-10-15 19:53:57

You could add an HTML DTD like this and embed the SVG (works in IE10 - can't test in 9) should work I think 

<!DOCTYPE html>
<html>
<body>

<?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>

</body>
</html>

solution2
 1 ACCPTED  2013-10-16 07:19:47

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>

solution3
 0  2015-08-25 13:46:05

I just had the same problem - IE9 refuses to render svg's from InkScape when the code is implemented inline in HTML.

The problem is the tag <sodipodi:namedview and everything in here until the closing tag />

Try removing this and I bet the svg will render when the HTML is called in IE9.

solution4
 0  2016-04-15 09:48:52

It is because inkscape and sodipodi are not recognized in IE9, especially for inline SVGs. That's why they need to be removed. You can refer to this link Simple SVG Display

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question SVG hover not working in IE9 or Chrome css table layout works in chrome not in IE9 html works in chrome but not ie jQuery works fine in chrome fails in IE9/IE8 etc SVG not displaying in IE9 Show hidden div, why code works in FF/Chrome but NOT in IE9? jQuery zClip not working in UI dialog in Chrome and IE9 (works in FireFox) Gridview header align to left, does not work on IE9, but it works on chrome Desktop HTML file won't load in Chrome but works in IE Issue with fine position for a SVG file into HTML page (SVG made by inkscape command line)
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM