なぜ私のSVGイメージはIE11で圧迫されていますか？

Question

私は<img>タグ付きのSVGイメージファイルを使用しています。 IE11以外のすべてのブラウザで画像が正常に表示されます。

を、それがIE11でどのように見えるか：

CSSがwidth:42px; height:autoに設定され、それがどのように見えるべきか

。 SVG自体のviewboxとheightとで試してみましたが、何も役に立たないようです。

これはコードである：

.st0{ 
 
    fill:#7F7F7F; 
 
}

<?xml version="1.0" encoding="utf-8"?> 
 
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" x="0px" y="0px" 
 
viewBox="0 0 40 40" xml:space="preserve"> 
 
<g id="_x33_A4Pmf.tif_1_"> 
 
<g> 
 
    <path class="st0" d="M38,23.3c0,0.3,0,0.6,0,0.9c0,0,0,0.1,0,0.1c0,0.3-0.1,0.6-0.1,1c-0.2,1.5-0.8,2.8-1.7,4 
 
     c-1.4,1.8-3.2,2.9-5.3,3.3c-0.7,0.1-1.4,0.2-2.1,0.2c-5.8,0-11.7,0-17.5,0c-0.6,0-1.2,0-1.7-0.1c-1.1-0.2-2.1-0.6-3.1-1.2 
 
     c-1.2-0.7-2.2-1.7-3-2.9c-0.7-1.1-1.1-2.3-1.3-3.6c0-0.2,0-0.4-0.1-0.6c0-0.3,0-0.6,0-0.9c0-0.1,0-0.3,0-0.4 
 
     c0.1-1,0.3-1.9,0.7-2.8c0.4-1,1-1.8,1.7-2.6C5.2,16.8,6,16.2,7,15.7c0.1,0,0.1-0.1,0.1-0.2c0.5-1.6,1.4-3.1,2.5-4.4 
 
     c1-1.1,2.1-2,3.4-2.6c1.4-0.7,2.9-1.1,4.5-1.3c0.1,0,0.3,0,0.4,0c0.4,0,0.7,0,1.1,0c0,0,0.1,0,0.1,0c0.4,0,0.8,0.1,1.1,0.1 
 
     C21.6,7.6,23,8,24.2,8.7c2.5,1.4,4.3,3.4,5.4,6c0,0.1,0.1,0.1,0.1,0.1c0.3,0,0.5,0.1,0.8,0.1c1.2,0.2,2.2,0.6,3.2,1.2 
 
     c1.2,0.8,2.2,1.7,2.9,2.9c0.7,1.1,1.1,2.3,1.3,3.6C38,22.9,38,23.1,38,23.3z M20,29.8c3,0,6,0,8.9,0c0.4,0,0.7,0,1.1-0.1 
 
     c1.3-0.2,2.4-0.8,3.3-1.7c1.3-1.4,1.9-3.1,1.7-5c-0.2-1.3-0.7-2.4-1.6-3.3c-0.9-1-2.1-1.6-3.4-1.8c-0.4-0.1-0.8-0.1-1.2-0.1 
 
     c-0.4,0.1-0.8,0.1-1.2,0.1c-0.1,0-0.1,0-0.1-0.1c-0.1-0.4-0.2-0.8-0.4-1.2c-0.6-1.9-1.6-3.4-3.2-4.6c-2-1.5-4.3-2.1-6.8-1.7 
 
     c-1.5,0.2-2.9,0.8-4.2,1.8c-1.4,1.1-2.4,2.4-2.9,4c-0.2,0.5-0.3,1.1-0.5,1.6c0,0.1-0.1,0.1-0.1,0.2c-0.3,0.1-0.6,0.2-0.9,0.4 
 
     c-0.9,0.4-1.6,1-2.2,1.7C5.4,21.2,5,22.5,5,24c0.1,1.4,0.5,2.6,1.4,3.6c1.2,1.4,2.8,2.1,4.6,2.1C14,29.8,17,29.8,20,29.8z"/> 
 
    <path class="st0" d="M17,20.7c-0.9,0-1.7,0-2.6,0c1.4-1.9,2.7-3.7,4.1-5.6c1.4,1.9,2.7,3.7,4.1,5.6c-0.9,0-1.7,0-2.6,0 
 
     c0,2,0,4,0,6c-1,0-2,0-3,0C17,24.7,17,22.8,17,20.7z"/> 
 
</g> 
 
</g> 
 
</svg>

Answer 1

私はSVG

占有面積

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" style="border:1px solid red;" >

クロム

0を示す赤いボックスを追加

IE11

あなたが固定サイズ

svg { 
width:42px; 
height:42px; 
} 

画像は、すべてのブラウザで同じように見えるだろうとheight:autoを交換する場合：

第二の変形：あなたは、CSSルールのままにしたい場合は、SVGファイルwidth="40" height="40"

<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 
width="40" height="40" viewBox="0 0 40 40" style="border:1px solid red;" > 
 
<style type="text/css"> 
 
.st0{fill:#7F7F7F;} 
 
</style> 
 
<g id="_x33_A4Pmf.tif_1_"> 
 
<g> 
 
    <path class="st0" d="M38,23.3c0,0.3,0,0.6,0,0.9c0,0,0,0.1,0,0.1c0,0.3-0.1,0.6-0.1,1c-0.2,1.5-0.8,2.8-1.7,4 
 
     c-1.4,1.8-3.2,2.9-5.3,3.3c-0.7,0.1-1.4,0.2-2.1,0.2c-5.8,0-11.7,0-17.5,0c-0.6,0-1.2,0-1.7-0.1c-1.1-0.2-2.1-0.6-3.1-1.2 
 
     c-1.2-0.7-2.2-1.7-3-2.9c-0.7-1.1-1.1-2.3-1.3-3.6c0-0.2,0-0.4-0.1-0.6c0-0.3,0-0.6,0-0.9c0-0.1,0-0.3,0-0.4 
 
     c0.1-1,0.3-1.9,0.7-2.8c0.4-1,1-1.8,1.7-2.6C5.2,16.8,6,16.2,7,15.7c0.1,0,0.1-0.1,0.1-0.2c0.5-1.6,1.4-3.1,2.5-4.4 
 
     c1-1.1,2.1-2,3.4-2.6c1.4-0.7,2.9-1.1,4.5-1.3c0.1,0,0.3,0,0.4,0c0.4,0,0.7,0,1.1,0c0,0,0.1,0,0.1,0c0.4,0,0.8,0.1,1.1,0.1 
 
     C21.6,7.6,23,8,24.2,8.7c2.5,1.4,4.3,3.4,5.4,6c0,0.1,0.1,0.1,0.1,0.1c0.3,0,0.5,0.1,0.8,0.1c1.2,0.2,2.2,0.6,3.2,1.2 
 
     c1.2,0.8,2.2,1.7,2.9,2.9c0.7,1.1,1.1,2.3,1.3,3.6C38,22.9,38,23.1,38,23.3z M20,29.8c3,0,6,0,8.9,0c0.4,0,0.7,0,1.1-0.1 
 
     c1.3-0.2,2.4-0.8,3.3-1.7c1.3-1.4,1.9-3.1,1.7-5c-0.2-1.3-0.7-2.4-1.6-3.3c-0.9-1-2.1-1.6-3.4-1.8c-0.4-0.1-0.8-0.1-1.2-0.1 
 
     c-0.4,0.1-0.8,0.1-1.2,0.1c-0.1,0-0.1,0-0.1-0.1c-0.1-0.4-0.2-0.8-0.4-1.2c-0.6-1.9-1.6-3.4-3.2-4.6c-2-1.5-4.3-2.1-6.8-1.7 
 
     c-1.5,0.2-2.9,0.8-4.2,1.8c-1.4,1.1-2.4,2.4-2.9,4c-0.2,0.5-0.3,1.1-0.5,1.6c0,0.1-0.1,0.1-0.1,0.2c-0.3,0.1-0.6,0.2-0.9,0.4 
 
     c-0.9,0.4-1.6,1-2.2,1.7C5.4,21.2,5,22.5,5,24c0.1,1.4,0.5,2.6,1.4,3.6c1.2,1.4,2.8,2.1,4.6,2.1C14,29.8,17,29.8,20,29.8z"/> 
 
    <path class="st0" d="M17,20.7c-0.9,0-1.7,0-2.6,0c1.4-1.9,2.7-3.7,4.1-5.6c1.4,1.9,2.7,3.7,4.1,5.6c-0.9,0-1.7,0-2.6,0 
 
     c0,2,0,4,0,6c-1,0-2,0-3,0C17,24.7,17,22.8,17,20.7z"/> 
 
</g> 
 
</g> 
 
</svg>

第三の変形

にビューポートを追加 - ブロックのためheight: auto;を、その後、 "preserveAspectRatio"を追加します。

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="0 0 40 40" preserveAspectRatio="xMinYMin meet" > 
<style type="text/css"> 
.st0{fill:#7F7F7F;} 
svg { 
width:42px; 
height:auto; 
}