标签 - ui
那些你可以用 SVG 做出令人驚艷的東西；它跟其他圖形的不同之處；還有為何輸出檔案要有更多考量。
How Designers Should Think About SVG
The stunning things you’ll create with SVG, how it differs from other graphics, and why exporting requires new considerations.
本文原作者 Peter Nowell 是居住在舊金山的設計師，客戶包含蘋果公司和 Flinto 等，目前已經開設許多品質優良的線上課程。
為了準備我計劃推出的 Sketch 和 SVG 工作流程課程，我跟很多剛入行和資深的設計師討論使用此格式的方法。我注意到一個對於 SVG 的共通誤解：
我們常常覺得 SVG 就像點陣圖片一樣，例如 PNG，但是可以有無限大的解析度。只不過，它真的不是這樣。
我的看法是：SVG 有些東西比較艱澀。輸出 (exporting)，或是更精確的說法，從 Sketch* 到最終圖片的流程，會只需幾秒鐘，但也可能是 10 分鐘，這得視設計和圖片使用方法而定。如果要讓 SVG 完美符合需求，你可能要以某些方法修改 Sketch 圖層 (layers)，或是調整輸出的語法。這看起來很複雜又枯燥乏味，但是並不困難，而且就此進入 SVG 全新可能性的世界。
因為，儘管有這些不同之處，SVG 的優異品質簡直滿出來了。我們會先介紹這幾點（因為很有趣），然後說明如何開始用務實的觀點看待 SVG。
*註：我的設計工具選擇用 Sketch，但是這篇文章裡的概念同樣可以用在 Adobe Illustrator 等大多數其他工具。
簡略的技術定義：
SVG 是可縮放向量圖形 (Scalable Vector Graphics) 的縮寫。它是一種圖形格式，就像 JPEG 或 PDF，它們的特色就是不被限制於某種解析度。這是因為 SVG 以向量圖形組成，而不是像素。雖然它們可以用在許多不同地方，但用在網站就是如魚得水。接下來的範例會展現它們的潛力。
為什麼 SVG 如此好棒棒？
之前已經有很多人仔細讚美過 SVG 了（如果你是網站開發者，請看 Chris Coyier 的閒談 SVG Is for Everybody，是技術成分比較多的介紹。）在這篇文章裡，我特別介紹設