SVG 的两个痛点

小麦2025年05月21日1485 字

说说我遇到的 SVG 的两个痛点，以及对应解法的探索。

SVG 图形渲染#

SVG 的全称是 Scalable Vector Graphics，即可缩放矢量图形。它可以使用 XML 来描述图形中每个 “部件” 的属性，比如位置、大小、颜色等。

比如 Google Logo 对应的 SVG 代码：

google.svg

<svg class="lnXdpd" height="92" viewBox="0 0 272 92" width="272" xmlns="http://www.w3.org/2000/svg">
  <path d="M115.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18C71.25 34.32 81.24 25 93.5 25s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44S80.99 39.2 80.99 47.18c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z" fill="#EA4335"/>
  <path d="M163.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18c0-12.85 9.99-22.18 22.25-22.18s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44s-12.51 5.46-12.51 13.44c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z" fill="#FBBC05"/>
  <path d="M209.75 26.34v39.82c0 16.38-9.66 23.07-21.08 23.07-10.75 0-17.22-7.19-19.66-13.07l8.48-3.53c1.51 3.61 5.21 7.87 11.17 7.87 7.31 0 11.84-4.51 11.84-13v-3.19h-.34c-2.18 2.69-6.38 5.04-11.68 5.04-11.09 0-21.25-9.66-21.25-22.09 0-12.52 10.16-22.26 21.25-22.26 5.29 0 9.49 2.35 11.68 4.96h.34v-3.61h9.25zm-8.56 20.92c0-7.81-5.21-13.52-11.84-13.52-6.72 0-12.35 5.71-12.35 13.52 0 7.73 5.63 13.36 12.35 13.36 6.63 0 11.84-5.63 11.84-13.36z" fill="#4285F4"/>
  <path d="M225 3v65h-9.5V3h9.5z" fill="#34A853"/>
  <path d="M262.02 54.48l7.56 5.04c-2.44 3.61-8.32 9.83-18.48 9.83-12.6 0-22.01-9.74-22.01-22.18 0-13.19 9.49-22.18 20.92-22.18 11.51 0 17.14 9.16 18.98 14.11l1.01 2.52-29.65 12.28c2.27 4.45 5.8 6.72 10.75 6.72 4.96 0 8.4-2.44 10.92-6.14zm-23.27-7.98l19.82-8.23c-1.09-2.77-4.37-4.7-8.23-4.7-4.95 0-11.84 4.37-11.59 12.93z" fill="#EA4335"/>
  <path d="M35.29 41.41V32H67c.31 1.64.47 3.58.47 5.68 0 7.06-1.93 15.79-8.15 22.01-6.05 6.3-13.78 9.66-24.02 9.66C16.32 69.35.36 53.89.36 34.91.36 15.93 16.32.47 35.3.47c10.5 0 17.98 4.12 23.6 9.49l-6.64 6.64c-4.03-3.78-9.49-6.72-16.97-6.72-13.86 0-24.7 11.17-24.7 25.03 0 13.86 10.84 25.03 24.7 25.03 8.99 0 14.11-3.61 17.39-6.89 2.66-2.66 4.41-6.46 5.1-11.65l-22.49.01z" fill="#4285F4"/>
</svg>

SVG 很适合展示图标、logo，也常用于 WEB 图形渲染的底层表示。使用 SVG 最大的收益就是能呈现无损图像。

现在也有人用 LLM 来生成简单的 SVG 图形，后期编辑起来也比较容易。

SVG 的痛点#

SVG 的缺点也有很多，但这里主要说说我遇到的两点问题。

痛点一：无法高效压缩#

对于需要展示复杂图形的场景，SVG 的大小会是一个问题。

目前常见的 SVG “压缩” 方案往往是：剔除 XML 中冗余信息（换行、空格、未使用的元素、共享样式表），但收效甚微。

普通图形的压缩算法并不适用于 XML，当文件大小超过 20 KB 时，使用传统图形格式（JPEG、PNG）搭配压缩工具的收益要高于 SVG。

举个例子：

如果可以在 SVG 上应用现有的压缩算法（deflate、gzip）也许能解决这个问题。

这要求 SVG 渲染程序能识别并采用统一的标准对压缩后的数据进行解压，就像传统图片格式有对应的行业标准一样。

痛点二：无法加入有效水印#

对于需要版权保护的场景，给 SVG 加入有效水印似乎是一件很难办的事情。这里的 “有效水印” 是指难以通过简单办法去除的水印。

当前给 SVG 加水印的方案往往是改变 SVG 的 XML 结构，在其中添加水印内容，当然这种方式不能算作 “有效水印”。

这里我用 AI 探索了一下文本水印的方案，我用的模型是 gemini-2.5-pro，提示词是：

给这张 svg 图片添加水印文本 "水印"，斜 -45 度全图覆盖。

AI 给出的方案其实很简单：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1364 960">
+  <defs>
+    <pattern id="watermark" width="250" height="250" patternUnits="userSpaceOnUse" patternTransform="rotate(-45 125 125)">
+      <text x="125" y="125" font-size="30" fill="grey" fill-opacity="0.3" text-anchor="middle" dominant-baseline="middle">水印</text>
+    </pattern>
+  </defs>
   <path fill="#2164A6"
    d="M240.054 556.372a.657.657 0 0 1-.172.006 49.526 49.526 0 0 1-7.12-1.266c-.426-.11-.
    ...
+  <rect width="100%" height="100%" fill="url(#watermark)" />
</svg>

也有一些工具另辟蹊径，先将 SVG 整个转成 png，加水印后再转成 base64，最后内联到 SVG 中：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="body_1" width="272" height="92">
  <g transform="matrix(1.3333334 0 0 1.3333334 0 0)">
    <image x="0" y="0" xlink:href="data:image/png;base64,iVBORw0KGgoAAAA..." preserveAspectRatio="none" width="204" height="69"/>
  </g>
</svg>

这种方法加是加了，但代价是失去了 SVG 的核心优势。

大家能想到哪些办法解决这两个问题？欢迎讨论。

SVG 图形渲染#

SVG 的痛点#

痛点一：无法高效压缩#

痛点二：无法加入有效水印#

评论