正在缓存svg文件。使用img标记还是svg标记？

Question

我有许多大的SVG文件(用在线工具减小大小后大约有200kb)。我真的不希望访问者每次访问时都从我的服务器上下载所有的文本。我想利用CDN和varnish缓存。

如果我使用SVG标签，浏览器、CDN或Varish都会将svg代码缓存在html文档中。SVG没有src属性。

如果我使用图像标记，它将被缓存，但我无法利用SVG标记的preserveAspectRatio和viewBox。在调整浏览器窗口的大小时，我必须处理图像的div和css以保持纵横比。您认为使用SVG会更容易

我目前的分辨率是这个 css 在一个 img 标签上，在 src 属性中有一个 svg。

.myImage{ max-width: 100%; height: auto; max-height: 55vh;}

我真正想做的是这个，但显然我不能：

 <svg data='images/mydoc.svg' viewBox="0 0 250 75" preserveAspectRatio="xMinYMin meet">
 </svg>

我正在寻找如何处理SVG的想法。我真的需要用css将我所有的img标签svg图像包装在div标签中以保持浏览器大小的长宽比吗？我只是觉得有一个更简单的方法，我缺少什么？

Answer 1

您的CSS大小调整做得太多，同时又不够。您说您想要一个max-wide，但您没有给出宽度。除了一个max-Hei之外，您只给出了一个auto高度。任何尺寸为0px x 0px的图像都可以满足这些条件。

如果SVG非常宽，但不是很高，你会怎么做？在我看来，你希望它有100%的宽度，但高度要缩小。如果SVG非常高，如果它拉伸了整个宽度，它将超过55vh限制，你会怎么做？在我看来，你希望它保持更小，向左移动。

为此，您的最大宽度规则是多余的，并且缺少宽度规则。

您可以很容易地实现这一点（可能会出现旧的IE版本）。-对于这个例子，我将SVG设置为超文本标记语言的数据uri。

css prettyprint-override">.myImage{
    width: 100%; 
    max-height: 55vh;
}

<img class="myImage" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 75' preserveAspectRatio='xMinYMin meet'><rect width='250' height='75' fill='green'/></svg>">