选择一个对象或组（或在“图层”面板中定位一个图层）。
上次更新日期：
2025年1月17日
- 《Illustrator 用户指南》
- 了解 Illustrator
- Illustrator 简介
- 工作区
- Illustrator 中的工具
- 生成式 AI（在中国大陆不可用）
- 快速操作
- Illustrator iPad 版
- Illustrator iPad 版简介
- 工作区
- 文档
- 选择和排列对象
- 绘图
- 文字
- 处理图像
- 颜色
- 云文档
- 添加和编辑内容
- 绘图
- 测量
- 3D 对象和材质
- 颜色
- 绘画
- 选择和排列对象
- 改变对象形状
- 文字
- 创建特殊效果
- Web 图形
- 导入、导出和存储
- 导入
- Illustrator 中的 Creative Cloud Libraries
- 存储和导出
- 打印
- 任务自动化
- 故障排除
了解如何通过 SVG 来使用 XML 和 JavaScript 创建与用户操作对应的 Web 图形，图形中可具有突出显示、工具提示、音频和动画等复杂效果。
关于 SVG
SVG 是将图像描述为形状、路径、文本和滤镜效果的矢量格式。生成的文件会经压缩，可以在网络、印刷甚至资源受限的手持设备上提供高质量的图形，这与体积庞大的 GIF、JPEG、WBMP 和 PNG 不同。用户无须牺牲锐利程度、细节或清晰度，即可在屏幕上放大 SVG 图像的视图。此外，SVG 提供对文本和颜色的高级支持，它可以确保用户看到的图像和 Illustrator 画板上所显示的一样。
SVG 格式完全基于 XML，可同时为开发人员和用户提供许多优势。
可以使用“存储”、“存储为”、“存储副本”或“存储为 Web 和设备所用格式”命令以 SVG 格式存储图稿。要访问 SVG 导出选项的完整组合，请使用“ 存储”、“存储为”或“存储副本”命令。“存储为 Web 和设备所用格式”命令提供了一部分 SVG 导出选项，这些选项可用于面向 Web 的作品。
应用 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 滤镜 ”。输入新代码，然后选择确定。
-
应用 SVG 滤镜效果时，Illustrator 会在画板上显示效果的栅格化版本。可以通过修改文档的栅格化分辨率设置来控制此预览图像的分辨率。
注意:
如果对象使用多个效果，SVG 效果必须是最后一个效果；换言之，它必须显示在“外观”面板底部（在“透明度”项正上方）。如果 SVG 效果后面还有其他效果，SVG 输出将由栅格对象组成。
从 SVG 文件导入效果
-
选择效果 > SVG 滤镜 > 导入 SVG 滤镜。
-
选择要从中导入效果的 SVG 文件，然后选择打开。
SVG 交互面板概述
使用“SVG 交互”面板，可查看与当前文件相关联的所有事件和 JavaScript 文件。
导出图稿以在 Web 浏览器中查看时，您可以使用“SVG 交互”面板（“窗口”>“SVG 交互”）将交互内容添加到图稿中。例如，通过创建一个触发 JavaScript 命令的事件，用户可以在执行动作（如将鼠标光标移动到对象上）时在网页上快速创建移动。
从 SVG 交互面板中删除事件
您可以使用 SVG 交互面板删除一个或所有事件。
要删除一个事件
- 选择事件并选择删除所选项目。
要删除所有事件
- 从面板菜单中选择清除事件。
列出、添加或删除链接到文件上的事件
选择链接 JavaScript 文件并选择添加来添加其他 JavaScript 文件，而要删除选定的 JavaScript 项目，请选择删除。
将 SVG 交互内容添加到图稿中
-
在“SVG 交互”面板中，选择一个事件。（请参阅 SVG 事件。）
-
输入对应的 JavaScript 并按 Enter 键。
onfocusin
在元素获得焦点（如通过指针选择）时触发动作。
onfocusout
在元素失去焦点时（通常在另一元素获得焦点时）触发动作。
onactivate
通过鼠标单击或按下键盘来触发动作，取决于 SVG 元素。
onmousedown
在元素上按下鼠标按钮时触发动作。
onmouseup
在元素上释放鼠标按钮时触发动作。
onclick
在元素上单击鼠标时触发动作。
onmouseover
在指针移动到元素上时触发动作。
onmousemove
指针在元素上时触发动作。
onmouseout
指针从元素上移开时触发动作。
onkeydown
在按住某键时触发动作。
onkeypress
在按某键时触发动作。
onkeyup
释放键时触发动作。
onload
在 SVG 文档被浏览器完全解析之后触发动作。使用此事件调用一次性初始化功能。
onerror
在元素无法正确载入或发生另一错误时触发动作。
onabort
在元素尚未完全载入页面即停止载入时触发动作。
onunload
在从窗口或框架中移除 SVG 文档时触发动作。
onzoom
在缩放级别根据文档改变时触发动作。
onresize
在调整文档视图大小时触发动作。
onscroll
在滚动或平移文档视图时触发动作。
创建 SVG 文件的技巧
请使用图层将结构添加到 SVG 文件。当您以 SVG 格式保存图稿时，每个图层都会转换为一个组 (<g>) 元素。（例如，在 SVG 文件中，名为 Button1 的图层变为 <g id="Button1_ver3.0">。） 嵌套图层将成为 SVG 嵌套组，而隐藏的图层会被保留（其 SVG 样式属性为 display="none"）。
如果希望不同图层上的对象显示为透明，请调整每个对象（而不是每个图层）的不透明度。
栅格数据不能在 SVG 查看器中缩放，并且不能像其他 SVG 元素那样被编辑。您可以避免创建在 SVG 文件中会被栅格化的图稿。请使用 SVG 效果，从而在不导致栅格化的情形下添加图形效果。
在图稿中使用符号并简化路径以提高 SVG 性能。如果性能是优先考虑的因素，还要避免使用生成大量路径数据的画笔，如炭笔、炭灰笔以及卷轴笔。
请使用切片、图像映射和脚本将 Web 链接添加到 SVG 文件。
脚本语言（如 JavaScript）为 SVG 文件带来了无限的功能。指针移动和键盘移动可以调用脚本功能（如翻转效果）。
针对 Web 优化的 SVG 导出选项
新的“SVG 导出”（“文件”>“导出”>“导出为”>“SVG”）选项现已可用。新的工作流程允许您为 Web 和屏幕设计项目生成针对 Web 优化的标准化 SVG 文件。有关更多信息，请参阅 SVG 导出选项。
相关资源
告知我们
如果您有疑问，或有想法想要分享，请加入 Adobe Illustrator 社区。我们很乐意倾听您的心声。
