使用任务运行器运行 SVGO
桌面应用
- ImageOptim(macOS)
- macOS “文件夹操作”
- 在 macOS 10.15 Catalina 之前,您可以使用 SVGO GUI,但它是 32 位的,使其已过时。
有一些通用的应用程序可以在 Windows 和 Linux 上优化图像,但我尚未确认其中任何一个可以优化 SVG。
API
- ImageOptim Web Service API
- Kraken
- Imgix 支持 SVG,如果您选择加入。
- 目前尚不清楚 Cloudinary 是否真的优化了 SVG,并且它们的 API 侧重于上传,但它们确实支持 SVG 的“转换”,并且它们的 获取 URL 格式 类似于 API。
直接从设计工具中优化
通常,当您从设计工具中导出 SVG 时,它非常需要优化。因此,本文中提供了所有这些工具。不过,设计工具本身至少可以在一定程度上提供帮助。
- Sketch 的 svgo-compressor(还有一个针对 Sketch 的特定网络应用,称为 SVGito)
- Figma 默认情况下会尽力而为
- Illustrator 有 SVG NOW
- Inkscape 可以导出为“优化的 SVG”(内部使用 Scour)或使用 SVGO-Inkscape
深入文章
- Michelle Barker:优化 SVG 以用于 Web
- Jayden Seric:如何优化 SVG
- Sara Soueidan:为 Web 创建和导出更好的 SVG 的技巧 & 有用的 SVGO[优化]工具
- Cosima Mielke:编辑、转换和优化 SVG 的工具和资源
- Jake Giltsoff:Web 上的 SVG,准备和优化
- Andreas Larsen:优化 SVG 以用于 Web
- Josh Stoik:优化 SVG 以用于 Web
手动/人工 SVG 优化工作
- Raymond Schwartz:了解和手动改进 SVG 优化
- Amberd Design Studio:如何逐步优化 SVG 文件
- 我们的视频:在 Illustrator 中减少矢量点
- Kevin Powell 的视频:如何创建、清理和优化 SVG
- Brenda Storer 的演示文稿:破解 SVG 代码
- Dudley Storey:SVG 优化:基础知识
- 不再维护的参考:SVGO、Scour、svgcleaner。**更新**:SVGO 再次拥有维护者。
- 维基百科的 Johannes Kalliauer(他告诉我命令行工具的更广泛情况)告诉我,每个工具都有其优势。虽然 SVGO 很受欢迎,但它也是错误最多的。svgcleaner 速度最快。Scour 和 svgcleaner 还可以修复损坏的 SVG,而 SVGO 则无法修复。
救星!我一直在寻找一个可以自动在 SVG 标签中内联样式的工具。看起来 Vecta 可以做到。谢谢!
请注意,如果您需要比 SVGO 更快的工具(SVGO 也可以作为独立的二进制文件运行),svgcleaner 可能非常适合您 :)
@chriscoyier 有三种(不是一种)常见的命令行工具:scour、svgcleaner 和 svgo。所有这三种工具都不再(积极)开发/修复错误,请参阅 https://commons.wikimedia.org/wiki/Help:SVG#Tidying_up 中的参考 [16-18]。在我看来,svgo 是这三种优化器中最容易出现错误的(至少对于维基媒体文件)。
在 https://fedoramagazine.org/design-faster-web-pages-part-2-image-replacement/ 中报告 svgo 不再开发,开发人员也证实了这一点:https://github.com/svg/svgo/issues/1055#issuecomment-431913656
请阅读 https://commons.wikimedia.org/wiki/User:JoKalliauer/Optimization#Using_Optizatiors,它包含有关不同优化工具(而不是在多种实现中使用的一种工具)的有用信息。
scour 和 svgcleaner 可用于修复 https://tools.wmflabs.org/svgworkaroundbot/ 中损坏的(或渲染错误的)SVG,而 svgo(少数例外情况除外)在我看来无法修复。
svgcleaner 的速度快得多(在相同的清理率下),请参阅 https://github.com/RazrFalcon/svgcleaner#charts
在不提及 scour 的情况下推荐 https://github.com/juanfran/svgo-inkscape 是荒谬的,因为 scour 是一个内置函数,只需将其保存为“优化的 SVG (*.svg)”即可,无需额外安装任何东西。
我并不是说 svgo 比 scour 或 svgcleaner 差,我只是说存在三种优化器,每种都有自己的优势。对于新手,我更推荐使用 scour 或 svgcleaner,因为在我看来,它们 bug 较少。
我最近也发现了 svgcleaner。它是一个用 Rust 编写的 SVGO 替代方案,输出速度更快、文件更小且 SVG 更正确。
我建议**不要**使用 SVGO,因为它会默认从你的 SVG 中删除许可证信息,如果盲目使用 SVGO(比如在像 create-react-app 这样的依赖链中),这可能是违法的。举个例子:
CC BY.
如果有人从像 Inkscape 这样的编辑器中嵌入许可证信息,那么这些信息已经以一种**合理的方式**包含在内,不会构成违规。除非有单独的构建步骤来提取这些信息,否则它们将会丢失并导致违规。SVGO 将此元数据视为“编辑器数据”,无法分离:您要么获得编辑器附加的所有额外数据以方便将来编辑,要么获得一个大文件。作者表示这不是一个错误,但许多工具依赖于前端工具工作区中的 SVGO,这会导致默认情况下违反许可证,而用户可能并不知情。