網頁使用SVG向量格式，放大縮小不模糊

以往網頁設計常見使用jpg、png、gif等圖片檔，但因為皆屬點陣圖模式，由於RWD(自適應網頁設計)可以隨著螢幕作放大縮小，所以若切成一般圖片格式易造成模糊失真的問題，而SVG會是不錯的解決方法。

SVG（Scalable Vector Graphics）是一種可縮放式向量圖形，是W3C所制定的開放性網路標準之一，此圖片格式能讓網頁設計師在網頁中以向量格式呈現圖片。可以在illusrator中畫好向量圖形，另存成SVG檔，運用方式就跟一般用jpg、png、gif等圖片檔一樣，但不同的是並不會因尺寸的改變而失真，日後欲修改時也可直接開啟檔案修改，相當方便，在網頁設計領域中，SVG的使用已越來越普及。

step.1：開啟製作的AI檔

step.2：另存新檔->SVG檔

step.3：保持預設選項不變，按「確定」

SVG檔在原始碼的寫法如下：

1.跟一般圖片寫法img一樣

<img src="001.svg" />

2.直接用svg元素寫法

<svg width="800" height="800" version="1.1" xmlns=" http://www.w3.org/2000/svg " xlink:href="001.svg" ></svg>

width、height:定義svg的寬高

version:指出此文件遵循的svg語言版本 

xmlns:為SVG命名空間

xlink:指出SVG檔案路徑

另外，可直接用SVG標籤繪製圖形，以下介紹三個基本屬性。

圓形：circle

可設定圓心的座標(cx,cy)  r:半徑

fill:填滿色 stroke:線條顏色 線條寬度: stroke-width

ex:

<svg><circle cx="50" cy="50" r="40" fill="yellow" stroke="black" stroke-width="5"/></svg>

線條：line

從(x1,y1)到(x2,y2)的線條

ex:

<svg><line x1="20" y1="20" x2="50" y2="50"/></svg>

矩形：rect 以(x,y)作為左上角的座標繪製

<svg><rect x="20" y="25" width="40" height="40"/></svg>

SVG除了可以先繪製圖形再置入，亦可直接寫原始碼繪製圖形，是網頁設計師可善加利用的工具！