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 width="100" height="100"><br> <circle cx="50" cy="50" r="40" fill="blue" /><br></svg>
-
使用 <img> 标签引用外部SVG文件：适合不需要交互的静态图像。
示例：
<img src="image.svg" alt="SVG 图像" width="100" />
注意：这种方式无法用CSS或JavaScript修改SVG内部元素。 -
使用 <object> 标签嵌入SVG：保留可交互性，支持脚本和样式。
示例：
<object type="image/svg+xml" data="image.svg"></object>
-
使用 CSS 背景图引入SVG：适用于装饰性图形。
示例：
div {<br> background: url('icon.svg') no-repeat center;<br> width: 100px;<br> height: 100px;<br>}
2. SVG样式的设置方法
当SVG以内联或<object>形式嵌入时，可以通过以下方式设置样式：
-
使用内联 style 属性
示例：
<circle cx="50" cy="50" r="40" style="fill: red; stroke: black; stroke-width: 2;" />
-
使用内部或外部CSS
可以为SVG元素定义类或ID，然后通过CSS设置样式。
示例：
<svg width="100" height="100"><br> <circle class="icon-circle" cx="50" cy="50" r="40" /><br></svg>
CSS：
.icon-circle {<br> fill: green;<br> transition: fill 0.3s;<br>}<br>.icon-circle:hover {<br> fill: orange;<br>} - CSS不能控制 <img> 引入的SVG内部样式，若需动态变色或动画，推荐使用内联SVG。
3. 响应式与尺寸控制
为确保SVG在不同设备上正常显示，建议设置适当的尺寸属性：
立即学习“前端免费学习笔记（深入）”；
- 使用 width 和 height 属性控制大小，或设为百分比实现响应式。
示例：
<svg viewBox="0 0 100 100" width="100%" height="auto"><br> <circle cx="50" cy="50" r="40" fill="purple" /><br></svg>
- viewBox 属性定义坐标系统，是实现缩放的关键。
4. JavaScript操作SVG
内联SVG可以像普通DOM元素一样被JavaScript操作：
- 示例：点击改变颜色
<svg id="mySvg" width="100" height="100"><br> <circle id="myCircle" cx="50" cy="50" r="40" fill="gray" /><br></svg>
JS：
document.getElementById("myCircle").addEventListener("click", function() {<br> this.setAttribute("fill", "pink");<br>});
基本上就这些。选择合适的嵌入方式，结合CSS和JavaScript，能让SVG在网页中灵活又高效地发挥作用。关键在于根据需求决定是否需要交互和样式控制。
