使用内联SVG可提升网页性能与交互性，通过将SVG代码直接嵌入HTML，如用<svg>标签定义画布并插入圆形、矩形等图形；示例中红色圆形通过cx、cy和r属性定位与绘制；常用图形包括rect、line、polygon和path，如蓝色三角形由points指定顶点；结合CSS可实现样式控制与悬停变色效果；为实现响应式设计，应设置viewBox属性并配合百分比宽度，使图形自适应不同屏幕尺寸且保持清晰。
在网页开发中，SVG（可缩放矢量图形）是一种强大的图形格式，支持高清晰度显示且文件体积小。将SVG直接嵌入HTML，不仅能提升页面加载速度，还能方便地用CSS和JavaScript控制样式与行为。下面介绍如何用HTML插入SVG图形，并分享一些实用的内联SVG代码与绘制技巧。
使用内联SVG插入图形
最直接的方式是把SVG代码写进HTML文档中，称为“内联SVG”。这样无需额外请求图片资源，图形也能随页面一起渲染。
例如，插入一个简单的红色圆形：
<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="red" />
</svg>
这段代码会在页面上绘制一个居中的红色圆。注意，svg 标签定义了画布大小，circle 元素通过 cx、cy 定位中心点，r 设定半径，fill 控制填充色。
立即学习“前端免费学习笔记（深入）”；
常用SVG基本图形绘制
SVG支持多种基础图形元素，适合快速构建图标或简单界面元素。
- 矩形（rect）：设定 x、y 坐标以及 width 和 height，可用 rx 和 ry 创建圆角
- 线条（line）：通过 x1、y1 到 x2、y2 绘制直线，配合 stroke 定义颜色和宽度
- 多边形（polygon）：points 属性列出各顶点坐标，适合画三角形、星形等
- 路径（path）：最灵活的绘图方式，d 属性包含移动、画线、曲线等指令
比如画一个蓝色三角形：
<svg width="120" height="100"><polygon points="60,10 110,90 10,90" fill="blue" />
</svg>
用CSS美化SVG图形
内联SVG可以像普通HTML元素一样应用CSS。你可以将样式写在外部文件或 style 标签中。
例如，给SVG添加悬停效果：
<style>.my-circle { fill: green; transition: fill 0.3s; }
.my-circle:hover { fill: orange; }
</style>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" class="my-circle" />
</svg>
这样当用户鼠标移上圆形时，颜色会从绿色变为橙色，过渡自然。
响应式SVG设计技巧
为了让SVG在不同屏幕尺寸下正常显示，建议设置 viewBox 属性而不是固定宽高。
例如：
<svg viewBox="0 0 100 100" style="width:100%; max-width:200px;"><circle cx="50" cy="50" r="40" fill="purple" />
</svg>
viewBox 定义了坐标系统范围，配合百分比宽度，能让图形在容器中自适应缩放，保持清晰不失真。
基本上就这些。掌握内联SVG的基本语法和常见绘图方法，再结合CSS交互和响应式设置，就能在网页中高效使用矢量图形，提升视觉表现力又不影响性能。
