内联 SVG

内联 SVG 允许在 HTML 中编写的 SVG 标记在浏览器中生成图形。

使用 SVG 内联时，不严格要求 DOCTYPE。而只是 <svg> 打开和关闭标签以及 viewBox 或 width 和 height 属性就足够了：

<svg width="100%" height="100%">
    <!-- SVG elements go here -->
</svg>

上面的 <svg> 片段既充当容器又充当结构元素。该片段建立了自己的坐标系。

下面是使用某些内容呈现 SVG 片段的示例。它将生成一个带有 Hello World!的矩形。其中的文字。

<svg width="50%" viewBox="0 0 10 10">
    <rect x="1" y="1" width="5" height="3" fill="teal" />
    <text x="2" y="2" font-family="Palatino, Georgia, serif" font-size="3%" font-weight="bold" fill="white">Hello World!</text>
</svg>

结果：