在网页开发里，SVG是常用的矢量图形格式，它不会像位图那样在缩放时出现模糊问题，非常适合制作图标、简单插画等元素。在HTML中插入SVG有多种方式，其中内联SVG是最灵活的一种，可以直接在HTML文档中编写SVG代码，还能通过CSS和JavaScript控制图形的样式和交互。
HTML插入SVG的常用方式
除了内联SVG之外，还可以通过<img>标签、CSS背景图、<object>标签等方式插入SVG，不同方式的适用场景有所区别。
1. 使用<img>标签插入
这种方式和插入普通图片类似，只需要将SVG文件的路径作为src属性的值即可，适合不需要修改SVG内部样式的场景。
<img src="icon.svg" alt="示例图标" width="100" height="100">
2. 内联SVG方式
内联SVG是把SVG代码直接写在HTML文档中，不需要额外的SVG文件，这种方式可以直接操作SVG内部的元素，灵活性最高。
内联SVG的基本代码结构
内联SVG的核心是<svg>标签，所有SVG图形元素都需要放在这个标签内部，<svg>标签需要指定宽度、高度和命名空间。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 这里写SVG图形元素 --> </svg>
其中xmlns是SVG的命名空间，是必须添加的属性，否则部分浏览器可能无法正确渲染SVG内容。
常用矢量图形绘制技巧
SVG提供了多种基础图形元素，通过组合这些元素可以绘制出复杂的矢量图形，下面介绍几个常用的图形元素和绘制方法。
矩形绘制
使用<rect>标签可以绘制矩形，需要指定矩形的起始坐标、宽度、高度，还可以设置圆角、填充色、边框等属性。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="160" height="100" rx="10" ry="10" fill="#4CAF50" stroke="#333" stroke-width="2" /> </svg>
这里的x和y是矩形左上角的坐标，rx和ry是圆角半径，fill是填充颜色，stroke是边框颜色，stroke-width是边框宽度。
圆形和椭圆绘制
圆形使用<circle>标签，需要指定圆心坐标和半径；椭圆使用<ellipse>标签，需要指定圆心坐标和横纵轴半径。
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 绘制圆形 --> <circle cx="80" cy="100" r="50" fill="#2196F3" /> <!-- 绘制椭圆 --> <ellipse cx="220" cy="100" rx="70" ry="40" fill="#FF9800" /> </svg>
线条和折线绘制
线条使用<line>标签，指定起点和终点坐标；折线使用<polyline>标签，通过points属性指定多个点的坐标，依次连接这些点。
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 绘制线条 --> <line x1="20" y1="20" x2="280" y2="20" stroke="#333" stroke-width="2" /> <!-- 绘制折线 --> <polyline points="20,60 80,120 140,80 200,140 260,100" fill="none" stroke="#E91E63" stroke-width="2" /> </svg>
路径绘制
路径是SVG中最强大的图形元素，使用<path>标签，通过d属性定义路径的绘制命令，可以绘制任意复杂的图形。常用的路径命令包括M（移动到）、L（画线到）、C（三次贝塞尔曲线）、Z（闭合路径）等。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="M50,150 L100,50 L150,150 Z" fill="#9C27B0" stroke="#333" stroke-width="2" /> </svg>
上面的代码绘制了一个三角形，M50,150是移动到坐标(50,150)，L100,50是画线到(100,50)，L150,150是画线到(150,150)，Z是闭合路径回到起点。
内联SVG的实用技巧
- 可以通过CSS控制SVG样式，比如修改填充色、边框等，和内联HTML元素的样式控制方式一致。
- 可以给SVG内部的元素添加id或class，方便用JavaScript操作，实现交互效果。
- 内联SVG支持视口（viewBox）属性，可以定义SVG的可见区域，实现图形的自适应缩放。
- 复杂的SVG图形可以通过设计工具导出代码后，直接粘贴到HTML中作为内联SVG使用。
viewBox属性的使用示例如下，它可以让SVG在指定的宽度高度内自适应缩放，避免图形被裁剪。
<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="40" fill="#00BCD4" /> </svg>
这里的viewBox="0 0 100 100"表示SVG的内部坐标系是从(0,0)到(100,100)，不管外部设置的width和height是多少，图形都会自动缩放到对应的尺寸。