SVG可通过内联、img标签、object标签或CSS背景图嵌入HTML；内联和object支持CSS与JavaScript控制样式及交互，img仅用于静态显示；通过width、height和viewBox实现响应式；JavaScript可操作内联SVG实现动态效果，需根据交互需求选择合适方式。
在HTML中使用SVG（可缩放矢量图形）是一种高效展示清晰图像的方式，尤其适用于图标、Logo和需要高分辨率显示的图形。SVG可以直接嵌入HTML文档中，也可以通过外部文件引入，并且支持用CSS和JavaScript进行样式控制与交互操作。
1. SVG的嵌入方式
有多种方法可以将SVG图形插入HTML页面：
-
内联SVG（Inline SVG）：直接将SVG代码写入HTML中，便于样式和脚本控制。
示例：
-
使用
标签引用外部SVG文件：适合不需要交互的静态图像。
示例：
@@##@@
注意：这种方式无法用CSS或JavaScript修改SVG内部元素。 -
使用 ：保留可交互性，支持脚本和样式。
示例：
-
使用 CSS 背景图引入SVG：适用于装饰性图形。
示例：
div {
background: url('icon.svg') no-repeat center;
width: 100px;
height: 100px;
}
2. SVG样式的设置方法
当SVG以内联或
-
使用内联 style 属性
示例：
-
使用内部或外部CSS
可以为SVG元素定义类或ID，然后通过CSS设置样式。
示例：
CSS：
.icon-circle {
fill: green;
transition: fill 0.3s;
}
.icon-circle:hover {
fill: orange;
} -
CSS不能控制
引入的SVG内部样式，若需动态变色或动画，推荐使用内联SVG。
3. 响应式与尺寸控制
为确保SVG在不同设备上正常显示，建议设置适当的尺寸属性：
立即学习“前端免费学习笔记（深入）”；
- 使用 width 和 height 属性控制大小，或设为百分比实现响应式。
示例：
- viewBox 属性定义坐标系统，是实现缩放的关键。
4. JavaScript操作SVG
内联SVG可以像普通DOM元素一样被JavaScript操作：
- 示例：点击改变颜色
JS：
document.getElementById("myCircle").addEventListener("click", function() {
this.setAttribute("fill", "pink");
});
基本上就这些。选择合适的嵌入方式，结合CSS和JavaScript，能让SVG在网页中灵活又高效地发挥作用。关键在于根据需求决定是否需要交互和样式控制。
