在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最基本的元素-几何图形开始学习。