HTML 中的 SVG

SVG 文件可通过以下标签嵌入 HTML 文档:<embed>、<object> 或者 <iframe>。

SVG 的代码可以直接嵌入到HTML页面中，或您可以直接链接到SVG文件。

使用 <embed> 标签

下面是一个简单的 SVG 图形示例:

下面是 HTML 代码:

SVG 代码解析:

• SVG 图像代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。
• width 和 height 属性可设置此 SVG 图像的宽度和高度。
• SVG 的 <circle> 用来创建一个圆。
• cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。
• r 属性定义圆的半径。
• stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 4px 宽，绿色边框。
• fill 属性设置形状内的颜色。我们把填充颜色设置为黄色。
• </svg> 关闭标签的作用是关闭 SVG 元素。

注释: 因为 SVG 是用 XML 编写的，所以所有元素都必须正确关闭！