最直接有效的方式是使用内联SVG，将SVG代码直接嵌入HTML中，通过<svg>标签包裹图形内容，支持CSS与JavaScript控制样式与交互，提升加载效率并便于动态修改。
在HTML中插入SVG图形，最直接有效的方式是使用内联SVG。这种方式不仅能让图形与页面一同加载，还能通过CSS和JavaScript进行样式控制与交互操作。
使用内联SVG嵌入图形
将SVG代码直接写在HTML文件中，称为内联SVG。这样做无需额外请求，提升加载效率，也便于动态修改。
- 用 <svg> 标签包裹图形内容，设置 width 和 height 控制尺寸
- 可在HTML任意位置插入，如 div、section 内部
- 支持 aria 标签增强可访问性
示例：
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="40" fill="blue" /> </svg>
绘制基本矢量图形
SVG提供多种标签用于绘制常见形状，这些元素可组合成复杂图标。
立即学习“前端免费学习笔记（深入）”；
- <rect>：绘制矩形，设置 x、y、width、height、rx（圆角）
- <circle>：画圆，需指定 cx、cy 和 r
- <ellipse>：椭圆，参数为 cx、cy、rx、ry
- <line>：直线，定义 x1、y1 到 x2、y2
- <polygon>：多边形，points 属性列出各顶点坐标
- <path>：最灵活的绘图工具，d 属性定义路径指令
例如，画一个红色三角形：
<svg width="100" height="100"> <polygon points="50,10 90,90 10,90" fill="red" /> </svg>
样式与交互控制
内联SVG中的元素可以像普通DOM节点一样被操作。
CSS可直接选中SVG内部标签设置样式：
svg circle {
fill: green;
transition: fill 0.3s;
}
svg circle:hover {
fill: orange;
}
JavaScript也能绑定事件：
document.querySelector('circle').addEventListener('click', function() {
this.setAttribute('fill', 'purple');
});
优化与注意事项
虽然内联SVG灵活，但也需注意性能和兼容性。
- 避免在页面中重复插入大型SVG代码，可考虑 SVG symbol 复用机制
- 移除不必要的编辑元数据（如Adobe Illustrator生成的注释）以减小体积
- 为图标类图形添加 role="img" 和 aria-label 提高可访问性
- 老版本IE对某些SVG特性支持有限，必要时提供降级方案
基本上就这些。掌握内联SVG的写法和基本图形绘制，就能在网页中高效使用矢量图形，实现清晰缩放与丰富交互。不复杂但容易忽略细节，比如命名空间和属性大小写。
