咨询客服
SVG（二维矢量图形开放标准格式）
2026年08月10日 09:18
GISBox是一站式三维 GIS 数据编辑、转换、发布平台，支持 OSGB/GEOTIFF/RVT 等多种 GIS 格式编辑，转换为 3DTiles/Terrain 等并发布。
简介
SVG的中文全称为可缩放矢量图形，它是由W3C万维网联盟制定并维护的、基于XML的开放标准二维矢量图形置标语言，使用数学公式而非像素点阵来描述图形，能够实现任意尺寸无损缩放，文件体积通常远小于同等效果的JPEG、GIF等位图格式。它作为纯文本的XML文件，可直接用普通文本编辑器编辑修改，还能无缝对接CSS、JavaScript实现丰富的动画、交互效果，支持嵌入HTML网页，目前所有现代浏览器都对其提供原生支持，被广泛应用于网页图标、数据可视化、GIS地图、UI设计、矢量动画等多个场景。
文件结构
SVG文件本质是纯文本格式的XML文档，完整的文件结构可分为以下核心部分：
- XML声明（可选）：用于指定文件的XML版本和编码格式，在HTML中内嵌SVG时通常可以省略。
- 根元素<svg>：是整个SVG图像的容器，必须声明XML命名空间，可设置宽高、viewBox等核心属性定义绘图区域。
- 元信息元素：包含<title>和<desc>，分别用于设置图像标题和详细描述，提升可访问性。
- 定义区<defs>：用于存放可复用的图形资源，不会直接渲染，支持定义渐变、滤镜、裁剪路径、可复用图标等内容。
- 可渲染图形元素：是SVG的核心绘图部分，包含矩形、圆形、路径、文本等各类基础图形，直接在画布上显示。
- 辅助功能元素：包含<style>、<script>、<g>等，分别用于嵌入CSS样式、JavaScript交互脚本，以及对图形元素进行分组管理。
优点
- 无损缩放：作为矢量格式，任意放大缩小都不会出现像素模糊，适配不同分辨率的显示设备。
- 文件体积小：简单图形仅用数学公式描述，无需存储像素数据，比同效果的PNG/JPG体积更小。
- 可编辑可搜索：基于XML纯文本结构，用普通文本编辑器就能修改图形属性，内容可被搜索引擎索引。
- 交互与动画支持：可结合CSS、JavaScript、SMIL实现动态效果，支持事件响应，适合制作交互式地图、动态图表。
- 跨平台兼容：作为W3C开放标准，所有现代浏览器、主流操作系统都能原生支持，无需额外插件。
- 支持丰富特效：内置渐变、阴影、透明通道、滤镜等效果，无需借助外部软件就能实现复杂视觉表现。
缺点
- 复杂图形性能差：包含大量路径、节点的复杂图形，渲染时会占用大量资源，容易出现页面卡顿。
- 不适合摄影类图像：矢量描述逻辑无法高效处理照片这类细节丰富的光栅图像，嵌入位图后优势会大幅削弱。
- 复杂图形体积膨胀：图形元素过多时，文本格式的文件体积会快速增大，加载速度变慢。
- 存在安全风险：支持嵌入JavaScript代码，恶意文件可能携带跨站脚本攻击，用户上传场景需额外校验。
- 旧环境兼容性差：老旧版本的IE浏览器对SVG的支持不完整，部分特殊效果无法正常显示。
- 像素级控制不足：基于矢量逻辑，无法像位图那样精准控制单个像素，不适合精细的像素级图像编辑。
应用场景
SVG的应用场景覆盖了网页开发、数据可视化、GIS地图、UI设计等多个领域，在WebGIS和数据可视化领域，它常和D3.js结合实现高精度、高交互性的中小规模地图可视化，支持点击弹窗、悬停高亮、动态tooltip等丰富交互，也能作为自定义图标格式在GeoServer、ArcGIS Pro等GIS软件中制作统一的地图标识系统，还可用于时态GIS数据的存储与动态解析，提升时空数据的管理效率。在通用场景中，它被广泛用于网页矢量图标、可缩放矢量插画、动态数据图表、响应式UI界面元素，还能通过CSS和JavaScript实现轻量动画效果，适配任意分辨率的显示设备，同时凭借纯文本的开放特性，也常被用于无障碍网页内容制作，方便屏幕阅读器识别图形中的文本信息。
示例图
1. 基础SVG形状，包含矩形、圆形、椭圆、线条、折线和多边形元素。
2. SVG动画示例。
文件打开方式
1. 用Pixso打开SVG文件。
