SVG 簡介

好久沒寫文章了，這段時間工作還是經常的會翻這Blog的資料，裡面很多很多的技術雖然很基礎，但是就是很實用。

所以呢！現在要挑戰”基礎”SVG！

無限期支持向量技術

我早期多以Illustrator進行平面設計，所以在轉網頁設計這行業也是多以Illustrator，雖說許多同行的都建議用Photoshop，但我不這麼認為，且更堅定的要繼續以向量設計為主(但不會只有用Illustrator…)。

SVG簡介

SVG(Scalable Vector Graphics)，中文直譯就是”可縮放向量圖形
“，它是以XML格式儲存。而在瀏覽器上是從IE9後才開始支援SVG。

SVG優點

向量物件(Vector)，不同於點陣，向量並不會有解析度的問題，可自由的縮放。
嵌入式外部影像，包括PNG、JPEG、SVG等。
可有文字物件(可以被搜尋)。
開發人員可利用DOM抓取SVG物件。

SVG 範例(直接繪製)

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="120">
	<rect width="100" height="100" style="stroke: #777; stroke-width: 3; fill: #07B492;"/>
</svg>

在svg標簽內就可以直接開始繪製向量圖型，而其中xmlns="http://www.w3.org/2000/svg"在微軟MSDN的解釋為定義SVG區段的命名空間，目前我測試移除也沒什麼差別。

SVG 外部圖形

圖片來源 http://seeklogo.com/tag.html?q=Google

外部PNG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="180">
	<image width="447" height="179" xlink:href="/images/google-logo.png"/>
</svg>

外部SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="180">
	<image width="447" height="179" xlink:href="/images/google-logo.svg"/>
</svg>

雖然SVG是向量的圖形，如果和Canvas做比較還有許多不同的特點，像是Html dom、外部點陣圖、不需要js也能繪製。

而這兩個技術的差別，網路上也有許多文章有提到，但我希望在日後再比較兩者的差異。

對SVG還不到相當了解可以寫非常長的文章，但我不認為要寫夠分量才值得算一篇文章，學習過程中過度的要求，會影響到學習技術的熱誠以及效率，所以很快就會有下一篇了(應該)。