{"id":1316,"date":"2017-11-14T08:36:32","date_gmt":"2017-11-14T18:36:32","guid":{"rendered":"http:\/\/mymonkeydo.com\/?p=1316"},"modified":"2017-11-14T08:36:32","modified_gmt":"2017-11-14T18:36:32","slug":"svg-height-not-scaling-properly-on-ie-10","status":"publish","type":"post","link":"https:\/\/mymonkeydo.com\/svg-height-not-scaling-properly-on-ie-10\/","title":{"rendered":"SVG height not scaling properly on IE 10"},"content":{"rendered":"
IE 10 shows a skewed svg image who’s width is set to a specific value and height is auto.<\/p>\n
<\/p>\n
The problem is the width and height in the SVG file is set and IE is following those specs if you don’t set it.\u00a0 So if you’re image is 100×100 and you set only the width to 50px, the height will remain at 100px.\u00a0 The solution is to remove the width and height attributes in the <svg> tag.<\/p>\n
A solution on a github gist suggests that removing the width and height attributes force the image to occupy the full width of its container in non-IE browers.\u00a0 All my current images with SVG are supposed to fill the width so this isn’t a problem for me.
\nLink to the gist: https:\/\/gist.github.com\/larrybotha\/7881691<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[2],"tags":[34,36],"yoast_head":"\n