SVG 使用指南

全部指南

• SVG 是什麼，爲什麼設計師都在用入門認知 · SVG（Scalable Vector Graphics）是用 XML 描述圖形的矢量格式。它不記錄…
• SVG 怎麼改顏色：3 種方法（改代碼 / currentColor / CSS 變量）最高頻實操 · 「SVG 改不了顏色」是最常見的誤會，多數時候只是用錯了引入方式。先確認一件事：圖標是內聯在 HTM…
• SVG 轉 PNG 怎麼不失真（附在線工具）工具導流 · 矢量轉位圖本身不會「變糊」，糊是因爲導出時分辨率給低了，或者把一張 24px 的圖標硬拉到 512p…
• 一個圖標該選多大：16 / 20 / 24 / 32 的取捨規格決策 · 圖標尺寸不是「看着差不多就行」：同一條 1.5px 的線，在 16px 裏佔近 10%，在 32px…
• 線性、填充、雙色、彩色：圖標風格怎麼統一風格決策 · 風格不統一幾乎從不體現在單張圖上，而是排成一排時暴露：線寬 1.5 和 2 混着、圓頭和方頭混着、有…
• 圖標版權怎麼判斷：CC0 / MIT / Apache 2.0 的區別合規焦慮 · 「免費下載」不等於「可以隨便用」。圖標涉及三層權利：作品著作權（由許可決定）、品牌與商標（Logo、…
• Figma / Sketch / AI 裏怎麼用 SVG 圖標工作流 · 從 SVG 文件到設計稿，最常出問題的不是導入，而是導入後的「隱形變形」：多餘分組、被展開的描邊、丟…
• SVG 文件太大怎麼辦：svgo 與手動清理性能 · 一份從設計工具直接導出的 SVG，體積裏常常有一半是編輯器元數據、註釋、隱藏圖層和過高的小數精度。精…
• 深色模式下的圖標怎麼處理場景 · 深色模式不是把顏色反過來就完事。純黑填充會直接消失，1px 細線在深底上顯得更細，彩色圖標可能變得刺…
• 網站 favicon 用 SVG 還是 PNG具體需求 · 結論先給：兩個都放。現代瀏覽器支持 SVG favicon，但部分平臺（某些移動端書籤、分享卡片抓取…
• 微信小程序能不能用 SVG國內場景 · 能用，但不是「把 <svg> 標簽寫進頁面」這種用法。小程序沒有瀏覽器的 DOM，WXML 裏不能直…
• 圖標對齊與視覺重心：爲什麼你的圖標看起來不齊專業向 · 把一批圖標全部設成 24×24、頂格對齊，結果看上去還是有的偏大、有的偏高、有的偏左——這不是代碼寫…