何时应将 SVG 或 SVGZ 用于我的 Web 图形?

平面设计 adobe-illustrator 网站设计 向量 svg
2022-01-01 09:39:31

据我了解,

SVGZ 是 SVG 的压缩文件类型。我喜欢使用 SVG 图像,并且有很多使用它们的经验。

在我使用它们的所有时间里,我从未有过超过几百千字节的图形。

我在制作响应式网站时将 SVG 用于响应式图形。我也使用它们,因为我最喜欢的设计风格是基于矢量的图形。我最强的设计实力是插画师,尤其是在平面设计方面。

我会使用 SVG 图形的另一个原因是可以轻松地为图形的某些元素设置动画,例如手臂、腿等。

尤其是背景元素,比如一个横跨整个页面的城市,而我制作了一些闪烁的灯光等等。

如果文件被压缩,它会丢失 SVG 代码,所以我不能为它制作动画吗?

有什么理由我应该使用 SVGZ 而不是 SVG?

更新

好吧,我决定只制作一个 SVG 和 SVGZ 来看看它们在网络上的表现,因为我发现我的作品古老的 CS3 可以拯救 SVGZ!

测试后,我遇到了一个非常意外的 SVGZ 文件类型问题。(在 Chrome、Firefox 和 IE 上测试)如果您转到图像的直接 URL,则会收到错误消息。我假设您无法访问这些文件类型的 SVG 代码,但是在制作小提琴之后,它甚至似乎都没有显示图像。

这些对网络无用吗?

.svg

.svgz

JSFIDDLE

2个回答

对压缩 svg 的支持因浏览器而异,但您需要配置服务器以使用有关其编码的信息正确标记 svgz 文件,以明确告诉浏览器在收到时如何对其进行解码。

svgz 的服务器响应需要配置为包括“内容编码:gzip”

svg     Content-Type: image/svg+xml

svgz    Content-Type: image/svg+xml
        Content-Encoding: gzip

对于 Apache Web 服务器,这可以通过 .htaccess 文件来实现:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

请注意,无论您是即时压缩它还是在将其放在服务器上之前将其烘烤,都应该提示内容编码。对于这样的资产,我认为最好预压缩它。否则,您正在为文件的每个请求占用服务器 CPU。这可能看起来不多,但这是导致美国医疗保健网站崩溃的那种未优化问题。

这可能不是您所期望的答案,但对于网络来说,并不真正需要使用任何 SVGZ 文件。原因是 SVGZ 文件只是一个经过预 Gzip 压缩的 SVG。

现代 Web 服务器可以在提供资产之前自己执行此 Gzipping(有关更多信息,请参阅StackOverflow 上的此答案),因此,如果您有一个 300KB 的 SVG,压缩时为 50KB,那么当 Web 服务器自动 Gzip 时,它将大致相同。所以它不会是300KB,而是50KB,然后会被浏览器解压缩。