[awei研究室]SVG網頁向量圖形應用

SVG是“Scalable Vector Graphics”的縮寫。也就是可縮放的向量圖形”。
這個概念對於設計師來講一點不陌生，而什麼是SVG檔呢?簡單的來說就是向量檔，而該格式是由W3C所制定的開放性的網路標準之一，但是你打開SVG檔會發現它並不是一個圖像檔，而是用XML的方式來標記圖像

向量檔的好處是無論怎麼縮放，都不用怕影像會失真

怎麼產生SVG檔呢?其實方法很簡單，只要需利用Illustrator繪製好向量檔，就可另存成SVG檔

另存新檔記得選SVG 1.1

如果你用記事本打開SVG檔,你就會發現一大堆密密麻麻的程式碼…這些就是XML定位點

接下來只要嵌入html就可以了~~~

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>無標題文件</title>
</head>

</body>
</html>

好處就是我把它放大~~在放大……….都完全不會有顆粒.

範例

附記:小工具與範例網站
svg editor：線上繪製 SVG 工具(可輸出SVG檔)
D3.js：SVG 視覺範例網站(超神奇!!!)

Related Post

[awei研究室]Css & jquery FLIPSIDE翻頁按鈕特效

[網頁版型]CSS 捲軸固定背景版型

[OpenCart購物網站]好用的opencart extension整理

發佈留言 取消回覆

發佈留言取消回覆