srcmini上一章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上创建丰富的图形，但它们从根本上是不同的。
下表总结了这两个元素之间的一些基本区别，这将帮助你理解如何有效和适当地使用这些元素。
| SVG | Canvas |
| 基于向量(由形状组成) | 基于栅格(由像素组成) |
| 多个图形元素，它们成为页面的DOM树的一部分 | 在行为上类似于<img>的单个元素。画布图可以保存为PNG或JPG格式 |
| 通过脚本和CSS修改 | 仅通过脚本修改 |
| 良好的文本呈现能力 | 文本呈现能力差 |
| 使用更少的对象或更大的表面，或两者兼而有之，可以获得更好的性能 | 使用更多的对象或更小的表面，或两者兼而有之，可以获得更好的性能 |
| 更好的可伸缩性。可以打印在任何分辨率的高质量。不会出现像素化 | 可怜的可伸缩性。不适合高分辨率打印。像素可能发生 |
评论前必须登录！
注册