[SVG] 簡介

這幾年來因為製作網頁時需要兼顧到在各載具都能很適當的呈現內容，除了大家常聽到的 RWD(響應式網頁設計)外，圖片也都是一個時常需要處理到的議題，我們可以使用 css 的 media query 或 html 的 picture 標籤在各個解析度範圍內設定要顯示的圖片外，另外像 icon 或 logo 這種相對比較單純的圖形，則可以使用向量圖讓圖片不管如何縮放都不會失真，加上又只需要準備一個檔案，相對起來輕鬆又愉快。

以下為制服地圖網站的 logo 圖片，即以 svg 格式儲存。


現在許多網站也都把 logo 改成 svg 的圖片，筆者本人有在講授前端相關的課程，學生們結訓後也不少跟我反應他們工作後也都會把公司的 logo 改成 svg 的格式，而要製作 svg 也很簡單，只要會使用 illustrator 繪圖，在存檔的時候將格式設定為 .svg，就可以 svg 以 img 標籤嵌入網頁，或直接將原始碼嵌入網頁可進一步設定及操作。