html - svg icons in IE9 do not display correctly -


our svg icons included using img tag getting incorrectly resized, cut off, or hidden when displayed in ie9.

the solution in https://gist.github.com/larrybotha/7881691 (setting viewbox, removing width , height) not , neither including images background.

when included using tag, svgs display (but not display in modern browsers chrome)

one of icons use has following source:

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!-- generated icomoon.io --> <svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewbox="0 0 640 640">  <metadata id="metadata167">   <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>  <path id="path161" fill="#c6c6c6" d="m227.88,640.44c-19.924,0-38.795-9.298-50.887-25.329l-163.69-216.1c-21.298-28.12-15.756-68.15,12.367-89.45,28.169-21.34,68.155-15.76,89.456,12.37l107.68,142.17,270.79-434.72c18.64-29.909,58.03-39.07,87.98-20.428,29.91,18.596,39.07,58.032,20.39,87.942l-319.85,513.45c-11.13,17.909-30.321,29.131-51.345,30.047-0.96187,0.0458-1.9237,0.0458-2.8856,0.0458z" stroke="#c6c6c6"/> </svg> 

any idea on make svg render in ie9?

i can't sure answer question without seeing specific code you're having problems with, jakub. include following attributes in every svg element, minimum. gives me level of cross-browser consistency, ie9:

<svg height="40" version="1.1" viewbox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"> 

if doesn't help, share code?


Comments

Popular posts from this blog

java - Date formats difference between yyyy-MM-dd'T'HH:mm:ss and yyyy-MM-dd'T'HH:mm:ssXXX -

c# - Get rid of xmlns attribute when adding node to existing xml -