SVG 基础：在 HTML 中使用矢量图形
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。
8. 总结
SVG 是现代前端开发中不可或缺的强大工具。它结合了矢量图形的清晰度、CSS 的可样式化以及 JavaScript 的可交互性，非常适合用于创建图标系统、数据可视化、交互式图表和复杂的界面插图。掌握 SVG 的基础知识，能够让你在构建高质量、高性能的 Web 应用时拥有更多选择。