SVG 知识详解：从入门到精通

作为一名前端开发者，我经常会被SVG的魅力所折服。这种基于XML的矢量图形格式，不仅能完美适配各种屏幕分辨率，还能通过CSS和JavaScript进行灵活控制。今天，就让我们一起来深入探索SVG的世界。

一、SVG是什么？

SVG（Scalable Vector Graphics）是一种用XML描述二维图形的矢量图形格式。与位图不同，SVG图形由数学公式定义，因此可以无限放大而不失真。

xml 复制代码

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

上面这段简单的代码就能绘制一个黄色的圆，是不是很神奇？

二、SVG基础图形

SVG提供了多种基础图形元素：

矩形 <rect>

xml 复制代码

<rect x="10" y="10" width="80" height="80" fill="blue" />

圆形 <circle>

xml 复制代码

<circle cx="50" cy="50" r="40" fill="red" />

椭圆 <ellipse>

xml 复制代码

<ellipse cx="50" cy="50" rx="40" ry="30" fill="green" />

线条 <line>

xml 复制代码

<line x1="10" y1="10" x2="90" y2="90" stroke="black" />

多边形 <polygon>

xml 复制代码

<polygon points="50,5 90,90 10,90" fill="purple" />

折线 <polyline>

xml 复制代码

<polyline points="10,10 40,40 10,70 40,100" fill="none" stroke="orange" />

三、SVG路径

<path>元素是SVG中最强大的图形元素，可以绘制任意形状。它使用d属性定义路径数据：

xml 复制代码

<path d="M10 10 H 90 V 90 H 10 L 10 10" fill="none" stroke="black" />

路径命令包括：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

四、SVG文本

SVG可以完美呈现文本：

xml 复制代码

<text x="10" y="50" font-family="Arial" font-size="20" fill="red">
  Hello SVG World!
</text>

五、SVG样式

SVG支持多种样式设置方式：

内联样式

xml 复制代码

<rect x="10" y="10" width="80" height="80" style="fill:blue;stroke:pink;stroke-width:5" />

CSS样式

html 复制代码

<style>
  .myRect {
    fill: blue;
    stroke: pink;
    stroke-width: 5;
  }
</style>

<rect x="10" y="10" width="80" height="80" class="myRect" />

属性样式

xml 复制代码

<rect x="10" y="10" width="80" height="80" fill="blue" stroke="pink" stroke-width="5" />

六、SVG动画

SVG支持多种动画效果：

CSS动画

html 复制代码

<style>
  @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .spinner {
    animation: rotate 2s linear infinite;
  }
</style>

<rect x="25" y="25" width="50" height="50" class="spinner" fill="blue" />

SMIL动画

xml 复制代码

<circle cx="50" cy="50" r="20" fill="red">
  <animate attributeName="cx" from="50" to="450" dur="5s" repeatCount="indefinite" />
</circle>

JavaScript动画

javascript 复制代码

const circle = document.querySelector(circle);
let angle = 0;

function animate() {
  angle += 0.02;
  circle.setAttribute(cx, 50 + Math.sin(angle) * 40);
  circle.setAttribute(cy, 50 + Math.cos(angle) * 40);
  requestAnimationFrame(animate);
}

animate();

七、SVG滤镜

SVG滤镜可以创建各种视觉效果：

xml 复制代码

<defs>
  <filter id="blur" x="0" y="0">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>
</defs>

<rect x="10" y="10" width="80" height="80" fill="blue" filter="url(#blur)" />

八、SVG实际应用

图标系统

html 复制代码

<svg class="icon">
  <use xlink:href="#icon-home"></use>
</svg>

数据可视化

javascript 复制代码

// 使用D3.js创建SVG图表
const data = [10, 20, 30, 40, 50];

d3.select(svg)
  .selectAll(rect)
  .data(data)
  .enter()
  .append(rect)
  .attr(x, (d, i) => i * 30)
  .attr(y, d => 100 - d)
  .attr(width, 25)
  .attr(height, d => d)
  .attr(fill, steelblue);

交互式图形

javascript 复制代码

const svg = document.querySelector(svg);

svg.addEventListener(mousemove, (e) => {
  const rect = svg.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  document.querySelector(circle).setAttribute(cx, x);
  document.querySelector(circle).setAttribute(cy, y);
});

九、SVG优化技巧

使用SVGO工具优化SVG文件
尽量复用元素（使用<defs>和<use>）
简化路径数据
使用CSS控制样式
考虑使用SVG精灵图

十、总结

SVG作为现代Web开发中不可或缺的技术，为我们提供了强大的图形处理能力。从简单的图标到复杂的数据可视化，SVG都能完美胜任。希望通过本文，你能对SVG有一个全面的了解，并在实际项目中灵活运用。

记住，SVG的学习是一个渐进的过程，多动手实践，你会发现它的无限可能！