什么是 SVG？
SVG（可缩放矢量图形）是一种基于 XML 的矢量图像格式，用于二维图形，支持交互性和动画。与光栅图像不同，SVG 图形可以缩放到任何尺寸而不会损失质量。
快速了解
| 全称 | 可缩放矢量图形 |
|---|---|
| 创建时间 | 2001 年（W3C 推荐标准） |
| 规范文档 | 官方规范 |
工作原理
SVG 由 W3C 开发，于 2001 年成为推荐标准。它使用形状、路径和文本的数学描述来定义图形，而不是像素。这使得 SVG 非常适合徽标、图标、插图和响应式网页设计。SVG 文件可以用 CSS 设置样式，用 JavaScript 操作，并包含无障碍功能。现代浏览器原生支持 SVG，它可以直接嵌入 HTML 或用作图像源。
主要特点
- 基于矢量 - 无限缩放而不损失质量
- XML 格式 - 人类可读且可作为文本编辑
- 支持 CSS 样式和 JavaScript 操作
- 简单图形的文件大小比光栅图像更小
- 浏览器原生支持，无需插件
- 支持动画、交互性和无障碍功能
常见用途
- 网站徽标和图标
- 响应式网页图形
- 数据可视化和图表
- 交互式图表和地图
- 印刷质量的插图
示例
loading...
Loading code...常见问题
SVG 和 PNG 有什么区别？
SVG 是使用数学描述的矢量格式，可以无限缩放而不损失质量；而 PNG 是由像素组成的光栅格式，放大后会变模糊。SVG 适合徽标和图标；PNG 更适合照片。
可以用文本编辑器编辑 SVG 文件吗？
可以。SVG 文件基于 XML 且人类可读，因此可以用任何文本编辑器打开和编辑。可以直接在代码中修改形状、颜色、路径和添加动画。
如何在 HTML 页面中包含 SVG？
可以通过多种方式在 HTML 中包含 SVG：直接在 HTML 中内联 SVG、作为 img src、作为 CSS 背景图片、使用 object 或 embed 标签，或通过 iframe。内联 SVG 允许 CSS 样式和 JavaScript 操作。
为什么我的 SVG 文件比预期的大？
SVG 文件可能因为不必要的元数据、复杂的路径、嵌入的光栅图像或设计工具生成的低效代码而变大。使用 SVG 优化工具可以删除不必要的数据并简化路径。
SVG 图像可以做成动画吗？
可以。SVG 支持通过 SMIL（同步多媒体集成语言）、CSS 动画或 JavaScript 实现动画。可以为任何 SVG 属性（包括位置、大小、颜色和路径形状）添加动画效果。