Animated Icon Generator

Animated Icon Generator 是免費的瀏覽器工具，可自訂圖示並下載為動態 SVG、靜態 SVG 或 PNG，適合網頁、設計與 WordPress 工作流程。

概述

Animated Icon Generator 是免費的瀏覽器工具，可用來選擇動態圖示，並將其下載為動態 SVG、靜態 SVG 或 PNG。來源資料描述了 300 個圖示，並依類別整理，例如狀態、動作、導覽、媒體、檔案與資料、通訊、UI 與裝飾、天氣、商務、開發、裝置，以及人物與健康。

此工具專為簡單的匯出流程而設計：您先從清單中選擇圖示，再調整顏色、輸出大小、速度與循環次數，然後下載符合目標環境的檔案格式。動態 SVG 適合可自行放置檔案的網站；靜態 SVG 與 PNG 則可用於設計工具、印刷，以及不支援 SVG 動畫的環境。

文件頁面也提供了在 HTML 與 WordPress 中嵌入動態 SVG 的實用指引，以及授權說明。圖示可免費商用且無需標註來源，但圖示檔案本身不得作為獨立素材包重新散布或販售。

主要功能

圖示選取與設定調整

從清單中點選圖示，並在左側設定面板調整外觀與動畫條件。

顏色與動作的細部調整

可指定顏色、輸出大小、播放速度與循環次數，並將這些條件套用到輸出檔案。

三種輸出格式

支援動態 SVG、靜態 SVG 與 PNG 三種輸出格式，可依用途選擇檔案。

易於整合的動態 SVG

動態 SVG 即使透過 img 元素或 CSS 的 background-image 載入也能運作，無需額外加入外部 CSS 或 JavaScript。

清單預覽播放

清單中的卡片進入畫面時會播放 3 次後停止，之後可透過滑鼠懸停或「全部播放」再次播放。

典型使用情境

網站與應用程式 UI 動畫
建立介面狀態、載入指示器、提示訊息及其他適合動態呈現的 UI 元素，然後匯出可直接放入網站或應用程式的動態 SVG。
設計與印刷工作流程
匯出靜態 SVG 以準備設計檔或印刷版面，保留向量品質並可在設計工具中編輯。
不支援環境的替代資產
當目的地不支援 SVG 上傳或動態 SVG 時，建立 PNG 作為替代檔案，包括檔案處理受限的 WordPress 設定。
輕量級網頁嵌入
將匯出的 SVG 放入 img 元素或作為 CSS background-image 使用，即可在網頁中嵌入動態圖示，而不需要額外腳本。
一致交付客製化資產
在匯出前調整同一個來源圖示的顏色、大小、速度與循環設定，以標準化團隊或客戶交付的圖示輸出。

Pros and Cons

Pros

個人與商業專案皆可免費使用。
依照所述授權條款，無需標註來源。
支援動態 SVG、靜態 SVG 與 PNG 輸出。
顏色、大小、速度與循環次數等匯出設定會反映在下載的檔案中。
動態 SVG 無需加入外部 CSS 或 JavaScript 即可使用。

Cons

PNG 匯出不會保留動畫。
WordPress 可能需要外掛或伺服器端上傳設定變更才能使用 SVG 檔案。

FAQ

基本的使用方式是什麼？

您可以從清單中選取圖示，接著在左側設定面板調整顏色、輸出大小、速度與循環次數，然後下載為動態 SVG、靜態 SVG 或 PNG。

三種輸出格式要如何區分使用？

動態 SVG 適合可直接放置動畫檔案的網站；靜態 SVG 適合設計工具與印刷用途；PNG 則適合不支援 SVG 的環境。

要在 WordPress 中使用該怎麼做？

WordPress 預設不允許上傳 SVG。您可以使用像 Safe SVG 這類外掛，或在 functions.php 中調整 upload_mimes；如果無法修改設定，則可改用 PNG。

可以商用嗎？需要標註來源嗎？

可以。根據授權條款，個人與商業用途皆免費，且不需要標註出處。不過，不能將圖示本身重新整理成素材包進行轉售或再散布。

下載後還能進一步微調嗎？

可以。將匯出的 SVG 用文字編輯器開啟後，您可以檢視並調整 stroke、color、@keyframes 等內容，也能透過修改 stroke-width 變更線條粗細。

Quick Facts

類別: 開發工具
來源網域: codequest.work
產品類型: 動態圖示產生器
輸出格式: 動態 SVG、靜態 SVG、PNG
授權: 個人與商業用途免費；無需標註來源
顯示的圖示數量: 300 個圖示