将SVG缩放到viewBox或更小

Question

我有一个内联<SVG>，它定义为viewBox，但不是height或width。在创建SVG时，我曾经将width/height设置为与viewBox相同的值。好处是最终图像可以缩放到我想要的SVG的自然单位；问题是固定的width/height可能会在最后一页中溢出父容器。从width/height中删除<SVG>会使图像呈现为父容器允许的最大尺寸，几乎总是大于SVG的自然单位。

是否有一种方法可以将<SVG>缩放为自然单位，但如果父容器太小，又可以缩小（！）？

Answer 1

如果您不打算使用内嵌svg（并且不限于IE缩放...），那么<img>中的svg是您的朋友。

  

当SVG文件具有viewBox并且嵌入在<img>中时，   浏览器将（几乎总是）缩放图像以匹配长宽比   viewBox中定义的比率。

HTML

<figure>
  <figcaption><code>img</code>, auto size</figcaption>
  <div>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/potofgold.svg">
  </div>
</figure>

Result

内联SVG扩展支持还远远不够... Read from this amazing article to learn more about how this works有关广泛支持的解决方案，请参见第4点。建议使用padding-bottom骇客，这在iframe嵌入式中也很常见。