HTML 页面引入 SVG 图片的四种实用方法详解

HTML 页面引入 SVG 图片的四种方式

在 Web 应用开发中，SVG（可缩放矢量图形）因其清晰度高、文件体积小且易于样式控制等优点，被广泛使用。本文将总结在 HTML 页面中引入 SVG 图片的四种常见方法，并附上具体代码示例，供开发者参考。

1. 直接内联 SVG 标签

最直接的方式是在 HTML 页面中直接书写 SVG 标签，无需额外请求资源。以下示例创建了一个包含矩形的简单 SVG 图形：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>内联 SVG 示例</title>
</head>
<body>
    <!-- 一个 SVG 图片 -->
    <svg width="200" height="150">
        <!-- 里面有一个矩形 -->
        <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
    </svg>
</body>
</html>

运行效果如下图所示，边框样式直接作用于 SVG 元素本身。

2. 使用 img 标签引入

与引入 JPEG、PNG 等位图类似，SVG 也可以作为独立文件通过 img 标签加载。首先需要创建一个 SVG 文件，例如 test.svg，内容如下：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150">
    <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
</svg>

注意两点：一是必须声明命名空间 xmlns，二是移除了原先写在 SVG 标签上的样式（如边框），因为样式可以转移到 img 标签上。

然后在 HTML 中通过 img 标签引入：

<img src="test.svg" />

运行效果与内联方式一致，如下图所示。此外，网上有许多优质的 SVG 图标资源，例如 iconfont.cn，可直接下载使用。

3. 通过 CSS 背景引入

SVG 也可以作为元素的背景图片，通过 CSS 的 background-image 属性引入。这种方式适合装饰性图形或需要重复平铺的场景。

<style type="text/css">
    .svg {
        width: 200px;
        height: 150px;
        border: 1px solid steelblue;
        background-image: url(test.svg); /* 当成背景引入 */
    }
</style>
<div></div>

4. 使用 object 标签引入

object 标签同样可以引入外部 SVG 文件，通过 data 属性指定文件路径。这种方式与 img 类似，但提供了更多灵活性，例如可以包含回退内容。

<object data="test.svg"></object>

运行效果与前述方法类似，此处不再重复贴图。

其他标签的说明

虽然 embed 和 iframe 标签也能引入 SVG，但出于兼容性和语义化考虑，不推荐使用。如需深入了解，可参考以下资料：

• SVG 命名空间说明：MDN 文档
• embed 标签用法：MDN 文档
• iframe 嵌入技术：MDN 文档

以上便是 HTML 页面引入 SVG 图片的四种常用方式，开发者可根据项目需求选择最合适的方法。