什么是SVG?
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
SVG 的优势
与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- 推荐通过引用 SVG 的命名空间,就能够把 SVG 元素之间添加到 HTML 代码中,
<html xmlns:svg="http://www.w3.org/2000/svg"> <body> <p>This is an HTML paragraph</p> <svg:svg width="300" height="100" version="1.1" > <svg:circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg:svg> </body> </html>
- <rect>标签:用来创建矩形,以及矩形的变种。
<h2>矩形</h2> <svg> <rect x="0" y="0" width="50px" height="50px" style="fill: green;stroke: black;stroke-width:5px;opacity: 0.5" /> </svg>
代码解释:
- rect 元素的 width 和 height 属性可定义矩形的高度和宽度
- style 属性用来定义 CSS 属性
- CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
- CSS 的 stroke-width 属性定义矩形边框的宽度
- CSS 的 stroke 属性定义矩形边框的颜色
- <circle> 标签:可用来创建一个圆。
<h2>画圆</h2> <svg> <circle cx="60" cy="60" r="50" fill="green" stroke="black" stroke-width="2px" /> </svg>
<h2>圆角矩形</h2> <svg> <rect x="10" y="10" rx="30" ry="10" width="100px" height="50px" style="fill: green;stroke: black;stroke-width:2px;opacity: 1" /> </svg>
代码解释:cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy,圆的中心会被设置为 (0, 0)
r 属性定义圆的半径。rx 和 ry 属性可使矩形产生圆角。CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1),stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1)。
-
<ellipse> 标签:可用来创建椭圆。
<h2>椭圆</h2> <svg> <ellipse cx="105" cy="60" rx="100" ry="50" fill="green" stroke="black" stroke-width="2px "/> </svg>
代码解释:
- cx 属性定义圆点的 x 坐标
- cy 属性定义圆点的 y 坐标
- rx 属性定义水平半径
- ry 属性定义垂直半径
-
<line> 标签:用来创建线条。
<h2>画线:</h2> <svg id="s1"> <line x1="0" y1="0" x2="50" y2="50" style="stroke: red;stroke-width: 2px" /> </svg>
代码解释:
- x1 属性在 x 轴定义线条的开始
- y1 属性在 y 轴定义线条的开始
- x2 属性在 x 轴定义线条的结束
- y2 属性在 y 轴定义线条的结束
-
<polygon> 标签:用来创建含有不少于三个边的图形。
<h2>多边形</h2> <svg> <polygon points="100,20 150,100 50,50" fill="green" stroke="black" stroke-width="2px " /> </svg>
代码解释:
points 属性定义多边形每个角的 x 和 y 坐标
-
<polyline> 标签:用来创建仅包含直线的形状。
<h2>折线</h2> <svg> <polyline points="0,0 20,20 40,0 60,20 80,0" style="fill:green;stroke:red;stroke-width:2"/> </svg>
这里注意如果想得到细线条的效果,填充颜色fill应该与背景色一致。 -
SVG 滤镜用来向形状和文本添加特殊的效果。这里举一个例子:
<h2>滤镜 高斯模糊</h2> <svg> <defs> <filter id="Gaussian_Blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="2" /> </filter> </defs> <ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000; stroke-width:2;filter:url(#Gaussian_Blur)"/> </svg>
<filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜?
<filter> 标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写,它允许对诸如滤镜等特殊元素进行定义。
-
最后是canvas与svg的区别: SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序(比如谷歌地图)
- 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
- 不适合游戏应用