SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式,具有以下核心特性:
1. 矢量特性
- SVG 使用数学描述(路径、形状、文本)来定义图形,而不是像素
- 可以无限缩放而不失真,在任何分辨率下都保持清晰
- 文件大小通常比位图格式(如PNG、JPG)更小
2. XML 基础
- SVG 是基于 XML 的标记语言,可以直接嵌入 HTML
- 可以通过 CSS 和 JavaScript 进行样式化和交互操作
- 支持标准的 DOM 操作和事件处理
3. 可访问性
- SVG 内容可以被搜索引擎索引
- 支持屏幕阅读器,提供更好的无障碍体验
- 可以添加 title 和 desc 元素提供描述信息
4. 性能优势
- 可以通过 gzip 压缩进一步减小文件大小
- 支持渐进式渲染
- 可以内联在 HTML 中,减少 HTTP 请求
5. 动画和交互
- 支持 SMIL 动画和 CSS 动画
- 可以通过 JavaScript 实现复杂的交互效果
- 支持事件监听器(click、hover 等)
6. 浏览器兼容性
- 所有现代浏览器都原生支持 SVG
- 可以作为 img、object、embed 或内联元素使用
- 移动设备兼容性良好
SVG 特别适合用于图标、图表、logo、插画等需要高质量缩放的图形场景。