先說結論
開啟 SVG 轉圖片,把檔案丟進去,說個尺寸。要是沒人告訴你該多大,最長邊 1024 畫素是個不錯的預設值:幾乎什麼場合都夠用,又還發得動郵件。格式留 PNG,背景留透明,把檔案拿走。
下面講的是這個預設值不夠用的情況:人家已經給了你確切數字、這張圖要拿去印,或者轉出來看起來不對勁。
尺寸為什麼是你的事,不是檔案的事
JPEG 是一格一格量出來的畫素,問它多大,是有答案的。SVG 壓根不是一張圖,它是一串指令,在這裡畫個圓、把這條路徑塗成那個顏色,而指令沒有尺寸。瀏覽器可以按 16 畫素執行,也可以按 4000 畫素執行,兩邊一樣銳利,因為它根本沒在縮放,它是在重畫。
所以轉換這件事替你定不了這個數字,也所以你把數字定大一點不用付任何代價。在圖片這攤活裡,只有這一件事上「做大點」是白送的。
多數 SVG 檔案確實帶著 width 和 height,工具也會顯示出來,但那是個預設值,不是上限。一個寫著 width="24" 的圖示,只說明畫它的人當時想的是一條 24 畫素高的工具欄。
那個數字到底從哪裡來
給網頁用。拿這張圖在頁面上佔的 CSS 畫素尺寸,乘以你在意的那些螢幕的畫素密度。一個佔 200 畫素寬位置的 logo,Retina 筆記本上要 400 畫素的檔案,近幾年的手機上要 600。@2x 和 @3x 說的就是這麼點事,也正因如此,能替你把這三份一起寫出來的工具,省了你算三遍。
給應用圖示、商店素材或者網站圖示用。數字是公開寫好的,沒什麼可算:商店頁面上說多少就是多少。網站圖示乾脆別做光柵化,去做一個 .ico,一個檔案裡裝好幾個尺寸,因為瀏覽器分頁、書籤和 Windows 快捷方式要的根本不是同一個。
給印刷用。拿實際尺寸的英寸數乘以印表機的解析度。名片上寬兩英寸、300 DPI 的 logo,就是 600 畫素;同一個 logo 橫鋪整張 A4,也就是 8.3 英寸,大約 2500。印刷廠張口就要 300 DPI;而隔著半個房間看的大幅面橫幅,150 就綽綽有餘。
給社交預覽圖或者 OG 圖用。平臺給的是一個框,多數連結預覽是 1200 × 630,而這個框跟你的 logo 比例不一樣。「墊起來」那個選項就是做這個的:圖形按自己的比例居中放,剩下的地方用背景色填上,而不是拉伸成一個所有人一眼就看出你沒檢查過的 logo。
兩種情況同時成立,就取大的那個。PNG 比需要的大一點,無非是下載稍微大一點;小了就補不回來了,為什麼,下一節說。
這條路沒有回頭
光柵化是單向的。圖紙一旦變成 PNG,它就跟別的圖片一樣是畫素了,之後再放大,只能編造當初根本沒量過的細節,出來還是放大照片那種發糊發塗的樣子。
所以,把 SVG 留著。它是母版,而且幾乎總是更小的那個檔案,將來任何尺寸都能從它身上完美地匯出來。PNG 只是為某一個具體用途做的一次匯出,需要另一個尺寸時,正確做法是再匯出一次,而不是把匯出來的那張拿去縮放。
有軟體聲稱能把 PNG 轉回 SVG。它乾的事叫描摹,也就是猜哪些曲線能解釋這一格格畫素。用在兩色平塗的圖形上還過得去,用在別的東西上就是又貴又沒用,而且它永遠拿不回原圖紙裡有過的東西。
變成畫素那一刻,有三件事會變
一張光柵化之後看起來不對勁的 SVG,幾乎總是栽在這三件事之一,而三件都值得在匯出之前知道,別等轉完。
文字用的是這臺機器上有的字型。帶文字的 SVG 裡並沒有字型,它只是點了個名,剩下交給渲染器自己去找。字型沒裝,就換一個頂上,而頂替的那個字形不同、字寬也不同,於是文字可能重排或者擠出邊界。那種從網址拉字型的檔案更慘:經由 <img> 光柵化的 SVG 壓根不許去取任何東西,所以什麼都到不了。
解決辦法每個設計師都知道:匯出 SVG 之前把文字轉成輪廓(Illustrator 叫建立輪廓,Figma 叫拼合,Inkscape 叫物件轉路徑)。字母變成幾何圖形,字型從此不再要緊,圖到哪裡都長一個樣。記得在副本上做,轉成輪廓之後,那些字就不能再當文字編輯了。
髮絲般的細線會發灰或者乾脆消失。在你選的尺寸下算出來不到一個畫素寬的描邊,沒法畫成一條實線,只能畫成一條淡的。所以一個精緻的 logo 按 64 畫素光柵化出來發白,同一個檔案按 512 卻完美。要是小尺寸是硬要求,答案是把圖畫簡單點、描邊加粗,而不是換個匯出設定,這也正是網站圖示該用符號而不是文字標的同一個道理。
動畫停住。一個帶動畫的 SVG 光柵化出來是一張靜止的圖,第一幀是什麼就是什麼。沒有哪個匯出設定能改變這一點。你要的是動起來,那就得做 GIF 或者影片,那是另一套做法。
透明,以及格式怎麼挑
沒有特別理由就用 PNG。它無損,保得住透明,而大片純色加硬邊,也就是圖紙主要由之構成的東西,在它裡面壓得很好。一個光柵化出來的 logo,存成 PNG 通常不但更乾淨,還比存成 JPEG 更小。
JPEG 根本沒有透明。每一個透明畫素都得變成某種顏色,而要是沒人替你挑,它就變成黑的,那種「logo 蹲在一個黑方塊上」的結果就是這麼來的,很多人還以為是 bug。它的有損方式恰好也在這類圖上最難看:每條硬邊周圍一圈麻點。除非有什麼東西非它不可,否則別用。
WebP 把 PNG 能做的都做了,檔案還更小,現在的瀏覽器也都讀。不用它的理由在瀏覽器之外:老軟體、一些印刷廠,還有相當多的上傳表單,至今打不開它。
另外,選了 PNG 還想墊個背景色,也是非常正常的需求。只有當這張圖最終落在一個你預測不了的顏色上時,透明才有用;你已經知道那是一張白頁,那壓平到白色上,能省掉一整類意外。
匯出來是空白,或者不對勁
除了空白什麼都沒有。多半是根元素上少了 xmlns。缺了它,在圖片標籤看來這就不是 SVG,於是什麼都畫不出來。最快的判斷辦法是拿瀏覽器直接開啟這個檔案:瀏覽器也是一片空白,那問題在檔案,不在轉換器。
圖縮在左上角一小塊。檔案有 width 和 height,卻沒有 viewBox,於是沒有座標系可縮放,圖形在一張更大的畫布上保持著自己原來的單位。好一點的轉換器會替你補一個 viewBox;你手上這個沒補的話,手動在根元素上加一句 viewBox="0 0 寬 高" 就好,SVG 是純文字,你改得動。
畫面缺了一塊。檔案裡有東西指向的是一個地址,而不是把圖形本身裝進來,比如一張以連結形式存著的照片、一份樣式表、一個字型。拒絕去取這些的光柵化器做得對,而且攔住它們的是同一條規則:你從別處下載來的 SVG,也別想回頭向做它的人彙報什麼。回繪圖軟體裡重新匯出一次,把圖片一併嵌進去。
它拒絕一個特別大的尺寸。瀏覽器給畫布定了上限,而且各家還不一致:每邊超過一萬六千畫素左右就什麼都拿不回來了,iPhone 和 iPad 上的 Safari 放棄得更早,大約在 4096 × 4096。會提前警告你的工具,是在替你擋下一個空白檔案,因為瀏覽器撐不住時給的正是空白,而不是一句報錯。
這些事一樣都不用上傳
光柵化 SVG 這件事,瀏覽器一天要做幾千次,網頁上畫一個圖示用的就是同一套東西。你的圖稿要變成 PNG,技術上根本沒理由跑一趟伺服器再回來,而這裡的工具也確實哪裡都不發:頁面的 Content-Security-Policy 把它可能聯的地址全列了出來,沒有一個是本站的。
這一點在 SVG 上比在別的格式上更要緊,因為 SVG 是文件,不是圖片。它裡面可以裝指令碼,也可以裝遠端地址,而一個代理公司發給你的 logo,畢竟不是你自己寫的檔案。經由圖片標籤繪製時,它處在規範所說的安全靜態模式:指令碼跑不了,那個地址也永遠聯不上。管住這一條的是瀏覽器,不是這個網站。
與其聽我們說,不如把頁面開啟,拔掉網線,照轉一張試試。把檔案傳給線上轉換器安全嗎?裡還有另外三個檢查,用在任何工具上都管用。