在 Illustrator 中使用 SVG 格式

优质

小牛编辑

141浏览

2023-12-01

关于 SVG

GIF、JPEG、WBMP 和 PNG 等用于 Web 的位图图像格式，都使用像素网格来描述图像。生成的文件有可能很庞大，局限于单一（通常较低）的分辨率，且在 Web 上会占用大量带宽。SVG 是将图像描述为形状、路径、文本和滤镜效果的矢量格式。生成的文件很小，可在 Web、打印甚至资源有限的手持设备上提供较高品质的图像。用户无须牺牲锐利程度、细节或清晰度，即可在屏幕上放大 SVG 图像的视图。此外，SVG 提供对文本和颜色的高级支持，它可以确保用户看到的图像和 Illustrator 画板上所显示的一样。

SVG 格式完全基于 XML，可同时为开发人员和用户提供许多优势。通过 SVG，您可以使用 XML 和 JavaScript 来创建与用户操作对应的 Web 图形，图形中可具有突出显示、工具提示、音频和动画等复杂效果。

要将图稿存储为SVG 格式，您可以使用“存储”、存储为、“存储副本”或“存储为 Web 和设备所用格式”等命令。要访问 SVG 导出选项的完整组合，请使用“存储”、“存储为”或“存储副本”命令。“存储为 Web 和设备所用格式”命令提供了一部分 SVG 导出选项，这些选项可用于面向 Web 的作品。

在 Illustrator 中建立图稿的方式将影响到生成的 SVG 文件。记住下列原则：

请使用图层将结构添加到 SVG 文件。将图稿存储为 SVG 格式时，每个图层都被转换为组 (<g>) 元素。（例如，在 SVG 文件中，名为 Button1 的图层变为 <g id="Button1_ver3.0">。）嵌套图层将成为 SVG 嵌套组，而隐藏的图层会被保留（其 SVG 样式属性为 display="none"）。
如果希望不同图层上的对象显示为透明，请调整每个对象（而不是每个图层）的不透明度。如果改变了每个图层级别的不透明度，则生成的 SVG 文件在 Illustrator 中显示时不会显示透明。
栅格数据不能在 SVG 查看器中缩放，并且不能像其他 SVG 元素那样被编辑。如果可能，请避免创建在 SVG 文件中会被栅格化的图稿。以 SVG 格式存储时，使用栅格化、艺术效果、模糊、画笔描边、扭曲、像素化、锐化、素描、风格化、纹理和视频等效果的渐变网格和对象会被栅格化。同样，包含这些效果的图形样式也会产生栅格化情形。请使用 SVG 效果，从而在不导致栅格化的情形下添加图形效果。
在图稿中使用符号并简化路径以提高 SVG 性能。如果性能是优先考虑的因素，还要避免使用生成大量路径数据的画笔，如炭笔、炭灰笔以及卷轴笔。
请使用切片、图像映射和脚本将 Web 链接添加到 SVG 文件。
脚本语言（如 JavaScript）为 SVG 文件带来了无限的功能。指针移动和键盘移动可以调用脚本功能（如翻转效果）。脚本也可以使用文档对象模型 (DOM) 来访问和修改 SVG 文件；例如，插入或删除 SVG 元素。

应用 SVG 效果

可以使用 SVG 效果添加图形属性，如添加投影到图稿。因为 SVG 效果基于 XML 并且不依赖于分辨率，所以它与位图效果有所不同。事实上，SVG 效果就是一系列描述各种数学运算的 XML 属性。生成的效果会应用于目标对象而不是源图形。

Illustrator 提供了一组默认的 SVG 效果。您可以用这些效果的默认属性，还可以编辑 XML 代码以生成自定效果，或者写入新的 SVG 效果。

注意:要修改 Illustrator 的默认 SVG 滤镜，请使用文本编辑器编辑 Documents and Settings/<userdir>/Application Data/Adobe/Adobe Illustrator <版本号> Settings/<位置> 文件夹中的Adobe SVG Filters.svg文件。可以修改现有的滤镜定义、删除滤镜定义以及添加新的滤镜定义。

选择一个对象或组（或在“图层”面板中定位一个图层）。
执行下列操作之一：
- 要应用具有默认设置的效果，请从效果 > SVG 滤镜子菜单底部选择该效果。
- 要应用具有自定设置的效果，请选择效果 > SVG 滤镜 > 应用 SVG 滤镜。在此对话框中，选择该效果，然后单击“编辑 SVG 滤镜”按钮。编辑默认代码，然后单击确定。
- 要创建并应用新效果，请选择效果 > SVG 滤镜 > 应用 SVG 滤镜。在此对话框中，单击“新建 SVG 滤镜”按钮，输入新代码，然后单击确定。
  应用 SVG 滤镜效果时，Illustrator 会在画板上显示效果的栅格化版本。可以通过修改文档的栅格化分辨率设置来控制此预览图像的分辨率。
  注意：如果对象使用多个效果，SVG 效果必须是最后一个效果；换言之，它必须显示在“外观”面板底部（在“透明度”项正上方）。如果 SVG 效果后面还有其他效果，SVG 输出将由栅格对象组成。

从 SVG 文件导入效果

选择效果 > SVG 滤镜 > 导入 SVG 滤镜。
选择要从中导入效果的 SVG 文件，然后单击打开。

SVG 交互面板概述

在导出图稿以在 Web 浏览器中查看时，您可以使用“SVG 交互”面板（窗口 > SVG 交互将交互内容添加到图稿中。例如，通过创建一个触发 JavaScript 命令的事件，用户可以在执行动作（如将鼠标光标移动到对象上）时在网页上快速创建移动。也可以使用“SVG 交互”面板，查看与当前文件相关联的所有事件和 JavaScript 文件。

从 SVG 交互面板中删除事件

要删除一个事件，请选择该事件，然后单击“删除”按钮，或者从面板菜单中选择删除事件。
要删除所有事件，请从面板菜单中选择清除事件。

列出、添加或删除链接到文件上的事件

单击“链接 JavaScript 文件”按钮。
在“JavaScript 文件”对话框中，选择一个 JavaScript 项，然后执行下列操作之一：
- 单击添加，以浏览其他 JavaScript 文件。
- 单击移去，以删除所选的 JavaScript 项。

将 SVG 交互内容添加到图稿中

在“SVG 交互”面板中，选择一个事件。（请参阅 SVG 事件。）
输入对应的 JavaScript 并按 Enter 键。

SVG 事件

onfocusin

在元素获得焦点（如通过指针选择）时触发动作。

onfocusout

在元素失去焦点时（通常在另一元素获得焦点时）触发动作。

onactivate

通过鼠标单击或按下键盘来触发动作，取决于 SVG 元素。

onmousedown

在元素上按下鼠标按钮时触发动作。

onmouseup

在元素上释放鼠标按钮时触发动作。

onclick

在元素上单击鼠标时触发动作。

onmouseover

在指针移动到元素上时触发动作。

onmousemove

指针在元素上时触发动作。

onmouseout

指针从元素上移开时触发动作。

onkeydown

在按住某键时触发动作。

onkeypress

在按某键时触发动作。

onkeyup

释放键时触发动作。

onload

在 SVG 文档被浏览器完全解析之后触发动作。使用此事件调用一次性初始化功能。

onerror

在元素无法正确载入或发生另一错误时触发动作。

onabort

在元素尚未完全载入页面即停止载入时触发动作。

onunload

在从窗口或框架中移除 SVG 文档时触发动作。

onzoom

在缩放级别根据文档改变时触发动作。

onresize

在调整文档视图大小时触发动作。

onscroll

在滚动或平移文档视图时触发动作。

针对 Web 优化的 SVG 导出选项

新的“SVG 导出”（文件 > 导出 > SVG）选项现已可用。新的工作流程允许您为 Web 和屏幕设计项目生成针对 Web 优化的标准化 SVG 文件。

可用的选项包括：

样式。选择您希望如何在 SVG 文件中写入生成的 CSS。可以选择的样式包括：“内部 CSS”、“内联样式”或“演示文稿属性”。
字体。选择如何在 SVG 文件中呈现字体。轮廓保留了路径定义，且兼容性非常高。
图像：选择是要将图像存储为文档中的嵌入内容，还是将其存储为文档外部的链接文件。
对象 ID：选择如何将 ID 类型（名称）指定给 SVG 文件中的对象。可以选择的内容包括：“图层名称”、“最小”或“唯一”。该选项能够确定如何处理对象的重复名称，以及如何在导出的 CSS 中命名对象。
小数：选择要保留多少关于对象位置精度的信息。小数的值越大，展示对象的精度就会增加，渲染 SVG 的视觉保真度也就相应地越高。不过，增加小数值的同时也会增大生成的导出 SVG 文件的大小。
缩小：通过删除空组和空白部分，优化 SVG 的文件大小。选择此选项也会降低生成的 SVG 代码的可读性。
响应。选中此选项可确保 SVG 生成的缩放位于浏览器中。不写入绝对大小值。
显示代码：在默认的文本编辑器中打开导出的内容。
在浏览器中显示（图标）：在默认的 Web 浏览器中显示图像。