SVG代码优化器 - 在线精简SVG文件体积

术语解释

以下列出了与SVG代码优化相关的专业术语及其详细解释，帮助您更好地理解和使用本工具。

SVG（Scalable Vector Graphics）

可缩放矢量图形，是一种基于XML的二维矢量图形格式。SVG使用数学方程式描述图形元素，因此可以无损缩放到任意大小而不失真。SVG文件本质上是纯文本的XML代码，可以直接在浏览器中渲染，是Web前端开发中图标和插图的首选格式。

路径（Path）

SVG中最基本和最强大的绘图元素，使用M、L、C、Z等命令定义几何路径。路径数据由一系列坐标值和控制点组成，可以绘制直线、曲线、弧线等任意形状。在SVG优化中，路径合并是将多个独立path元素合并为单一路径以减小DOM节点数量的技术。

冗余属性

指SVG代码中对最终渲染结果没有实际贡献的属性。常见类型包括：与默认值相同的属性（如「fill-rule="nonzero"」是默认值可以删除）、编辑器专属的自定义属性（如「data-name」、「data-sketch」等）、以及不影响显示的格式化属性。移除这些属性是SVG优化的核心操作之一。

元数据（Metadata）

嵌入在SVG文件中的描述性信息，通常以「metadata」元素包裹。包含文件的创建工具版本、编辑历史、版权信息、ICC颜色配置文件等。这些信息在设计阶段有参考价值，但在Web生产环境中完全不需要，移除它们可以有效减小文件体积。

无损压缩

一种在不改变数据完整性和视觉效果的前提下减小文件体积的优化技术。对于SVG的无损压缩，意味着优化后的代码在浏览器中渲染的结果与原始代码完全一致——每一个像素、每一条路径、每一种颜色都不会发生变化。区别于有损压缩（如JPEG降低图片质量），无损压缩是完全可逆的。

DOM节点

Document Object Model节点，是浏览器解析HTML和SVG时创建的树形结构中的每个元素。SVG中的每个g、path、rect、circle等元素都会形成一个DOM节点。DOM节点数量越多，浏览器渲染SVG时的计算开销越大。路径合并通过减少DOM节点数量来提升渲染性能。

矢量图形与位图

矢量图形使用数学方程式描述图形，由点、线、曲线等几何元素组成，可以无损缩放而不失真，SVG正是典型的矢量格式。位图（栅格图像）由像素点阵组成，如JPEG、PNG格式，放大时会出现锯齿和模糊。SVG优化只涉及矢量数据的代码精简，不涉及像素处理。

坐标精度

SVG路径数据中坐标值的小数位数。默认的SVG编辑器通常输出高精度坐标（如保留6位小数），但人眼的视觉分辨能力有限，过高的精度对渲染质量没有可见贡献却增加了文件体积。SVG优化器通过降低坐标精度来减小数字字符数量，从而压缩文件大小。

浏览器兼容性

不同浏览器对SVG标准的支持程度存在差异。Chrome、Firefox、Edge等现代浏览器对SVG 1.1和SVG 2的大部分特性都有良好支持，但某些高级特性（如SVG动画、滤镜、混合模式）在旧版浏览器中可能不被支持。SVG优化器在移除属性时会考虑浏览器兼容性，确保优化后的代码在主流浏览器中正常渲染。