9.3 SVG 用在HTML中

HTML5文档中可直接内嵌SVG图像

在HTML4的规范中,SVG文件可通过以下标签嵌入HTML文档:<embed>、<object> 或者 <iframe>。而HTML5直接支持SVG内嵌。

<html> <!DOCTYPE html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

和前面的独立SVG文件相比,内置在HTML5文档中可以忽略文档DTD、SVG版本、命名空间等信息,语法变得很简练。

上面的例子中我们创建了一个圆的基本形状,下面的章节我们就从SVG最基本的元素-几何图形开始学习。