最近在解析douban.fm网页时,发现一些图标绘制时用SVG,于是借机脑补下. SVG是HTML5中绘制矢量图的技术.SVG利用XML技术,非常容易理解,来个DEMO:


    

PS: 画个圆,是不是很容易,比直接采用jpg、png等图片方便多了,而且还不会糊.

引入方式

方式 示例
embed embed src=”circle1.svg” type=”image/svg+xml”
object object data=”circle1.svg” type=”image/svg+xml”
iframe iframe src=”circle1.svg”
嵌入HTML 此处省略
a a href=”circle1.svg”

形状绘制

形状 元素 属性
矩形 rect (x,y) - 起点, width - 宽, height - 高, rx - 圆角x半径, ry - 圆角y半径
circle r - 半径,(cx,cy) - 圆心
椭圆 ellipse rx - 半长轴,ry - 半短轴,(cx,cy) - 圆心
直线 line (x1, y1) - 起点,(x2,y2) - 终点
多边形 polygon points - 坐标集合,如points=”200,10 250,190 160,210”
折线 polyline points - 坐标集合,如points=”20,20 40,25 60,40 80,120 120,140 200,180”
路径 path M - 起点, L - 下一点, …(大写表示绝对定位,小写表示相对定位)

其他

名称|元素 |:– 文本|text