[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>
<img src=”merryman.svg” width=”100″ /><hr>
<img src=”merryman.svg” width=”300″ /><hr>
<img src=”merryman.svg” width=”800″ /><hr>
</body>
</html>
好處就是我把它放大~~在放大……….都完全不會有顆粒.
附記:小工具與範例網站
svg editor:線上繪製 SVG 工具(可輸出SVG檔)
D3.js:SVG 視覺範例網站(超神奇!!!)