SVG 教程

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

什么是 SVG？

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

SVG 的优势

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

简单示例

html

<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：

浏览器	支持版本
Chrome	4+
Firefox	3+
Safari	3.2+
Edge	12+
Opera	10+

开始学习

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