当前位置：首页 > news >正文

SVG 基础：在 HTML 中使用矢量图形

news 2026/7/13 22:19:12

1. 什么是 SVG？

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的标记语言，用于描述二维矢量图形。与基于像素的栅格图像（如 JPEG、PNG）不同，SVG 图形由点、线、曲线和形状等数学公式定义，因此可以无限缩放而不会失真或出现锯齿。

SVG 是 W3C 标准，所有现代浏览器都提供原生支持。它可以直接嵌入 HTML 文档中，通过 CSS 和 JavaScript 进行样式控制和交互操作，是构建现代 Web 界面中图标、图表、数据可视化和复杂插图的理想选择。

2. SVG 的优势

无限缩放不失真：作为矢量图形，SVG 在任何分辨率下都能保持清晰锐利，完美适配 Retina 屏幕和高 DPI 设备。
文件体积小：对于由简单几何形状构成的图形（如 Logo、图标），SVG 文件通常比同等质量的 PNG 或 JPEG 小得多。
可被 CSS 和 JavaScript 控制：SVG 元素是 DOM 的一部分，可以像 HTML 元素一样被 CSS 设置样式（颜色、描边、透明度等），并通过 JavaScript 添加动画和交互。
可访问性与 SEO 友好：SVG 中的文本是真实的文本内容，可以被屏幕阅读器读取，也能被搜索引擎索引。
易于编辑和创建：可以使用 Adobe Illustrator、Figma、Inkscape 等设计工具创建，也可以直接用代码编写。

3. 在 HTML 中使用 SVG 的几种方式

3.1 内联 SVG

直接将 SVG 代码写在 HTML 文件中。这是最灵活的方式，允许你通过 CSS 和 JavaScript 完全控制 SVG 的每一个部分。

<!DOCTYPE html> <html> <body> <svg width="100" height="100" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </body> </html>

3.2 使用 <img> 标签

将 SVG 文件作为外部图像引用。这种方式简单，但 SVG 内部的元素无法被外部 CSS 或 JavaScript 访问和修改。

<img src="logo.svg" alt="公司 Logo" width="200" height="100" />

3.3 使用 CSS background-image

将 SVG 作为元素的背景图像。同样，SVG 内容与页面 DOM 是分离的。

.icon { background-image: url('icon.svg'); background-size: contain; width: 24px; height: 24px; }

3.4 使用 <object> 标签

这种方式将 SVG 作为一个独立文档嵌入，其内部的脚本可以运行，并且可以被父页面的 JavaScript 访问（受同源策略限制）。

<object data="chart.svg" type="image/svg+xml" width="400" height="300"> <!-- 如果浏览器不支持 object 或 SVG，则显示后备内容 --> <img src="chart.png" alt="图表" /> </object>

4. 基础 SVG 形状与属性

SVG 提供了一系列预定义的形状元素，以下是一些最常用的：

<rect>：矩形
<circle>：圆形
<ellipse>：椭圆
<line>：直线
<polyline>：折线
<polygon>：多边形
<path>：路径（最强大，可绘制任意形状）

每个形状都有控制其外观的属性，例如：

fill：填充颜色。
stroke：描边颜色。
stroke-width：描边宽度。
opacity：整体透明度。

<svg width="200" height="200" viewBox="0 0 200 200"> <rect x="10" y="10" width="50" height="50" fill="red" /> <circle cx="100" cy="50" r="30" fill="blue" /> <polygon points="150,10 180,50 120,50" fill="green" /> </svg>

5. 使用 CSS 为 SVG 添加样式

你可以像为 HTML 元素添加样式一样为 SVG 元素添加样式，这提供了极大的灵活性。

<style> /* 为 SVG 内部的元素设置样式 */ .my-rect { fill: coral; stroke: darkred; stroke-width: 3; transition: fill 0.3s; } .my-rect:hover { fill: lightcoral; } </style> <svg width="100" height="100"> <rect class="my-rect" x="10" y="10" width="80" height="80" /> </svg>

6. 使用 JavaScript 实现 SVG 交互

由于 SVG 是 DOM 的一部分，你可以为其添加事件监听器，实现丰富的交互效果。

<svg id="interactive-svg" width="200" height="100"> <circle id="my-circle" cx="50" cy="50" r="40" fill="steelblue" /> </svg> <script> const circle = document.getElementById('my-circle'); circle.addEventListener('click', function() { // 点击时改变颜色和半径 this.setAttribute('fill', 'orange'); this.setAttribute('r', '30'); }); </script>

7. 最佳实践与注意事项

优化 SVG 文件：使用工具（如 SVGO）清理设计工具导出的 SVG 中不必要的元数据、注释和属性，以减小文件体积。
设置 viewBox 属性：viewBox属性定义了 SVG 内容的坐标系，配合preserveAspectRatio可以实现响应式缩放，这是实现 SVG 响应式的关键。
提供备用方案：在使用<img>或<object>标签时，考虑为不支持 SVG 的旧浏览器提供 PNG 后备。
注意安全性：避免直接使用来自不可信来源的 SVG 文件，因为它们可能包含恶意脚本。
性能考量：过于复杂的 SVG（数千个路径节点）可能会影响渲染性能，需进行优化或考虑使用 Canvas。