Question

我有很多大的SVG文件（使用在线工具减小大小后大约为200kb）。我真的不希望访问者每次访问时都从服务器下载所有文本。我想利用CDN和清漆缓存。

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

如果我使用图像标签，它将被缓存，但是我不能利用SVG标签具有的prepareAspectRatio和viewBox。调整浏览器窗口大小时，我必须处理div和CSS的图像以保持宽高比。您认为使用SVG会更容易

我当前的解决方案是将img标签上的css设置为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图像包装在带有css的div标签中，以保持浏览器调整尺寸时的长宽比？我只是觉得有一种更简单的方法，我缺少什么？

Answer 1

您调整大小的CSS同时执行的操作过多而又不够。您说您想拥有一个max-width，但是您没有给出宽度。除了auto外，您只给出max-height高度。任何尺寸为0px x 0px的图片都可以满足这些条件。

如果SVG很大但不是很高，您想怎么办？对我来说，您似乎希望它具有完整的100％宽度，但高度要缩小。如果SVG太高以至于如果它拉伸整个宽度会超过55vh限制，您想怎么办？在我看来，您似乎希望它保持较小并向左移动。

为此，您的max-width规则是多余的，并且缺少width规则。

您可以轻松实现这一目标（使用possible exeption of older IE versions）。 -对于此示例，我将SVG设置为HTML <img>源的数据uri。这样，就CSS和大小而言，它就像是一个外部文件一样。

.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>">

这里的重点是viewBox和preserveAspectRatio：无论是内联SVG还是包含在外部文件中，都将应用它们。您为<img>标签定义一个区域，并按照宽高比规则将 viewBox矩形装入其中。

简而言之，如果这种调整大小的行为满足了您的需求，请继续并通过<img>标签包含外部SVG文件。

缓存svg文件。使用img标签还是svg标签？

1 个答案: