SVG

关于 SVG

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

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

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

有关在 Illustrator 中创建移动内容的视频，请参阅 www.adobe.com/go/vid0207_cn。

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

请使用图层将结构添加到 SVG 文件。将图稿存储为 SVG 格式时，每个图层都被转换为组 (<g>) 元素。（例如，在 SVG 文件中，名为 Button1 的图层变为 <g id="Button1_ver3.0">。）嵌套图层成为 SVG 嵌套组，用 SVG 样式属性 “显示 :无 ”保留隐藏图层。

如果希望不同图层上的对象显示为透明，请调整每个对象（而不是每个图层）的不透明度。如果改变了每个图层级别的不透明度，则生成的 SVG 文件在 Illustrator 中显示时不会显示透明。

栅格数据不能在 SVG 查看器中缩放，并且不能像其他 SVG 元素那样被编辑。如果可能，请避免创建在 SVG 文件中会被栅格化的图稿。以 SVG 格式存储时，使用栅格化、艺术效果、模糊、画笔描边、扭曲、像素化、锐化、素描、风格化、纹理和视频等效果的渐变网格和对象会被栅格化。同样，包含这些效果的图形样式也会产生栅格化情形。请使用 SVG 效果，从而在不导致栅格化的情形下添加图形效果。

在图稿中使用符号并简化路径以提高 SVG 性能。如果性能是优先考虑的因素，还要避免使用生成大量路径数据的画笔，如炭笔、炭灰笔以及卷轴笔。

请使用切片、图像映射和脚本将 Web 链接添加到 SVG 文件。

脚本语言（如 JavaScript）为 SVG 文件带来了无限的功能。指针移动和键盘移动可以调用脚本功能（如翻转效果）。脚本也可以使用文档对象模型 (DOM) 来访问和修改 SVG 文件；例如，插入或删除 SVG 元素。

另请参阅

第 345 页的 “针对 Web 优化图像 ”

第 238 页的 “以 SVG 格式存储 ”

应用 SVG效果

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

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

要修改 Illustrator 的默认 SVG 滤镜，请使用文本编辑器来编辑 “Documents and Settings/<userdir>/Application

Data/Adobe/Adobe Illustrator CS4 Settings/<location>”文件夹中的 Adobe SVG 滤镜 .svg 文件。可以修改现有的滤镜定义、删除滤镜定义以及添加新的滤镜定义。

1选择一个对象或组（或在 “图层 ”面板中定位一个图层）。 2执行下列操作之一：

要应用具有默认设置的效果，请从 “效果 ”>“SVG 滤镜 ”子菜单底部选择效果。

要应用具有自定设置的效果，请选择 “效果 ”>“SVG 滤镜 ”>“应用 SVG 滤镜 ”。在此对话框中，选择该效果，然后单击 “编辑 SVG 滤镜 ”按钮

。编辑默认代码，然后单击 “确定 ”。

要创建并应用新效果，请选择 “效果 ”>“SVG 滤镜 ”>“应用 SVG 滤镜 ”。在此对话框中，单击 “新建 SVG 滤镜 ”按钮

，输入新代码，然后单击 “确定 ”。

应用 SVG 滤镜效果时， Illustrator 会在画板上显示效果的栅格化版本。可以通过修改文档的栅格化分辨率设置来控制此预览图像的分辨率。

重要说明：如果对象使用多个效果，SVG 效果必须是最后一个效果；换言之，它必须显示在 “外观 ”面板底部（在 “透明度 ”项正上方）。如果 SVG 效果后面还有其他效果， SVG 输出将由栅格对象组成。

另请参阅

第 317 页的 “关于栅格效果 ”第 319 页的 “修改或删除效果 ”

从 SVG文件导入效果

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

SVG交互面板概述

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

另请参阅

第 345 页的 “针对 Web 优化图像 ”第 238 页的 “以 SVG 格式存储 ”

从 SVG交互面板中删除事件

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

要删除所有事件，请从面板菜单中选择 “清除事件 ”。

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

1单击 “链接 JavaScript 文件 ”按钮

。 2在 “JavaScript 文件 ”对话框中，选择一个 JavaScript 项，然后执行下列操作之一：

单击 “添加 ”以浏览查找其他 JavaScript 文件。

单击 “删除 ”以删除选定的 JavaScript 项。

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

1在 “SVG 交互 ”面板中，选择一个事件。（请参阅第 340 页的 “SVG 事件 ”。） 2输入对应的 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 在滚动或平移文档视图时触发动作。