导出 SVG 文件

Animate

Animate

打开应用程序
  1. Adobe Animate 用户指南
  2. Animate 简介
    1. Animate 新增功能
    2. 图示术语表
    3. Animate 系统要求
    4. Animate 键盘快捷键
    5. 在 Animate 中使用多种文件类型
  3. 动画
    1. Animate 动画基础知识
    2. 如何在 Animate 中使用帧和关键帧
    3. 在 Animate 中使用逐帧动画
    4. 如何在 Animate 中使用经典补间动画
    5. 画笔工具
    6. 运动辅助线
    7. 补间动画和 ActionScript 3.0
    8. 关于运动补间动画
    9. 补间动画
    10. 创建补间动画
    11. 使用属性关键帧
    12. 用补间对位置进行动画处理
    13. 如何使用动画编辑器编辑补间动画
    14. 编辑补间动画的运动路径
    15. 处理补间动画
    16. 添加自定义缓动
    17. 创建和应用动画预设
    18. 设置动画的补间范围
    19. 处理另存为 XML 文件的补间动画
    20. 补间动画与传统补间
    21. 形状补间
    22. 在 Animate 中使用骨骼工具动画
    23. 在 Animate 中处理角色操纵
    24. 如何在 Adobe Animate 中使用遮罩层
    25. 如何在 Animate 中使用场景
  4. 交互性
    1. 如何使用 Animate 创建按钮
    2. 将 Animate 项目转换为其它文档类型格式
    3. 在 Animate 中创建和发布 HTML5 Canvas 文档
    4. 在 Animate 中通过代码片段添加交互性
    5. 创建自定义 HTML5 组件
    6. 使用 HTML5 Canvas 中的组件
    7. 创建自定义组件：示例
    8. 自定义组件的代码片段
    9. 最佳做法 - 使用 Animate 制作广告
    10. 虚拟现实创作和发布
  5. 工作区和工作流
    1. 创建和管理画笔
    2. 在 HTML5 Canvas 文档中使用 Google 字体
    3. 使用 Creative Cloud Libraries 和 Adobe Animate
    4. 使用 Animate 的舞台和工具面板
    5. Animate 工作流程和工作区
    6. 在 HTML5 Canvas 文档中使用 Web 字体
    7. 时间轴和 ActionScript
    8. 使用多个时间轴
    9. 设置首选参数
    10. 使用 Animate 创作面板
    11. 使用 Animate 创建时间轴图层
    12. 导出移动应用程序和游戏引擎的动画
    13. 移动和复制对象
    14. 模板
    15. 在 Animate 中查找和替换
    16. 撤消、重做和历史记录面板
    17. 键盘快捷键
    18. 如何在 Animate 中使用时间轴
    19. 创建 HTML 扩展
    20. 图像和动画 GIF 的优化选项
    21. 图像和 GIF 的导出设置
    22. Animate 中的资源面板
  6. 多媒体与视频
    1. 在 Animate 中变形和合并图形对象
    2. 在 Animate 中创建并使用元件实例
    3. 图像描摹
    4. 如何在 Adobe Animate 中使用声音
    5. 导出 SVG 文件
    6. 创建用于 Animate 中的视频文件
    7. 如何在 Animate 中添加视频
    8. 使用 Animate 绘制和创建对象
    9. 改变线条和形状
    10. Animate CC 中的笔触、填充和渐变
    11. 使用 Adobe Premiere Pro 和 After Effects
    12. Animate CC 中的颜色面板
    13. 使用 Animate 打开 Flash CS6 文件
    14. 在 Animate 中使用传统文本
    15. 向 Animate 中置入图稿
    16. 在 Animate 中导入的位图
    17. 3D 图形
    18. 在 Animate 中使用元件
    19. 使用 Adobe Animate 绘制线条和形状
    20. 在 Animate 中使用库
    21. 导出声音
    22. 在 Animate CC 中选择对象
    23. 在 Animate 中使用 Illustrator AI 文件
    24. 应用混合模式
    25. 排列对象
    26. 使用“命令”菜单自动处理任务
    27. 多语言文本
    28. 在 Animate 中使用摄像头
    29. 图形滤镜
    30. 声音和 ActionScript
    31. 绘制首选参数
    32. 用钢笔工具绘图
  7. 平台
    1. 将 Animate 项目转换为其它文档类型格式
    2. 自定义平台支持
    3. 在 Animate 中创建和发布 HTML5 Canvas 文档
    4. 创建和发布 WebGL 文档
    5. 如何打包 AIR for iOS 应用程序
    6. 发布 AIR for Android 应用程序
    7. 发布用于桌面的 Adobe AIR
    8. ActionScript 发布设置
    9. 最佳做法 - 管理应用程序中的 ActionScript
    10. 如何在 Animate 中使用 ActionScript
    11. Animate 工作区中的辅助功能
    12. 编写和管理脚本
    13. 启用自定义平台支持
    14. 自定义平台支持概述
    15. 使用自定义平台支持插件
    16. 调试 ActionScript 3.0
    17. 启用自定义平台支持
  8. 导出和发布
    1. 如何从 Animate CC 导出文件
    2. OAM 发布
    3. 导出 SVG 文件
    4. 使用 Animate 导出图形和视频
    5. 发布 AS3 文档
    6. 导出移动应用程序和游戏引擎的动画
    7. 导出声音
    8. 最佳做法 - 移动设备内容创建技巧
    9. 最佳做法 - 视频惯例
    10. 最佳做法 - SWF 应用程序创作指南
    11. 最佳做法 - 构造 FLA 文件
    12. 在 Animate 中优化 FLA 文件的最佳做法
    13. ActionScript 发布设置
    14. 指定 Animate 的发布设置
    15. 导出放映文件
    16. 导出图像和动画 GIF
    17. HTML 发布模板
    18. 使用 Adobe Premiere Pro 和 After Effects
    19. 快速分享和发布动画
  9. 故障排除
    1. 已修复的问题
    2. 已知问题

 

SVG 是什么？

SVG（可伸缩矢量图形）是用于描述二维图像的一种 XML 标记语言。SVG 文件以压缩格式提供分辨率无关的 HiDPI 图形，可用于 Web、印刷及移动设备。可以使用 CSS 来设置 SVG 的样式，对脚本与动画的支持使得 SVG 成为 Web 平台不可分割的一部分。

某些常见的 Web 图像格式如 GIF、JPEG 及 PNG，体积都比较大且通常分辨率较低。SVG 格式则允许您按矢量形状、文本和滤镜效果来描述图像，因此具有更高的价值。SVG 文件体积小，且不仅可以在 Web 上，还可以在资源有限的手持设备上提供高品质的图形。您可以在屏幕上放大 SVG 图像的视图，而不会损失锐度、细节或清晰度。此外，SVG 对文本和颜色的支持非常出众，它可以确保您看到的图像就和在舞台上显示的一样。SVG 格式完全基于 XML，它对开发人员和其他这样的用户来说具有诸多优势。

现在，您可以从 Animate 导出 SVG 文件，而不会随之产生任何不需要的定义和 ID。Animate 19.1 版中增强了 SVG 合成功能。此导出选项卡将增强导入到 Character Animator 中的 SVG 文件的质量。

Animate 中的 SVG 导出工作流

Animate 允许导出为 SVG 1.1 的格式。您可以使用 Animate 中的强大设计工具创造出具有丰富表现力的图稿，然后导出为 SVG。

在 Animate 中可以导出动画的选定帧和关键帧。由于导出的图稿是矢量文件，因此即便缩放为不同的大小，图像仍然是高分辨率的。

SVG 导出功能取代了以前的 FXG 导出（从 Animate（2013 年 6 月）起弃用）。您会发现 SVG 导出功能的性能和输出品质都要卓越得多。此外，与 FXG 相比，内容的损失在 SVG 中也是最少的。

具有滤镜效果的图稿

在 SVG 中，滤镜效果可能与 Animate 中的不完全一样，原因是 Animate 和 SVG 中提供的滤镜之间不是一一对应的。但是，Animate 会利用 SVG 中提供的各种基本滤镜组合来模仿类似的效果。

处理多个元件

SVG 导出可以无缝处理多个元件而不会有任何内容损失。输出结果与 Animate 中舞台上的图稿非常接近。

将图稿导出为 SVG 格式

  1. 在 Animate 中，将播放指示器拖拉或移动到适当的帧处。
  2. 选择“文件”>“导出”>“导出图像”。或选择“文件”> “发布设置”（选择“其他格式”部分中的“SVG 图像”选项。）
  3. 输入或浏览到要保存 SVG 文件的位置。确保“另存为”类型选择的是“SVG”。
  4. 单击“确定”。
  5. 在“导出 SVG”对话框中，选择“嵌入”或“链接”到 SVG 文件。
    • 包括隐藏图层：导出 Animate 文档中的所有隐藏图层。取消选择“导出隐藏的图层”将不会把任何标记为隐藏的图层（包括嵌套在影片剪辑内的图层）导出到生成的 SVG 文档中。这样，通过使图层不可见，就可以方便地测试不同版本的 Animate 文档。
    • 嵌入：在 SVG 文件中嵌入位图。如果想在 SVG 文件中直接嵌入位图，则可以使用此选项。
    • 链接：提供位图文件的路径链接。如果不想嵌入位图，而是在 SVG 文件中提供位图链接，则可以使用此选项。如果选择将图像复制到文件夹选项，位图将保存在 images 文件夹中，该文件夹是在导出 SVG 文件的位置创建的。如果未选中将图像复制到文件夹选项，将在 SVG 文件中引用位图的初始源位置。如果找不到位图源位置，便会将它们嵌入 SVG 文件中。
    • 将图像复制到 /Images 文件夹：允许您将位图复制到 /Images 下。 如果 /Images 文件夹不存在，系统会在 SVG 的导出位置下创建。
    • 针对 Character Animator 优化：可导出适合 Character Animator 使用的 SVG 文档。

  1. 单击“确定”。

某些 Animate 功能是不受 SVG 格式支持的。使用这些功能创建的内容在导出时或者会被删除，或者会默认为使用支持的功能。

此外，也可以在 Animate 中使用“发布设置”对话框（“文件”>“发布设置”）来导出 SVG 文件。从“其他格式”部分，选择 SVG 选项便可以导出 SVG 文件。

建议用户使用业界标准的浏览器并更新到最新版本，来查看 SVG。这是因为一些图形滤镜和色彩效果可能在旧浏览器上无法正确渲染，比如低于 Internet Explorer 9 的浏览器。

与 Adobe Illustrator 交换 SVG 文件

使用 Animate 可以与 Adobe Illustrator 进行内容交换。此工作流取代了 Animate (13.0) 中停用的 FXG 导出功能。您可以从 Animate 中导出 SVG 文件，然后在 Adobe Illustrator 中导入它们。有关在 Adobe Illustrator 中使用 SVG 文件的详细信息，请参阅此帮助主题。

如果想对图稿做更精细的编辑并添加丰富的细节，可使用此工作流。还可以使用 Illustrator 对图稿添加效果，如投影。

要在 Adobe Illustrator 中编辑 SVG 文件，然后在 Animate 中使用编辑过的内容，可执行以下操作：

  1. 在 Animate 中，导出为 SVG。
  2. 使用 Adobe Illustrator 打开 SVG 文件，以便编辑图稿。
  3. 将 SVG 文件另存为 .ai 文件，然后在 Animate 中导入。有关在 Animate 中使用 Illustrator 文件的更多信息。

更快、更轻松地获得帮助

新用户？

快速链接

查看您的所有计划 管理您的计划
查看快速链接
隐藏快速链接

法律声明    |    在线隐私政策

Copyright © 2024 Adobe。保留所有权利。