動畫 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>元素來進步增強