繪圖與視覺化 指南
SVG vs PNG 怎麼選？流程圖、CAD、圖表、簡報與放大列印完整指南
同一張圖看起來一樣，放大、列印或重新編輯時，向量SVG和點陣PNG會走向完全不同的結果。
更新日期:
匯出按鈕常看到：
- PNG
- SVG
很多人直接選PNG，因為最熟。
但如果是線條、幾何圖或CAD草圖，SVG可能更合適。
速答：SVG和PNG怎麼選？
SVG是以XML描述形狀、線條與路徑的向量格式，可以在不同尺寸下重新渲染而保持邊緣清晰，適合Logo、圖示、流程線條、CAD示意與後續向量編輯；PNG是點陣圖片，保存固定像素，適合一般分享、簡報貼圖、截圖與固定尺寸輸出。FunnyTools現行2D CAD可輸出PNG與SVG；Sketchpad、Flowchart、Bar Chart與Pie Chart目前主要輸出PNG，所以不要在文章或CTA中宣稱所有製圖工具都能SVG匯出。
一、PNG 是點陣圖
PNG 保存：
每一個像素的顏色。
例如：
1000×600
就是固定1000×600個像素格。
放大很多倍後：
每個像素也一起被放大。
可能看到鋸齒或模糊。
二、SVG 是向量描述
MDN說明SVG是：
XML-based vector graphics。
它保存：
- line
- circle
- rectangle
- path
- text / style等向量元素
不是固定像素截圖。
三、為什麼SVG放大比較清楚？
因為瀏覽器或向量軟體在新尺寸下：
重新計算形狀。
所以10cm、100cm都能用同一幾何描述重畫。
這對：
- CAD線段
- Logo
- Icon
- Diagram
非常有利。
四、PNG就一定不好嗎？
不是。
PNG優勢：
- 幾乎 everywhere
- Word / PowerPoint /聊天軟體容易貼
- 固定畫面
- 不需要向量編輯器
- 對截圖／點陣內容自然
如果只是要：
貼到簡報中顯示固定大小
PNG很方便。
五、流程圖用SVG最好嗎？
理論上，流程圖這類線條與文字很適合SVG。
但FunnyTools現行Flowchart Maker：
只匯出PNG。
因此本頁不能寫：
「在FunnyTools流程圖工具按SVG」。
如果你需要SVG可編輯流程圖：
應換支援向量專案／SVG的工具。
六、FunnyTools CAD 為什麼適合SVG？
2D CAD的核心資料本來就是：
- 線段
- 矩形
- 圓
- 折線
這些可直接表達成向量。
因此現行CAD工具可以輸出：
- PNG
- SVG
SVG還能進向量軟體繼續編輯。
七、Sketchpad為什麼PNG更自然？
手繪板使用Canvas像素繪圖。
FunnyTools現行Sketchpad：
- 白底
- 筆刷
- 橡皮擦
- PNG 960×560
它不是一組向量筆劃project。
因此匯出PNG符合工具模型。
八、Bar / Pie chart為什麼目前是PNG？
FunnyTools現行長條圖與圓餅圖會把生成結果下載為PNG。
即使圖表「概念上可以做向量輸出」：
現有工具沒有SVG export就不能宣稱有。
產品文件必須反映實際功能，不是理論能力。
九、印刷一定要SVG嗎？
不是。
高解析PNG在適當尺寸與PPI下也能印得很好。
但線條／文字型圖形如果有SVG：
通常更適合需要放大輸出的情況。
真正印刷還要看：
- 軟體
- 字型
- 色彩
- 印刷流程
十、Word / PowerPoint哪個比較穩？
PNG通常最少相容問題。
SVG在現代Office也有良好支援，但：
- 企業舊版軟體
- 特殊轉PDF流程
- 第三方系統
可能有差異。
正式交件前以目標軟體測試。
十一、網站適合SVG嗎？
圖示、Logo、Diagram常很適合SVG。
MDN也指出SVG能乾淨縮放、可被搜尋／索引／script。
但要注意：
- SVG可包含script/style等能力
- 不可信SVG不能當成單純無害文字檔
若網站允許使用者上傳SVG，需特別做安全處理。
十二、SVG檔案一定比較小嗎？
不一定。
簡單icon的SVG通常很小。
但：
- 幾萬個path
- embedded raster image
- 複雜filter
SVG也可能很大。
不能用「向量一定比較小」當保證。
十三、PNG有透明嗎？
PNG支援alpha transparency。
所以透明背景Logo也可用PNG。
但Logo若有原始SVG：
多尺寸使用通常更彈性。
十四、SVG能不能放照片？
SVG可以嵌入raster image，但：
照片本身不會因包進SVG就變成向量。
所以照片仍應使用適合的JPG/WebP/PNG等格式。
十五、從PNG轉SVG會自動變向量嗎？
不會。
把PNG包在SVG容器，或改副檔名：
不等於vectorization。
真正向量化需要：
- trace
- 手工重畫
- path extraction
而且結果品質視來源而定。
十六、匯出後要保留source嗎？
如果工具只輸出PNG：
PNG就是成品快照，不是完整可編輯source。
FunnyTools流程圖也沒有editable project file。
重要圖應：
- 保留可編輯來源（若工具支援）
- 或保存階段性PNG
- 記錄原始數據／流程文字
十七、FunnyTools工具對照
| 工具 | 現行輸出 |
|---|---|
| 2D CAD | PNG / SVG |
| Sketchpad | PNG |
| Flowchart | PNG |
| Bar Chart | PNG |
| Pie Chart | PNG |
以repo/live實作為準；網站功能若發現產品已更新，才可同步修改文章。
十八、常見錯誤
錯誤1
以為SVG只是更高解析PNG。
錯誤2
以為PNG轉SVG就自動向量化。
錯誤3
流程圖現行沒有SVG卻在文章宣稱有。
錯誤4
重要作品只有PNG沒有source。
錯誤5
照片硬用SVG。
十九、FAQ
SVG放大會糊嗎？
向量形狀通常可在不同尺寸保持清晰。
PNG適合簡報嗎？
非常適合一般固定尺寸貼圖。
FunnyTools哪些工具有SVG？
目前2D CAD明確支援PNG與SVG。
流程圖能下載SVG嗎？
FunnyTools現行Flowchart Maker只提供PNG。
PNG轉SVG能變清楚嗎？
不會自動恢復向量結構。
二十、延伸閱讀
下一步
需要放大、列印或向量軟體後製？
如果使用FunnyTools 2D CAD，優先保留SVG；只需要簡報或聊天分享時，PNG最直接。
重點速記
SVG = vector instructions
PNG = fixed pixels