#SVG 教程

欢迎学习 SVG（可缩放矢量图形）教程！SVG 是一种基于 XML 的矢量图形格式，可以在网页中创建高质量、可缩放的图形。

#什么是 SVG？

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的 XML 标记语言。与位图（如 JPEG、PNG）不同，SVG 图形可以无限缩放而不失真。

#SVG 的优势

• 可缩放性：无论放大多少倍都不会失真
• 文件小：相比位图，矢量图形文件通常更小
• 可编辑：可以用文本编辑器直接编辑
• 可搜索：SVG 中的文本可以被搜索引擎索引
• 可脚本化：可以使用 JavaScript 操作 SVG 元素
• 可样式化：可以使用 CSS 设置样式

#简单示例

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#3b82f6" />
</svg>

这段代码创建了一个 100x100 像素的 SVG 画布，并在中心绘制了一个蓝色圆形。

#教程目录

#入门基础

• SVG 嵌入 HTML - 学习如何在网页中使用 SVG

#基础形状

• SVG 矩形 - 绘制矩形和正方形
• SVG 圆 - 绘制圆形
• SVG 椭圆 - 绘制椭圆形
• SVG 线条 - 绘制直线

#复杂图形

• SVG 多边形 - 绘制多边形
• SVG 折线 - 绘制折线
• SVG 路径 - 使用路径绘制任意形状
• SVG 文本 - 在 SVG 中添加文本

#样式与效果

• SVG stroke 属性 - 描边样式详解
• SVG 滤镜简介 - 滤镜效果入门
• SVG 模糊效果 - 创建模糊效果
• SVG 阴影 - 添加阴影效果
• SVG 线性渐变 - 创建线性渐变
• SVG 径向渐变 - 创建径向渐变

#参考资料

• SVG 实例 - 实用示例合集
• SVG 参考手册 - 元素和属性速查

#浏览器支持

所有现代浏览器都支持 SVG：

#开始学习

准备好了吗？让我们从 SVG 嵌入 HTML 开始，学习如何在网页中使用 SVG！