在開發 iOS App 時我們必定會使用到許多 icon 來美化產品介面,並且為了因應各個螢幕尺寸的需求放 @1x, @2x, @3x 的圖檔,

但是其實 Xcode 可以自動幫我們完成這件事,我們需要的只是將一張 PDF 格式的圖檔丟進專案裡的 Assets.xcassets 中。

 

點陣圖 VS 向量圖

我們熟悉的 PNG 與 JPEG 的圖檔格式為「點陣圖」,圖片是由一個一個微小的像素 (pixel) 組成,

所以當我們把圖片放大(請想像一個 pinch 的手勢)到一定程度時,就可以看到一點一點的顆粒,

像素組成的圖片能夠更細節的反應顏色的差異,較能呈現圖片的原貌,故被相機廣泛使用,

不過也因此擁有檔案更大以及畫面模糊的缺點。

由 英文維基百科的Valepert. Translated into Simplified Chinese and uploaded by Patricka at zh.wikipedia – File:Rgb-raster-image.png, 公有領域, https://commons.wikimedia.org/w/index.php?curid=8804932

而 PDF 為向量圖格式,是以數學運算產生的圖片,在放大縮小時圖片使用數學運算重新繪製圖形,所以不論將 PDF 放大幾倍都不會失真

並且向量圖格式檔案體積更小,非常適合 app 中大量簡單線條的 icon 來使用。

由 User Agateller on en.wikipedia, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=541040
向量圖形的顯示效果範例:(a)原始向量圖;(b)向量圖放大8倍;(c)點陣圖放大8倍。點陣圖的放大品質較差,但是向量圖可以不降低品質地無限放大。