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
Post a Comment