目錄
前言
最近因為需要把作品印在名片上並指定燙金的部分,結果設計師說要向量圖,
所以就研究了一下怎麼把 png 轉 svg,才發現好多坑 QQ
SVG 是什麼 ?
SVG,全名為 Scalable Vector Graphics,可以用來描述二維向量的圖形。
SVG 的主要特點
可縮放
與 PNG、JPEG 不同,將它們放大到極限就會發現其實他們都是一塊塊的畫素方格,
SVG 是向量圖形,這意味著它們可以無限縮放而不會失去影像的高品質。
無論在多大或多小的螢幕上顯示,SVG 圖像都能保持清晰和精細。
可編輯
SVG 檔案是基於 XML 的文本檔案,因此可以使用任何文本編輯器來編輯它們。
您可以通過修改 XML 標籤和屬性來改變圖像的形狀、顏色、大小和其他屬性。
( 專門拿來畫圖的 HTML )
檔案比較小
由於 SVG 是描述性的語言,
其文件體積通常較小,有助於加快網頁載入速度,
特別是在畫簡單形狀或 logo 的時候。
跨平台和跨設備
SVG 是標準化的,因此它可以在所有支持 SVG 的設備和瀏覽器中顯示一致。
它在手機、平板電腦和桌機上的顯示效果都一樣讚。
SVG 那麼好用,怎麼比較少見 ?
之所以 SVG 和這種轉換工具比較不普及的原因,是因為這不是像 png 轉 jpeg 那麼簡單,
除了牽涉到大量的數學運算外還有繁複的調參過程,總之是件技術活…。
工具推薦
因為我作品的色彩豐富,轉成 svg 需要花很多心力,
所以我試了不少工具,比較推薦的列在下方。
PNG 轉 SVG 線上工具:ezgif
雖然 ezgif 也是我很喜歡用的老牌軟體,但是在這題的得分上普普通通。
成果
連結
PNG 轉 SVG 線上工具:vectormagic
vectormagic 看起來表現的也還不錯,
不過因為要錢,我先溜了 😅
成果
連結
不推薦的工具
PNG 轉 SVG 線上工具:Offline Converter
成果
(2024/10/18 更新)
我一開始超興奮想說轉檔之後色彩都沒跑,
但後來我才發現他其實不算是傳統 svg 的概念。
因為理論上 svg 應該要可以編輯,
但他底層只是包一層 base64 格式的照片,根本就是假 svg 🙁
還是把他留著給大家看看,如果效果太好可能要謹慎看待…
連結
https://offlineconverter.com/tw/image/png-to-svg/
PNG 轉 SVG 程式工具:pyautotrace
看到有人推薦,所以才用用看的。
程式碼
import numpy as np
from autotrace import Bitmap, VectorFormat
from PIL import Image
svg_file = 'img_2x.svg'
png_file = 'img_2x.png'
# Load an image.
image = np.asarray(Image.open(png_file).convert("RGB"))
# Create a bitmap.
bitmap = Bitmap(image)
# Trace the bitmap.
vector = bitmap.trace()
# Save the vector as an SVG.
vector.save(svg_file)
# Get an SVG as a byte string.
svg = vector.encode(VectorFormat.SVG)
成果
…
好喔,看來這題是線上服務略勝一籌,
從轉出來的 svg 檔案是 246MB 的那一刻起,或許我就不應該嘗試開啟它。
連結
https://github.com/lemonyte/pyautotrace
結語
唯一支持業界良心 ezgif。
關鍵字:png 轉 svg, png to svg
- [推薦工具] 讓程式碼截圖變的美美的吧!VScode CodeSnap 與 3 種同功能線上工具介紹 - 2025-01-05
- [AI 繪圖初級教學] 用 X/Y/Z Plot 比較 Stable Diffusion 的 prompt 與 LoRA 效果 - 2024-12-27
- [AI 繪圖中級篇教學] Stable Diffusion WebUI WD14 Tagger 介紹 - 2024-12-26