使用 SVG 的最佳实践，关于高度和宽度？

Question

我一直在尝试在一些最新项目中使用 SVG，由于它可以扩展，我想知道您对这些 SVG 的动态高度和宽度有何看法？

到目前为止，我已经从 Illustrator 导出图形，将它们保存为 SVG，打开 SVG 并删除 doctype 和 #layer_1 等 ID。然后我将高度和宽度属性编辑为 100%。因此，我通过在其父项上设置宽度和/或填充来调整 SVG 的大小。这使得使用媒体查询调整大小变得容易。以及 CSS 过渡。但我不确定这是最好的方法。

我的 HTML 是这样的：

<div class="svg icon_phone">
  <img src="static/icon_phone.svg">
</div>

<div class="svg">
  <img src="static/icon_other.svg">
</div>

这样的CSS：

.svg {
  width: 60%;
}

.icon_phone {
  padding-left: 80px;
}

SVG 看起来像这样：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     height="100%" width="100%" viewBox="0 0 97 94.5" enable-background="new 0 0 97 94.5" xml:space="preserve">
<circle fill="#5B2B6E" cx="48.63" cy="47.125" r="42.75"/>
<g>
    <line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" x1="48.85" y1="47.125" x2="26.41" y2="47.125"/>
    <line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" x1="70.85" y1="47.125" x2="58.25" y2="47.125"/>
    <polyline fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" points="44.794,65.51 26.41,47.125 44.794,28.74   
        "/>
</g>
</svg>

我不知道这是否是一种很好的做事方式，因为它们在 IE 和某些浏览器中的行为很奇怪，除非我在它们的父级上特别设置了宽度和高度。一些 SVG 伸展，一些高度都搞砸了。但在 Chrome 中，一切都很好。

对此最好的做法是什么？

Answer 1

最好从 svg 本身中删除 height 和 width（以及 x、y 和 viewBox）属性，并在 css 中同时使用 width 和 height。 例如：

.parent svg {
   width: 100%;
   heigth: 100%;
}

.parent {
   width: 100px;
   height: 50px;
}

或者：

.parent svg {
   width: 100px;
   heigth: 50px;
}

因此您可以轻松地让所有内容都响应。