动画 SVG 导出
导出您的动画为用于网络嵌入和可缩放图形的 SVG 文件 .
何时使用 SVG
SVG是理想的:
- 在网站上嵌入动画
- 需要无限伸缩性
- 小文件大小很重要
- 您需要可编辑的矢量输出
导出为 SVG
- 在标题中单击出口
- 选择 ** 动画 PPG0 {}
- 点击出口
- 立即下载文件
动画支持
完全支持的QQ
| 动画 | SVG 输出 |
|---|---|
| 脉搏 | <animateTransform type="scale"> |
| 旋转 | <animateTransform type="rotate"> |
| 弹跳 | <animateTransform type="translate"> |
| 淡出 | <animate attributeName="opacity"> |
| 摇摆 | <animateTransform type="rotate"> |
| 幻灯片 | <animateTransform type="translate"> |
| 起来 | <animateTransform type="translate"> |
未支持的QQ
| 特性 | 原因 |
|---|---|
| 打字机 | 需要 Java 脚本 |
| 效果( Sparkle, 爆炸) | 基于框架的动画 |
| 模式旋转 | 基于Frame的 |
| 复杂的键框 | 有限的 SMIL 支持 |
Browser Support: SVG动画使用SMIL,在Chrome,Firefox,Safari,和Edge都支持. 一些较老的浏览器可能显示静态SVG.
在网站上嵌入
直接嵌入
<img src="animation.svg" alt="Animated graphic">
内置 SVG
对于更多的控制,直接粘贴SVG代码:
<svg viewBox="0 0 800 600">
<!-- SVG content -->
</svg>
CSS 背景情况
.element {
background-image: url('animation.svg');
}
导出后自定义
SVG文件是可编辑的 XML. 你们可以:
- 在文本编辑器中打开
- 修改颜色、大小、时间
- 添加 CSS 样式
- 嵌入自定义 JavaScript
导出什么
| 元素 | 导出为 |
|---|---|
| 文字 | <text> 要素 |
| 形状 | <path>,<circle>等. |
| 背景情况 | <rect> 与填充 |
| 动画 | SMIL <animate>标签 |
文件大小
SVG 文件一般很小:
- 简单的动画: 2- 10 KB
- 复杂场景: 20-50 KB
- 比GIF或MP4小得多
提示
SVG 提示 :
- 将 SVG 用于嵌入质量问题的网络
- 避免效果和打字机动画
- 在目标浏览器中测试
- SVG 嵌入后可以用 CSS 样式
不支持的动画回落
如果您的设计使用了不支持的特性 :
- 为动画版本导出为 MP4 或 GIF
- 导出为 PNG 静态回落
- 使用
<picture>元素进行渐进增强