与其他图像格式相比（比如 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>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><line> 标签：用来创建线条。
<h2>画线：</h2> <svg id="s1"> <line x1="0" y1="0" x2="50" y2="50" style="stroke: red;stroke-width: 2px" /> </svg><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 的缩写，它允许对诸如滤镜等特殊元素进行定义。
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
下表列出了 canvas 与 SVG 之间的一些不同之处。
