html5 SVG绘制以及和canvas的区别 – HTML5教程

上一章HTML5教程请查看：html5 canvas绘图
在本教程中，你将学习如何使用HTML5 svg元素在web页面上绘制矢量图形，以及和canvas之间的区别。
SVG是什么？可缩放向量图形(SVG)是一种基于xml的图像格式，用于为web定义基于二维向量的图形。与光栅图像(如.jpg、.gif、.png等)不同，矢量图像可以按比例放大或缩小到任何程度，而不会丢失图像质量。
SVG图像是使用遵循XML模式的一系列语句绘制的——这意味着可以使用任何文本编辑器(如记事本)创建和编辑SVG图像。与其他图像格式(如JPEG、GIF、PNG等)相比，使用SVG还有其他几个优点。

可以搜索、索引、编写脚本和压缩SVG图像。
可以使用JavaScript实时创建和修改SVG图像。
SVG图像可以以任何分辨率打印出高质量的图像。
SVG内容可以使用内置的动画元素进行动画处理。
SVG图像可以包含到其他文档的超链接。

提示：矢量图像由一组由数学定义的固定形状组成，而位图或光栅图像由一组称为像素的固定点组成。
将SVG嵌入到HTML页面中可以使用HTML5 < SVG > 元素将SVG图形直接嵌入到文档中。
让我们看一下下面的例子来理解它是如何工作的：
将SVG嵌入到HTML页面中可以使用HTML5 < SVG > 元素将SVG图形直接嵌入到文档中。
让我们看一下下面的例子来理解它是如何工作的：

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title>在HTML中嵌入SVG< /title> < /head> < body> < svg width="300" height="200"> < text x="10" y="20" style="font-size:14px; "> 你的浏览器支持SVG < /text> 对不起，你的浏览器不支持SVG < /svg> < /body> < /html>

注意：所有主要的现代web浏览器，如Chrome、Firefox、Safari和Opera，以及Internet Explorer 9和以上都支持内联SVG呈现。
使用SVG绘制路径和形状下一节将解释如何使用新引入的HTML5 < svg> 元素在web页面上绘制基于矢量的基本路径和形状。
画一条线可以用SVG绘制的最基本的路径是一条直线，下面的示例将向你展示如何使用SVG < line> 元素创建直线：

< svg width="300" height="200"> < line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3; " /> < /svg>

< line> 元素的属性x1、x2、y1和y2画了一条从(x1,y1)到(x2,y2)的线。
画一个矩形可以使用SVG < rect> 元素创建简单的矩形和正方形形状，下面的示例将向你展示如何使用SVG创建和样式化矩形：

< svg width="300" height="200"> < rect x="50" y="50" width="200" height="100" style="fill:orange; stroke:black; stroke-width:3; " /> < /svg>

< rect> 元素的属性x和y定义了矩形左上角的坐标，属性width和height指定形状的宽度和高度。
画一个圆你还可以使用SVG < circle> 元素创建圆形图形，下面的例子将向你展示如何使用SVG创建和样式一个圆形：

< svg width="300" height="200"> < circle cx="150" cy="100" r="70" style="fill:lime; stroke:black; stroke-width:3; " /> < /svg>

< circle> 元素的属性cx和cy定义了圆心的坐标，属性r指定了圆心的半径。但是，如果省略或未指定属性cx和cy，则将圆心设置为(0,0)。
用SVG绘制文本你还可以使用SVG在web页面上绘制文本。SVG中的文本呈现为图形，因此你可以对其应用所有的图形转换，但它仍然像文本一样—这意味着它可以被用户选择并作为文本复制。让我们尝试一个例子，看看这是如何工作的：

< svg width="300" height="200"> < text x="20" y="30" style="fill:purple; font-size:22px; "> Welcome to srcmini! < /text> < text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px; "> 在这里你会发现很多有用的信息！ < /text> < /svg>

< text> 元素的属性x和y以绝对值定义左上角的位置，而属性dx和dy指定相对位置。
你甚至可以使用< tspan> 元素来重新格式化或定位< text> 元素中包含的文本的范围。文本包含在不同的tspan中，但在同一文本元素中可以同时选中—当你单击并拖动以选择文本时。但是，不能同时选择单独文本元素中的文本。让我们来看一个例子：

< svg width="300" height="200"> < text x="30" y="15" style="fill:purple; font-size:22px; transform:rotate(30deg); "> < tspan style="fill:purple; font-size:22px; "> Welcome to srcmini! < /tspan> < tspan dx="-230" dy="20" style="fill:navy; font-size:14px; "> 在这里你会发现很多有用的信息！ < /tspan> < /text> < /svg>

SVG和Canvas之间的区别HTML5引入了两个新的图形元素< canvas> 和< svg> ，用于在web上创建丰富的图形，但它们从根本上是不同的。
【html5 SVG绘制以及和canvas的区别 – HTML5教程】下表总结了这两个元素之间的一些基本区别，这将帮助你理解如何有效和适当地使用这些元素。

SVG	Canvas
基于向量(由形状组成)	基于栅格(由像素组成)
多个图形元素，它们成为页面的DOM树的一部分	在行为上类似于< img> 的单个元素。画布图可以保存为PNG或JPG格式
通过脚本和CSS修改	仅通过脚本修改
良好的文本呈现能力	文本呈现能力差
使用更少的对象或更大的表面，或两者兼而有之，可以获得更好的性能	使用更多的对象或更小的表面，或两者兼而有之，可以获得更好的性能
更好的可伸缩性。可以打印在任何分辨率的高质量。不会出现像素化	可怜的可伸缩性。不适合高分辨率打印。像素可能发生