目录
SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML（可扩展标记语言）的矢量图像格式，由万维网联盟（W3C）制定，用于描述二维图形和图形应用程序。与常见的位图格式（如 JPG、PNG、GIF）不同，SVG 的图像由数学公式和几何形状（如点、线、曲线、多边形等）定义，而非像素点，因此具有独特的优势和应用场景。
SVG 的核心特点
- 无限缩放不失真
由于图像由矢量数据（路径、坐标、颜色等指令）构成，无论放大、缩小多少倍，都不会出现像素模糊或锯齿，始终保持清晰。这是 SVG 与位图的核心区别（位图放大后会失真）。
示例：一个 SVG 格式的 logo，在手机屏幕上显示清晰，放大到广告牌尺寸依然锐利。
- 文件体积小
SVG 文件通过 XML 代码描述图形，复杂图像的代码量可能较大，但简单图形（如图标、图表、Logo）的体积通常比位图小，且便于压缩和传输。
- 可编辑性强
可用文本编辑器（如记事本、VS Code）直接修改 XML 代码来调整图形的形状、颜色、尺寸等；
也支持专业设计软件（如 Adobe Illustrator、Inkscape、Figma）可视化编辑。
- 交互性与动态效果
SVG 支持嵌入 JavaScript 代码和 CSS 样式，可实现交互效果（如点击、悬停动画）和动态图形（如渐变、变形、路径动画），常被用于网页交互元素。
示例：鼠标悬停时按钮颜色变化、图表数据实时更新等。
- 跨平台兼容性
几乎所有现代浏览器（Chrome、Firefox、Safari 等）都原生支持 SVG，无需插件；同时兼容各类操作系统（Windows、macOS、Linux）和移动设备。
- 支持透明和渐变
可实现复杂的透明效果、线性渐变、径向渐变等，且渲染质量不受分辨率影响。
SVG 与位图格式的对比
特性 SVG（矢量图） JPG/PNG/GIF（位图）
构成方式 数学公式和几何指令 像素点阵列
缩放效果 不失真、无锯齿 放大后模糊、出现锯齿
文件体积 简单图形小，复杂图形可能较大 分辨率越高、色彩越丰富，体积越大
适用场景 图标、Logo、图表、文字、简单插画 照片、复杂图像、实景图
可编辑性 可通过代码或工具灵活修改 需专业图像软件，修改精度有限SVG 的常见应用场景
- 网页设计：
图标、按钮、导航栏、动态交互元素（如加载动画）、响应式图形（适配不同屏幕尺寸）。
- 数据可视化：
图表（折线图、柱状图、饼图等），结合 JavaScript 可实现动态数据展示（如 D3.js 库大量使用 SVG）。
- 印刷与排版：
Logo、海报、名片等需要高清印刷的设计（避免缩放失真）。
- 移动应用：
图标和界面元素（适配不同分辨率的屏幕）。
- 地图与工程图：
地图矢量数据、建筑图纸等需要精确缩放的图形。
SVG 的局限性
- 不适合表现照片等复杂实景图像：这类图像由大量细节和色彩过渡构成，用 SVG 描述会导致代码冗长，渲染效率远低于位图。
- 复杂 SVG 可能影响加载速度：过多的路径或嵌套元素会增加解析时间，降低网页性能。
如何打开和创建 SVG 文件？
- 打开方式：
浏览器直接拖拽、图像编辑软件（Illustrator、Inkscape）、文本编辑器（查看 / 修改代码）。
- 创建方式：
设计软件导出（如 Illustrator 的 “存储为 SVG”）；
在线工具生成（如SVG-edit）；
手动编写 XML 代码（适合简单图形，需了解 SVG 语法）。
总之，SVG 是一种面向未来的矢量图形格式，尤其在需要高清缩放、交互性和轻量化的场景中具有不可替代的优势，是网页设计、数据可视化和矢量图形领域的核心技术之一。
