HTML5 SVG知识点全面解析
通俗易懂的SVG技术指南，适合编程新手的学习资料
📚 内容目录
什么是SVG？
SVG（Scalable Vector Graphics，可缩放矢量图形）是一种使用XML描述二维图形的技术。与常见的JPEG、PNG等位图不同，SVG是矢量图形，这意味着它由数学公式定义的线条和形状组成，而不是像素点。
想象一下：位图图像就像是用不同颜色的小方块（像素）拼成的马赛克画，而矢量图更像是用钢笔和尺子画出的几何图形。当你放大位图时，会看到马赛克效果（像素化），而放大矢量图时，图形依然保持清晰锐利。
<!DOCTYPE html>
<html>
<body>
<!– 最简单的SVG示例 –>
<svg width=“100” height=“100”>
<circle cx=“50” cy=“50” r=“40”
stroke=“green” stroke-width=“4”
fill=“yellow” />
</svg>
</body>
</html>
💡 关键特点：
- 可缩放：无论放大多少倍都不会失真
- 轻量级：文件大小通常比同等质量的位图小
- 可交互：支持JavaScript操作和事件处理
- 可搜索：文本内容可以被搜索引擎索引
- 可编程：可以通过CSS和JavaScript控制
为什么要使用SVG？
👍 SVG的优点
- 无限缩放不失真，适合高清屏和响应式设计
- 文件体积小，加载速度快
- 可通过CSS和JavaScript完全控制
- 支持动画和交互效果
- DOM操作，每个元素都是可访问的
- 搜索引擎友好，利于SEO
👎 SVG的缺点
- 不适合照片等复杂图像
- 复杂图形可能导致性能问题
- 学习曲线比普通图片稍高
- 旧版浏览器支持有限(IE8及以下)
适用场景：
SVG特别适合以下情况：图标(icons)、徽标(logos)、图表(charts)、地图(maps)、简单插画(illustrations)以及需要动画和交互的图形元素。
基本形状元素
SVG提供了一系列预定义的基本形状元素，这些是构建复杂图形的基础：
<!– 矩形 –>
<rect x=“10” y=“10” width=“80” height=“60”
rx=“10” fill=“blue”/>
<!– 圆形 –>
<circle cx=“50” cy=“50” r=“40” fill=“red”/>
<!– 椭圆 –>
<ellipse cx=“50” cy=“50” rx=“40” ry=“30” fill=“green”/>
<!– 直线 –>
<line x1=“10” y1=“10” x2=“90” y2=“90”
stroke=“black” stroke-width=“5”/>
<!– 折线 –>
<polyline points=“10,80 50,10 90,80”
fill=“none” stroke=“purple” stroke-width=“3”/>
<!– 多边形 –>
<polygon points=“50,5 90,90 5,60 95,60 10,90”
fill=“gold” stroke=“black”/>
路径元素 – SVG的核心
<path>元素是SVG中最强大也最复杂的元素，它可以创建任意形状的线条和曲线。所有基本形状都可以用路径来实现。
路径使用一系列命令来绘制：
- M = 移动到 (Move to)
- L = 画线到 (Line to)
- H = 水平线到 (Horizontal line to)
- V = 垂直线到 (Vertical line to)
- C = 三次贝塞尔曲线到 (Curve to)
- S = 平滑三次贝塞尔曲线到 (Smooth curve to)
- Q = 二次贝塞尔曲线到 (Quadratic curve to)
- T = 平滑二次贝塞尔曲线到 (Smooth quadratic curve to)
- A = 椭圆弧线到 (Arc to)
- Z = 闭合路径 (Close path)
<svg width=“200” height=“200”>
<path d=”
M 50,50 // 移动到(50,50)
L 150,50 // 画线到(150,50)
L 150,150 // 画线到(150,150)
L 50,150 // 画线到(50,150)
Z // 闭合路径
” fill=“none” stroke=“black”/>
<path d=”
M 100,30 // 移动到起点
C 150,30 150,80 100,80 // 三次贝塞尔曲线
C 50,80 50,130 100,130 // 三次贝塞尔曲线
” fill=“none” stroke=“red” stroke-width=“2”/>
</svg>
💡 实用建议：
虽然手写路径命令很强大，但通常我们会使用矢量图形软件（如Adobe Illustrator、Inkscape）创建复杂路径，然后复制生成的代码。
文本元素
SVG不仅可以绘制图形，还可以渲染文本，并且可以对文本应用所有图形变换和效果。
<svg width=“300” height=“200”>
<!– 基本文本 –>
<text x=“20” y=“50” font-family=“Arial”
font-size=“24” fill=“blue”>
SVG文本示例
</text>
<!– 沿路径的文本 –>
<path id=“textPath” d=“M50,100 C100,50 150,50 200,100”
fill=“none”/>
<text>
<textPath href=“#textPath”>
这是一段沿着曲线排列的文字
</textPath>
</text>
</svg>
响应式SVG
创建响应式SVG的关键是使用viewBox属性，而不是设置固定的宽度和高度。
viewBox定义了SVG画布的位置和尺寸，格式为：”min-x min-y width height”
<!– 响应式SVG示例 –>
<svg viewBox=“0 0 100 100” preserveAspectRatio=“xMidYMid meet”>
<!– 图形内容 –>
</svg>
<!– CSS中设置 –>
svg {
width: 100%;
height: auto;
}
💡 关键点：
viewBox定义了内容坐标系preserveAspectRatio控制宽高比- 在CSS中设置宽度为100%，高度自动
- 内部元素使用相对单位(百分比)而不是绝对像素
SVG vs Canvas
SVG
- 矢量图形，无限缩放
- 基于DOM，可通过CSS/JS操作
- 支持事件处理
- 适合静态图形、交互图表
- 文本渲染能力强
- 不适合复杂场景(如游戏)
Canvas
- 像素操作能力强
- 适合复杂动画、游戏
- 高性能图形处理
- 基于像素，缩放会失真
- 无内置事件支持
- 文本渲染能力弱
如何选择？
需要可缩放、可交互的静态图形？选SVG！
需要高性能的像素操作、游戏或复杂动画？选Canvas！