徽標以兩個文件形式到達: logo.svg 在 3 KB 和 logo.png 在 40 KB 處。在瀏覽器標籤中,兩者看起來相同。將它們炸毀以填滿投影機螢幕,並且只有一個保持清晰。嘗試將它們上傳到社交個人資料,並且只接受另一個。如果您只有 PNG,則承諾 " 的工具;將 PNG 轉換為 SVG"交回技術上是 SVG 但不是您的設計師會製作的文件的東西。
本指南解釋了兩種格式之間的差異,包括每個檔案儲存的內容、何時使用哪些內容、將 SVG 渲染到像素時會發生什麼,以及將 PNG 追蹤到向量形狀可以恢復和無法恢復的內容。它包括來自 Toolz 轉換器後面的追蹤引擎的實數,位於 Toolz 轉換器下方 圖像工具集線器.
TL;DR: SVG 是一種向量格式:它將形狀儲存為幾何形狀,因此可以縮放到任何尺寸而不會模糊,非常適合徽標、圖標和圖表。 PNG 是一種光柵格式:它無損地儲存固定的像素網格,適合螢幕截圖、詳細的藝術品以及任何只接受圖像的地方。從 SVG 到 PNG 的大小與您選擇的大小完全相同;使用 SVG 到 PNG 轉換器 以 2x 或 4x 進行銳利輸出。從 PNG 到 SVG 是追蹤,它從像素重建形狀,並且不會恢復原始設計。它適用於平面徽標和線條藝術,並且在照片上失敗。這裡的所有轉換都運行客戶端,沒有上傳,免費,沒有註冊。
SVG 和 PNG 有什麼不同?
SVG 將影像描述為繪製它的說明,而 PNG 將完成的繪圖儲存為像素。關於這兩種格式的其他一切都源自於這種差異。
SVG 文件,由 W3C 定義 可擴展向量圖形 (SVG) 2,是XML文字。它列出了路徑、圓形、矩形、梯度和文本,每個都帶有座標和顏色。其中沒有任何內容說明圖像有多少像素。當瀏覽器顯示它時,渲染器會計算出每個形狀覆蓋螢幕尺寸上的哪些像素,這就是為什麼手機和 5K 顯示器上的相同檔案很清晰。
PNG 文件,由 W3C 指定為 便攜式網路圖形 並以 ISO/IEC 15948 發布,是一個用 DEFLATE 壓縮的彩色像素網格。壓縮是無損的,因此您解碼的像素正是已儲存的像素。 PNG 可以承載完整的 alpha 通道,每個通道最多 16 位元。它不能做的是添加細節:以 2048 x 2048 顯示的 512 x 512 PNG 的每個像素都拉伸到 4 x 4 塊上,並且邊緣變軟或變塊。
這是與 SVG 來源相同的簡單徽章:
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="80" viewBox="0 0 240 80">
<rect x="4" y="4" width="232" height="72" rx="16" fill="#1d4ed8"/>
<text x="120" y="52" font-family="Arial, sans-serif" font-size="32"
text-anchor="middle" fill="#ffffff">TOOLZ</text>
</svg>
這四行標記是整個圖像,無論您以 240 像素寬還是 24,000 像素寬顯示,它們都保持四行。相同徽章的 PNG 版本在 240 x 80 時可容納 19,200 像素,在 960 x 320 時可容納 307,200 像素。
SVG 與 PNG:我應該使用哪種格式?
對於任何由必須縮放的形狀組成的東西,請使用 SVG;對於任何由像素或僅接受光柵影像的頭部組成的東西,請使用 PNG。此表將它們並排放置:
| 財產 | SVG | 巴布亞紐幾內亞 |
|---|---|---|
| 圖像模型 | 向量:路徑、形狀、文字 | 光柵:固定像素網格 |
| 標準 | W3C SVG 2 | W3C 巴布亞紐幾內亞,ISO/IEC 15948 |
| 縮放 | 鋒利,任何尺寸 | 擴大時模糊或阻塞 |
| 壓縮 | 文字; gzip 在伺服器上 | 無損放氣 |
| 透明度 | 是的 | 是的,完整的阿爾法 |
| 標誌的文件大小 | 通常有幾個KB | 隨著像素尺寸的增加而增長 |
| 照片的文件大小 | 不切實際 | 大但合理 |
| 導出後可編輯 | 是的,向量編輯器中的形狀和顏色 | 僅逐個像素 |
| 裡面有文字 | 可以保持可選擇性和可搜尋性 | 烘烤成像素 |
| 可以包含腳本 | 是的,這是一個安全問題 | 不 |
| 被社交上傳、辦公室應用程式、電子郵件接受 | 經常不是 | 幾乎總是 |
| 最好 | 標誌、圖示、圖表、圖表、UI 插圖 | 螢幕截圖、詳細藝術、固定規模的資產 |
實用規則:保留 SVG 作為任何向量的主控,並從中匯出每個目的地所需大小的 PNG。切勿僅保留徽標的 PNG,因為將像素變回形狀是有損的,而將形狀變回像素則不然。
對於照片來說,這兩種格式都不是正確的交付選擇。 PNG 中的照片很大,SVG 中的照片要么是 XML 包裹的 PNG,要么是追蹤的近似值。 JPEG、WebP 或 AVIF 是為此工作而建構的; webp 是什麼以及何時使用它 覆蓋照片面。
為什麼這麼多地方拒絕SVG上傳?
因為 SVG 是一個可以包含活動內容的文件,而不僅僅是圖像。 SVG 規範允許 <script> 元素、事件處理程序屬性等 onload連結到外部資源和嵌入式 HTML <foreignObject>. 接受 SVG 上傳並隨後從自己的網域提供服務的網站最終可能會運行其他人'為每個直接開啟檔案的訪客提供 JavaScript。
安全地消毒 SVG 是可能的,但很繁瑣,因此許多平台都採取更簡單的路線:個人資料圖片、市場清單、廣告網路、許多 CMS 媒體庫和大多數電子郵件用戶端僅接受光柵格式。 Office 文件和聊天應用程式也具有更簡潔的支援。
這是將 SVG 轉換為 PNG 的最常見原因。將 SVG 繪製為圖像的瀏覽器是安全的情況,因為 SVG 是透過 載入的 <img> 元素或畫布上不允許運行腳本或獲取外部檔案。 Toolz 轉換器以這種方式渲染 SVG,這使得從未知來源轉換檔案變得安全。
如何在不損失品質的情況下將 SVG 轉換為 PNG?
以您需要或更大的像素大小渲染 SVG,之後切勿放大 PNG。由於 SVG 是幾何形狀,因此以 4x 繪製它與以 1x 繪製一樣精確;這個方向上的所有品質損失都來自於選擇太小的輸出。
的 SVG 到 PNG 轉換器 按此順序計算尺寸:
- 如果 SVG 根設定
width和height,這些與諸如此類的單位一起使用mm,pt,in和cm轉換為 CSS 像素。 - 如果它只有一個
viewBox,使用視圖框寬度和高度。 - 如果兩者都沒有,則繪製在 1024 x 1024 處。
- 如果最長邊仍然低於 512 像素,則繪圖按比例放大,直到該邊為 512,因為以其聲明的大小繪製的 24 x 24 圖標太小而無法使用。
- 然後,SVG 縮放選項將結果乘以 1、2 或 4。
拿上面的徽章,上面寫著 width="240" height="80". 最長邊在 512 下,因此放大到 512 x 171。在 2x 時,PNG 的出角為 1024x342,未上漆的角落保持透明。結果下方的註釋說明了尺寸及其來源,因此無法猜測。
選擇 2x 用於螢幕,大多數手機和筆記型電腦每個 CSS 像素使用兩個或多個裝置像素,選擇 4x 用於列印或大型顯示器。輸出上限為 10000 萬像素或一側 16,384 像素,超過 50 MB 的 SVG 檔案被拒絕;較小規模的修復第一個案例。
有兩種內容無法在渲染中倖存下來。透過 URL 連結的影像和 Web 字體被省略,因為作為影像繪製的 SVG 無法取得檔案之外的任何內容,因此文字會回退到系統字體;在匯出之前將文字轉換為向量編輯器中的輪廓可以避免這種情況。動畫 SVG 變成單一靜態幀。
我應該將 SVG 轉換為 PNG、JPG 或 PDF 嗎?
預設情況下,當目的地拒絕 PNG 或需要較小的文件來列印類似照片的圖形時,轉換為 PNG,僅當您需要列印文件或發送電子郵件時,轉換為 PDF。
| 目標 | 透明度 | 尺寸 | 你失去了什麼 | 用於 |
|---|---|---|---|---|
| 巴布亞紐幾內亞 | 保留 | 中等 | 可擴展性 | 上傳、投影片、應用程式資產以及任何具有透明背景的內容 |
| JPG | 填滿白色 | 對於複雜的藝術來說最小 | 可擴展性、透明度、一定的邊緣清晰度 | 僅包含 JPG、電子郵件附件的表格 |
| PDF(光柵化) | 透明區域顯示白色頁面 | 更大 | 可擴展性、可選擇的文字、可點擊的連結 | 校樣表,列印圖表,將藝術品發送給非設計師 |
的 SVG 到 JPG 轉換器 用白色填充透明區域,因為 JPEG 沒有 alpha 通道,並套用品質滑桿。平面顏色上的清晰邊緣正是 JPEG 壓縮留下微弱鈴聲的地方,因此徽標通常看起來比 PNG 更好。
的 SVG 到 PDF 轉換器 值得明確的警告。它光柵化:每個 SVG 都被繪製到像素,儲存為 PNG,並放置在頁面上。 PDF 不包含向量形狀,無法選擇文本,並且縮放得足夠遠,顯示像素。比例選項仍然有幫助,因為頁面大小保持固定,而 2x 和 4x 將更多像素打包到其中(每英寸 72、144 或 288 像素,適合圖像)。如果印刷店要求向量 PDF,則 ISO 32000 PDF 可以攜帶真實的向量路徑,但您需要一個向量編輯器'為此匯出,而不是圖像轉換器。
將 PNG 轉換為 SVG 可以做什麼?
將 PNG 轉換為 SVG 會追蹤影像:它將像素分組到顏色相似的區域,並擬合每個區域周圍的輪廓,產生填充的向量路徑。它找不到原始向量文件,因為 PNG 不包含產生它的形狀的記錄。輸出中的每條邊都是從像素中得出的估計值。
後面的追蹤者 PNG 到 SVG 和 JPG 到 SVG toolz 上有 imagetracerjs,在後台 Web Worker 中運行,因此頁面保持回應狀態。它分兩個步驟工作:
- 色彩還原。 圖像被縮減為一個小調色板,您在顏色下選擇的數字:2、8 或 16。
- 邊緣貼合。 對於每個顏色層,示踪劑沿著每個連接區域的邊界行走,並將其擬合直線和曲線,每個區域產生一條填充路徑。
每條路徑還獲得自己顏色的 1 像素輪廓。如果沒有它,相鄰的形狀會在邊緣不完全相交的地方留下髮際線間隙,背景會顯示為細白色接縫。
詳細控制這些輪廓與像素的緊密程度:
| 細節 | 線與曲線的公差 | 斑點落在下面 | 預模糊 | 結果 |
|---|---|---|---|---|
| 低 | 2 像素 | 16分 | 輕微 | 更流暢、更簡單、更小的文件 |
| 中(預設) | 1 像素 | 8分 | 沒有 | 平衡 |
| 高 | 0.5 像素 | 2分 | 沒有 | 緊緊跟隨像素,保持微小的形狀,更重 |
追蹤的 SVG 是用它寫的 width 和 height 設定為原始影像大小和 viewBox 在追蹤的像素中,因此它會以您期望的大小打開,並在放置的任何地方乾淨地縮放。
什麼可以追蹤好,哪裡可以追蹤失敗?
追蹤在一開始類似向量的影像上效果很好:平面顏色、硬邊、很少顏色。它對於任何具有連續色調的東西都會失敗,因為照片沒有邊緣可找到,只有梯度。
| 來源 | 它是如何追蹤的 | 建議的設定 |
|---|---|---|
| 扁平標誌,2 至 6 種顏色 | 形狀乾淨,文件小 | 8 種顏色,中 |
| 黑白線條藝術、簽名、郵票 | 非常乾淨 | 2 種顏色,中色或高色 |
| 具有梯度的圖示 | 梯度變成帶 | 16 種顏色,中等,然後在編輯器中簡化 |
| 紙上掃描繪圖 | 紙張紋理變成斑點 | 2 種顏色,低 |
| JPG 標誌帶有壓縮偽影 | 邊緣有斑點,背景被描繪成形狀 | 細節少;然後刪除背景形狀 |
| 附文字的螢幕截圖 | 字母變成斑點輪廓 | 保留為 PNG |
| 照片 | 有斑點的海報形狀,巨大的文件 | 不要追蹤 |
照片行不是品味問題。在測試 Toolz 引擎時,一張以 16 種顏色追蹤的 2000 px 雜訊照片需要 28 秒,並產生 46 MB SVG,比它來自的圖像重很多倍,但仍然明顯更差。噪音為追蹤器提供了數千個微小區域,每個區域都成為自己的路徑,並具有自己的座標。
該測試就是為什麼轉換器在追蹤之前將任何一側長度超過 1200 像素的影像縮放到 1200 像素。然後追蹤在幾秒鐘而不是幾分鐘內完成,並且由於輸出保留了原始寬度和高度,因此 SVG 的放置方式不會改變。兩分鐘後仍然運行的痕跡會停止,並顯示一條訊息,表示顏色更少或細節更少,而不是讓選項卡無限期地忙碌。
JPG 來源增加了兩個特定問題。 JPEG 壓縮會在鋒利的邊緣周圍留下微弱的塊,示踪劑可能會將其變成雜散的形狀;低細節會稍微模糊並掉落斑點來抵消它。 JPG 沒有透明度,因此標誌周圍的白色框會變成藝術品後面的一個填充形狀。在向量編輯器中,選擇該形狀並刪除它。
如何從 PNG 標誌中獲得乾淨的 SVG?
從保留設計的最簡單設定開始,查看預覽,僅在缺少某些內容時添加顏色或細節。較重的設定很少修復不良痕跡;他們為其添加了更多路徑。
可靠的順序:
- 使用您擁有的最大、最乾淨的來源。 PNG 匯出會擊敗螢幕截圖,螢幕截圖會擊敗列印輸出的照片。
- 計算徽標中的顏色並選擇最接近的選項。雙色標記需要 2,五色標記需要 8。
- 在媒體處追蹤。檢查預覽和結果下顯示的檔案大小。
- 如果有斑點或粗糙邊緣,請在低處回溯。如果薄細節消失,請在高處回溯。
- 在向量編輯器中開啟最後一步的結果:如果存在背景形狀,則刪除背景形狀,合併應該為背景形狀的形狀,並用正確字體的真實文字替換任何追蹤的文字。
當追蹤後顯示的檔案大小大於 PNG 時,請將其視為訊號。對於徽標,通常表示正在追蹤雜訊;對於其他任何內容,通常表示影像應保持光柵狀態。
如果痕跡是針對切割機、雷射雕刻機或刺繡軟體,那麼即使對於彩色設計,2 種顏色通常也是正確的答案,因為這些機器是根據輪廓而不是填充來工作的。
我可以在一個地方轉換這些格式嗎?
是的。將軍 影像轉換器 接受 SVG 以及 JPG、JFIF、PNG、WebP、AVIF、GIF、BMP、ICO、HEIC、TIFF、PSD、CR2、DNG 和 PDF,並寫入 JPG、PNG、WebP、GIF、ICO、PDF 或 SVG。選擇 SVG 作為目標可以追蹤具有相同顏色和詳細設定的任何光柵來源;為 SVG 來源選擇光柵目標會顯示 SVG 縮放選項。
專用對頁面僅接受自己的來源格式,這使得螢幕上的選項保持相關性:SVG 頁面顯示比例,追蹤頁面顯示顏色和詳細資訊。
不提供一種組合:PDF 到 SVG。轉換器會用訊息拒絕它,它建議的路由是兩個步驟:首先將 PDF 頁面轉換為 PNG,然後追蹤 PNG。如果 PDF 來自向量程序,則從該程序匯出 SVG 會保留真實路徑,並且是更好的選擇。
SVG 也可以成為收藏夾。將其渲染到 ICO 會產生每個圖示大小的方形 PNG 影像,最小 512 px 意味著小圖示 SVG 仍然提供乾淨的 256 px 條目。 Favicon 大小以及 ICO 檔案中的內容 涵蓋要包含的尺寸。
SVG 和 PNG 轉換是私有的嗎?
是的。渲染、編碼和追蹤都發生在客戶端,在瀏覽器標籤內,因此不會上傳任何檔案。 SVG 解碼步驟和追蹤器僅在檔案需要時下載,這會在您僅在光柵格式之間進行轉換時保持頁面亮起。
限制集中在一個地方:SVG 檔案最大 50 MB,渲染輸出最大 100 兆像素,每面 16,384 像素,光柵來源最大 100 兆像素,最長一面追蹤速度高達 1200 像素,每條上限為兩分鐘追蹤。這些工具是免費的,無需註冊,每天都有轉換限制。
