CSSの「幅」プロパティを使用してSVGイメージの縮尺を変更しないのはなぜですか？

Question

私はポートフォリオのウェブサイトを構築しています。

HTMLコード

<div id = "hero"> 
    <div id = "social"> 
     <img src = "facebook.svg"> 
     <img src = "linkedin.svg"> 
     <img src = "instagram.svg"> 
    </div> 
</div> 

（SASSを使用して）CSSコード

#hero { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    height: 300px; 

    #social { 
     width: 50%; 
     display: flex; 
     justify-content: space-between; 
     flex-wrap: wrap; 

     img { 
      width: 2em; 
     } 
    } 
} 

問題は、私はCSSにwidthプロパティを使用してSVGsのサイズを変更することはできませんよということです。ここで私は別の例で取得するものである：

img { width: 2em; }

img { width: 3em; }

img { width: em; }

divのhero divの中央に向かってアイコンがどのように崩壊するかをご確認ください。代わりに

、私はCSS heightプロパティを使用する場合：

img { height: 2em; }

img { height: 3em; }

img { height: 4em; }

0を

この動作は必要ですが、これが正しい方法であるかどうかはわかりません。なぜこれが起こるのですか？ SVGイメージのサイズ変更の良い方法を知っていますか（特にフレックスボックスモデルを使用していますか？

Answer 1

SVGsは、PNG等のビットマップイメージとは異なります - それが定義のビューポートに合わせて調整されます - あなたがいるように見えるよう。 PNGのように直接スケールすることはありません。

imgのwidthを大きくしても、高さが制限されていると、アイコンの高さが高くなりません。 imgは、幅の広いボックスに水平に中央揃えされた状態になります。

あなたの問題は、SVGの高さが固定されていることです。SVGファイルを開き、確認し、それらのいずれか：

1. は何widthと定義されてheight、または
が widthと height "100%"に両方のセットを持っていない持っています。

あなたの問題を解決するはずです。そうでない場合は、あなたのSVGの1つをあなたの質問に投稿して、それがどのように定義されているかを見ることができます。

Answer 2

viewBoxプロパティを変更して、svgで高さと幅を正しく変更する必要があります。 svgの<svg>タグにあります。 SVGはviewBoxを持っている場合

https://developer.mozilla.org/en/docs/Web/SVG/Attribute/viewBox