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

/ 分類: , / 0 則回應

標籤:

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

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

svg_s6

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

svg_s1

另存新檔記得選SVG 1.1

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

svg_s3

接下來只要嵌入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_s4


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


 

作者:awei
一個從純樸鄉下 輾轉搬到現在繁華的都市 住在四周都是百貨公司與商店林立的便利世界裡 我只是想拍拍照 記錄一下這個我居住的星球 力量雖然渺小 但是我有我想做的一些事 貓咪慵懶的動作 花草的靜態之美 建築的偉大背景 等等.... If I like a moment, for me, personally, I don't like to have the distraction of the camera. I just want to stay in it.

您或許有興趣的文章:

發表留言