科普：如何在 Mac 和网络上使用 SVG 文件

SVG 文件：可缩放矢量图形是一种常见的 Web 可调整大小的图像格式。以下是在 macOS 中使用它们的方法。

现代 Web 浏览器和图像应用程序能够使用数学计算（如贝塞尔曲线）缩放图像。这与固定位图图形相反，固定位图图形不能很好地缩放，并且有时会提供块状、像素化的外观。

可缩放（或“矢量”）图形使用基于数学的图像描述。调整图像大小时，可以以新大小完全重新计算图像，而不会明显降低质量。

可扩展图形的历史可以追溯到几十年前，起源于计算机科学研究。1980 年代后期，桌面出版 （DTP） 革命发生了，因此，可扩展图形成为主流。

在那段时间里，很明显，将图形和文本的大小调整为各种打印和显示大小的能力是关键。

一些最早的 DTP 应用程序包括 Aldus Freehand、Adobe Illustrator 等。当然，Illustrator 今天仍然存在于 Adobe 的 Creative Cloud 应用程序套件中。

这些应用程序允许创作者和设计师创建图形，通过控制点作它们，并随意调整它们的大小和形状。与编辑仅包含像素网格的统一位图图像相比，这使得更改图像变得非常容易。

早期的台式计算机（例如 NeXT 中的台式计算机）也使用 Display Postscript 等技术将可缩放图形用于其屏幕显示。现在，Apple 的操作系统使用一种称为 Core Graphics（也称为“Quartz”）的类似技术来计算屏幕外的图像，然后再显示它们。

一些现代应用程序（如 Adobe Photoshop）能够将某些位图图形转换或矢量化为矢量格式，但结果可能会有所不同。

最早的矢量桌面绘图应用程序之一：Aldus Freehand

互联网和 SVG

当 Internet 在 1990 年代首次流行时，互联网上的大多数图形都是位图的。许多年后，很明显需要用于 Web 的可扩展图形 - 由于使用大型高分辨率显示器和调整浏览器窗口大小的能力。

协作要求还要求能够由互联网上的多个利益相关者实时作图形。这就是可缩放矢量图形 （SVG） 的用武之地。

由于缺乏任何现有的矢量图形第三方标准，万维网联盟 （WC3） 的 SVG 工作组于 2001 年创建了可在 Web 上使用的可缩放矢量图形 （SVG） 建议。SVG 文件包含有关如何使用全色调色板甚至某些形式的动画以任何大小清晰地绘制和缩放图像的说明。

SVG 工作组考虑了几个关于可扩展图形格式的商业提案，但最终决定采用开放规范。在 RFC 绘图中使用 SVG 图像的后续 RFC 为：RFC 7996。

WC3 还有一个更新的未经批准的 SVG 2 标准正在制定中。由于移动设备的广泛采用，还引入了两个额外的标准：SVG Tiny （SVGT） 和 SVG Basic （SVGB）。

SVG 基于通用的开放 XML 数据标准 - 实际上保证了它在大多数现代系统和 Web 浏览器中的普遍兼容性。SVG XML 非常紧凑 - 主要由标记、坐标、形状描述和颜色等绘图命令组成。

SVG 的早期采用受到限制 - 主要是因为缺乏通用的浏览器支持。随着越来越多的浏览器开始包含 SVG 渲染，在 2010 年左右的某个时候开始采用 SVG 渲染。到 2017 年，SVG Web 接受度已成为主流。

在 Windows 平台上，大多数早于版本 8.0 的 Internet Explorer 版本都不支持 SVG。

使用 SVG 最明显的原因是可伸缩性。调整 Web 浏览器窗口的大小时，Web 页面及其所有组件元素也会随之调整大小。

能够快速重新计算和重绘任何大小的图像以适应调整大小的窗口，这大大提高了 Web 图像质量。

SVG 文件也可以使用 gzip 格式进行压缩，这使得它们在网页加载时下载速度更快。即使没有压缩，SVG 文件通常也很小 - Web 上使用的许多 SVG 文件的大小都小于 10KB，而更多文件的大小小于 5KB。

对于允许图像下载的网站，SVG 允许通过网页在 Web 上轻松交换图形文件，而无需额外的服务器或转换。SVG 文件还用于某些用户界面中，使它们的某些部分可以清晰地缩放，例如，在调整桌面应用程序的窗口大小时。

在 Mac 浏览器中对原始 NeXT 徽标的 SVG 渲染仅占用 4KB 的文件数据

Mac 上的 SVG

macOS 支持 SVG，并且有许多高质量的应用程序可以编辑、导出、导入 SVG 图形并将其保存为图像文件。大多数 SVG 文件的扩展名为 .svg 或 .svgz。

其中一些应用程序包括 （但不限于）：

1. macSVG
2. Boxy SVG ($20)
3. Sketch ($10/mo)
4. OmniGraffle
5. Inkscape
6. Canva ($15/mo)
7. Gapplin (viewer only)
8. Affinity Designer 2 ($69)
9. Pixelmator Pro ($50)
10. Adobe Illustrator ($23/mo)

一些应用程序（如 Sketch）可以导入/导出 SVG，以及许多其他文件和格式，包括 CSS （Web）、PNG、JPG、GIF、TIFF 和 WebP 等位图、Figma 文件 （.fig）、PDF、Adobe Illustrator 和 Photoshop 文件，甚至原始 SVG 代码。Sketch 不支持导入的图形格式（如 GIF 或 WebP）的动画。

某些设计应用程序（如 Autodesk Fusion）可以导入和使用 SVG 文件，但不能直接编辑或处理它们。通常，大多数 CAD 应用程序不支持直接编辑 SVG。

某些第三方应用程序（如另存为 SVG）可以转换本机导出的 CAD 文件，并将其转换为具有不同结果的 SVG 文件。

Mac 上一些比较流行的 SVG 应用程序

如果您使用 Microsoft 365，它对导入 SVG 以及将图像旋转和缩放到特定大小的支持有限 - 但它目前不支持直接的完整 SVG 编辑。但是，您可以更改 SVG 图像轮廓和填充，或将 Microsoft 365 中的 SVG 文件转换为 365 应用程序中使用的 Office 形状。

您应该使用哪些 Mac SVG 应用程序？

多年来，最流行的免费 SVG Mac 应用程序是 Inkscape 和 Boxy SVG（后来商业化）。这些应用程序仍然非常适合简单、轻松、直接的 SVG 编辑和导出。

然而，当阿肯色州开发人员 Douglas Ward 发布 macSVG 时，这一切都在 2022 年发生了变化——它现在是 Mac 上 SVG 编辑领域无可争议的领导者。macSVG 既易于使用，又功能非常丰富。它允许您编辑 SVG 图像，还允许您通过单击查看任何元素的直接 XML。

可用的工具包括形状、点和路径控件、形状变形、文本、图像以及一些路径和曲线转换功能。您还可以在完整的 XML 文件中查看 SVG，因为它在导出以供 Web 上使用时显示出来。

还包括一个与 Apple 的 Final Cut Pro 类似的时间轴编辑器 - 这使得制作 SVG 图像的动画变得轻而易举。制作的动画非常流畅和流畅。macSVG 还可以生成 HTML5 视频和 Core Graphics 代码。

Sketch 和 Canva 可能是最受欢迎的现代 SVG 编辑器，而且价格都合理。如果您是平面设计师，您可能已经在使用 Adobe Illustrator 的付费版本。

Pixelmator Pro 和 Affinity Designer 是显而易见的选择，但两者都需要更高的价格。

Web 上的 SVG 应用

Web 显然是 SVG 文件和代码的主要用例 - 并且有许多优秀的 SVG Web 框架可用。其中一些是：

1. Adobe 的 Snap.svg
2. SVG.js
3. SVG.NET
4. Fabric.js 用于 SVG 到 canvas 的转换
5. SVG-Edit（允许在 Web 浏览器中直接编辑 SVG）
6. SwiftSVG（主要用于图标和简单的形状渲染）

由于这些框架中的大多数已经提供了在 Web 上显示 SVG 所需的大部分 Web 代码。将它们包含在您的 Web 项目中可以缩短开发时间。

您需要在尽可能多的平台上的各种浏览器中测试您网站的 SVG 代码，以确保兼容性。还有一个来自 Tobias Strebitzer 的 Figma SVG 工具包。

为 Web 项目创建 SVG 文件后，简单显示通常意味着将文件包含在 Web 服务器上，并在代码中引用它们或在页面加载期间动态加载它们。在大多数情况下，缩放由浏览器自动处理 - 除非您希望图像仅以特定大小显示。

总的来说，SVG 是一项出色的 Web 技术，因为它提供了一个通用的开放标准，用于在大多数浏览器中快速渲染任何大小的图像。