上一篇
如何快速使用HTML SVG？
HTML SVG 是一种基于 XML 的矢量图形技术，可直接嵌入网页中绘制线条、形状、文本等，它支持缩放不失真、动画交互和样式控制，适用于图标、图表和数据可视化等场景。
SVG（可缩放矢量图形）是一种基于 XML 的矢量图像格式，可直接嵌入 HTML 中实现无损缩放的图形,以下是详细使用方法及最佳实践：
SVG 的核心优势
- 矢量特性：无限缩放不模糊,适合响应式设计。
- 文件体积小：相比位图,复杂图形占用更少带宽。
- 可编程性：支持 CSS 样式控制、JavaScript 交互及动画。
HTML 中嵌入 SVG 的 4 种方式
内联 SVG（推荐）
<svg width="100" height="100" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" fill="blue" /> </svg>
- 优点：可通过 CSS/JS 直接操作元素,支持动画和交互。
- 缺点：增加 HTML 文件体积。
<img> 标签引用
<img src="icon.svg" alt="SVG图标" width="100" height="100">
- 优点：缓存友好,用法简单。
- 缺点：无法用 CSS/JS 修改内部样式（除非嵌入样式表）。
CSS 背景图
.element {
background: url("image.svg") center/cover no-repeat;
}
- 适用场景：装饰性图形（如纹理、背景图标）。
- 限制：无交互能力。
<object>
<object data="chart.svg" type="image/svg+xml" width="300" height="200"></object>
- 优点：支持脚本交互，独立于 HTML 渲染。
- 缺点：加载速度略慢。
基础图形绘制示例
图形
代码示例
关键属性
矩形
<rect x="10" y="10" width="80" height="60" fill="red"/>x, y, rx（圆角）
圆形
<circle cx="50" cy="50" r="40" fill="green"/>cx, cy, r
路径
<path d="M10 80 L90 20 L10 20 Z" stroke="black"/>d（路径指令）
文本
<text x="50" y="50" font-size="16" text-anchor="middle">文本</text>text-anchor
高级应用技巧
CSS 样式控制
/* 内联 SVG 样式控制 */
circle {
fill: orange;
stroke: #333;
stroke-width: 2px;
transition: fill 0.3s;
}
circle:hover {
fill: red; /* 悬停变色 */
} JavaScript 交互
<svg id="interactive-svg" width="200" height="100">
<rect id="myRect" width="100" height="50" fill="teal"/>
</svg>
<script>
document.getElementById("myRect").addEventListener("click", () => {
this.setAttribute("fill", "purple"); // 点击变色
});
</script> SMIL 动画（原生 SVG 动画）
<circle cx="50" cy="50" r="10" fill="gold">
<animate attributeName="r" from="10" to="40" dur="1s" repeatCount="indefinite"/>
</circle>
注意：SMIL 在现代浏览器中逐渐被 CSS/JS 动画替代。
性能优化与兼容性
- 压缩 SVG：
- 使用工具如 SVGO 删除冗余数据。
- 浏览器兼容：
- 内联 SVG：兼容所有现代浏览器（IE9+）。
- 特性支持：通过 Can I use 检查高级功能。
- 可访问性：
- 添加
<title> 和 <desc> 标签： <svg aria-labelledby="svgTitle">
<title id="svgTitle">红色圆形图标</title>
<circle ... />
</svg>
实际应用场景
- 图标系统：用内联 SVG 创建可定制矢量图标库。
- 数据可视化：结合 D3.js 绘制动态图表。
- 交互式地图：通过
<path> 实现区域高亮和点击事件。
- 动画 UI 元素：加载动画、按钮特效等。
关键注意事项
- 安全：避免直接嵌入来源未知的 SVG（可能包含反面脚本）。
- 响应式设计：使用
viewBox 而非固定宽高（如：viewBox="0 0 100 100" 配合 CSS 宽度 100%）。
- SEO 优化：为 SVG 添加描述性文本（
<title>、<desc>）和结构化数据。
引用说明参考 MDN Web Docs - SVG 与 W3C SVG 规范，并遵循 Web 可访问性指南（WCAG 2.1），实践建议基于 Google 核心网页指标优化经验。
通过灵活运用 SVG，可显著提升网站视觉体验与性能，建议从内联 SVG 入手，逐步探索动画与交互功能,充分发挥矢量图形的优势。
