好久沒寫文章了,這段時間工作還是經常的會翻這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還不到相當了解可以寫非常長的文章,但我不認為要寫夠分量才值得算一篇文章,學習過程中過度的要求,會影響到學習技術的熱誠以及效率,所以很快就會有下一篇了(應該)。