如何压缩 SVG 文件

已发表: 2023-01-13

SVG 文件是存储矢量图像的好方法,但它们可能是大文件。 以下是有关如何压缩 SVG 文件的一些提示: 1. 使用矢量图形编辑器(如 Adob​​e Illustrator 或 Inkscape)将SVG 文件导出为“压缩”SVG 文件。 2. 使用像 SVGO 这样的工具来优化和压缩你的 SVG 文件。 3. 使用 Gzip 等工具进一步压缩 SVG 文件。 4. 使用像 CloudFlare 这样的 CDN 来提供压缩的 SVG 文件。 5. 使用像 ImageOptim 这样的工具为网络优化你的 SVG 文件。

可缩放图形文件 (SVG) 是专为在 Internet 上使用而设计的图像。 本节中的文件通常由 Cricut 和其他流行的制作机器使用。 它们的设计还考虑到了印刷和工艺的高度清晰度。 为了有效,它们必须被压缩。 您保存在 DropBox 中、保存在计算机上或保存在外部硬盘驱动器中的文件都可以被压缩。 您可以使用压缩的 SVG 文件在虚拟存储中存储更多数据。 压缩量因文件类型而异。

借助SVG 文件软件,您可以使用此技术轻松压缩图像文件并传输和存储数据。

Svg 可以压缩多少?

Svg 可以压缩多少?
图片来源:shrinkme.app

可以使用 Gzip 压缩SVG 图像以实现更小的文件大小。 使用 Gzip 时,文件大小最多可减少 70%。

可缩放矢量图形或 SVG 是一种使用 XML(可扩展标记语言)的二维图形图像格式。 因为它是压缩的,所以 SVG 文件很大。 网页设计师经常使用该程序来设计徽标、向其网站添加内容,甚至创建 GIF 动画。 如果文件太大,则会减慢网页的加载速度并使浏览者望而却步。 WorkinTool 文件压缩器可用于将 SVG 文件压缩到 MP4 的大小。 它不仅支持SVG压缩,还支持其他图像和视频格式的压缩。 PPT压缩、 PDF压缩、Word压缩都可以。

除了减小文件大小外,您还可以压缩和调整SVG 文件大小,只要将质量级别设置为适当的大小即可。 WorkinTool File Compress 可以在一次压缩运行中压缩特定类别的所有文件,包括图像和视频。 使用此功能,可以轻松地将图像上传到具有用户友好规定的网站和应用程序。

因为 gzip 是一种压缩算法,所以它是压缩 SVGZ 文件的流行选择。 使用 SVGZ 文件渲染透明度、渐变动画和滤镜。 因此,它们非常适合用于可以保存和下载大文件的 Web 应用程序。

Svg 文件大小

由于文件大小和使用的压缩算法不同,SVG 文件的平均大小在 1.46 到 7.27 兆字节之间。 如前所述,文件的质量不会改变。


为什么我的 Svg 文件这么大?

为什么我的 Svg 文件这么大?
图片来源:pinimg.com

如果这些SVG 元素没有增加视觉效果,那么所有这些情况都会得到解决,从而导致文件大小显着增加。 您的代码也会考虑到这一点以及注释。 例如,Illustrator 会自动将导出注释添加到 SVG 以增加文件体积。

WordPress 主题的徽标大小为 3MB,而为我们创建的徽标大小为 33MB。 我尝试了几次优化新徽标,但我只将其降低到 14Kb。 因为 SVG 文件中的数据(以路径和节点的形式)比 PNG 文件中的多,所以它更大。 可以使用压缩的、人类可读的文本文件或 JPEG 文件来描述图像。 PNG文件包含压缩的二进制数据,可以通过与压缩二进制数据完全相同的方式读取和读取。 您还可以使用 SVGZ 文件,它是 .zip 的 gzip 压缩版本。 VG文件。 由于 SVG 本身的性质,就尺寸缩减而言,它可能会或可能不会像 PNG 一样小。

SVG 文件中的可扩展性是理想的。 无论它们在您的网站上有多大或多小,它们将始终显示相同。 这是必要的,因为它允许您在不影响图像质量的情况下创建更详细、更专业的图形。

Svg 图像可以轻松调整大小

使用“调整大小”按钮,您可以调整SVG 图像的设置以允许其放大。 这可以通过减小 JPEG 图像的大小轻松解决; 通常,它们比同一图像的 JPEG 图像大,但这很容易纠正。

压缩 Svg 代码

有几种方法可以压缩 SVG 代码。 一种方法是使用SVG Minifier之类的工具,它会自动为您压缩代码。 另一种方法是手动优化您的代码,这可能会更耗时,但会产生更小的文件大小。

如果您绘制自己的 SVG 文件或从 Internet 下载它们,这些工具(例如 SVG-Editor 或 SVGOMG)是您的最佳选择。 您可以使用这些工具显着减小文件大小,只需几秒钟。 如果您在使用内联 SVG 时无法让代码正常工作,您仍然可以做很多事情来提高其易读性。 如果我们放大它并在 X 轴上添加负空间,我们就可以从中间开始克隆我们的宇航员。 >defs> 属性中看不到任何内容。 可以通过访问 Amelia Wattenberger 的精美缩放SVG 指南来发现 ViewBox。 通过在标记中使用其名称,可以直接使用 xlink:href 进行绘制。

路径可能看起来很可怕,但直线不会。 我在上面的示例中添加的类是针对一些复制的宇航员,我在 CSS 中添加的颜色值是针对该类的。 因此,我有一种简单的方法可以轻松更改该元素的实例。

使用 Nano 压缩你的 Svg 图像

由于 SVG 图像通常比标准图像大,因此它们会占用大量硬盘空间并降低网站速度。 如果您使用 Nano 压缩,您的 SVG 图像将更小且加载速度更快。 如果字体包含在 .sva 文件中,您还可以压缩它们,这可以节省您的时间和带宽。

如何修复 Svg 文件

如果您的 SVG 文件显示不正确,您可以尝试通过一些方法来修复它。 首先,检查以确保该文件是格式正确的 XML。 如果不是,您可以尝试通过 XML 解析器运行它以修复任何错误。 其次,尝试将文件的编码更改为 UTF-8。 最后,确保文件在兼容 SVG 的浏览器中呈现。 如果一切都失败了,您可以尝试在SVG 编辑器中打开文件并手动修复任何错误。

损坏或损坏的 svg 文件可能是一个耗时且令人沮丧的过程。 在本教程中,我将介绍什么可以破坏 svg 以及如何使用 Cricut Design Space 程序修复它。 如果您的 svg 文件已损坏或损坏,您有几个选择。 如果您的卖家形象受损,请联系他们。 最好买一件质量好的,以免花时间修复不好的印象。 以下是可供下载的高质量 svg 文件列表。

大幅在线压缩 Svg 文件

在线压缩 svg 文件的方法有很多,但大多数都需要付费订阅。 但是,有一些免费的在线工具可以帮助您压缩 svg 文件而不会降低质量。

免费的 JPEG、PNG 在线图像压缩。 图片,. 维格,和。 动图。 通过减小文件的大小,他们可以大大减小文件的大小。 通过在您的任何网络浏览器中打开网络应用程序,您可以访问它。 单击“接受”按钮,即表示您同意在所有情况下使用 cookie。