css 如何降低SVG文件的质量或提高渲染性能?

kuuvgm7e  于 2023-03-14  发布在  其他
关注(0)|答案(2)|浏览(151)

我有一个50MB的SVG文件
预览:

我已经创建了这个放大和缩小功能来放大和缩小SVG图像,但不幸的是,它变得非常滞后。
有没有办法把这个大文件SVG文件转换成一个较小的SVG文件大小。
因此,我想知道我们是否可以通过一个按钮停止矢量图形处理(高CPU使用率,非常滞后)来调整SVG图像的分辨率,这有望阻止SVG文件在放大和缩小或平移时滞后?
任何帮助或建议都会对我极其有用:)
我已经尝试了很多在线压缩器,但不幸的是,他们都不能处理这个巨大的文件大小)。

xzlaal3s

xzlaal3s1#

SVG可以很大,原因有很多:

1.不必要的高坐标精度(参见下面的说明)
1.嵌入的像素/栅格图像数据作为数据URI <image href="data:image/png;base64...">包含-因此svg实际上可以是 Package 在svg文件中的像素图像(可能未优化
1.文档开销例如,由专有** meta数据**引入
1.嵌入式字体类似于包含的图像-您还有一个巨大的base64编码数据块
1.隐藏元素:大多数应用程序在导出时不会删除隐藏的图层/元素
1.重复或过时的元素,不必要/未使用的样式定义(例如,由未充分优化的API/脚本输出导致)
1.过于具体的属性(包括可以省略的默认值,如fill="black"
1.**复杂性:**如果文件包含上万个元素-高分辨率光栅图像通常提供较小的文件大小和较好的渲染性能

SVG/矢量浮点精度与栅格分辨率

浮点精度可视为像素/光栅分辨率的一种等价物。

如果你通过舍入或计算缩小的值来缩小/优化svg(例如使用SVGOMG这样的工具),这一点很重要:

1.优化大型SVG元素

跨越1000 x1000单位、坐标精度为8位小数的svg元素可以安全地缩小。
使用整数值很可能会降低准确性。

2.优化小SVG元素

上图显示了一个字体Awesome图标。
左图:原始大小~ 512 x512
右图:缩放(重新计算)至25.6x25.6;四舍五入为整数
所以,可以无限高档的元素,而不损失质量.
但是你不能无限地舍入向量坐标-否则你会因为舍入误差而得到扭曲。

<p>Original - unnecessarily large</p>
<svg  viewBox="0 0 1000 1000">
<path d="M999.9999 499.99995C999.9999 776.14152399 776.14152399 999.9999 499.99995 999.9999C223.85739951 999.9999 0 776.14152399 0 499.99995C0 223.85739951 223.85739951 0 499.99995 0C776.14152399 0 999.9999 223.85739951 999.9999 499.99995Z"/>
</svg>
<p>Scaled down - rounded to 1 decimal; all relative commands</p>
<svg  viewBox="0 0 100 100">
<path d="M100 50c0 27.6-22.4 50-50 50s-50-22.4-50-50s22.4-50 50-50s50 22.4 50 50z"/>
</svg>

<p>Original</p>
<svg viewBox="0 0 512 512">
    <path d="M328.4 393.5C318.7 402.6 303.5 402.1 294.5 392.4C287.1 384.5 274.4 376 256 376C237.6 376 224.9 384.5 217.5 392.4C208.5 402.1 193.3 402.6 183.6 393.5C173.9 384.5 173.4 369.3 182.5 359.6C196.7 344.3 221.4 328 256 328C290.6 328 315.3 344.3 329.5 359.6C338.6 369.3 338.1 384.5 328.4 393.5zM144.4 240C144.4 231.2 147.9 223.2 153.7 217.4L122.9 207.2C114.6 204.4 110 195.3 112.8 186.9C115.6 178.6 124.7 174 133.1 176.8L229.1 208.8C237.4 211.6 241.1 220.7 239.2 229.1C236.4 237.4 227.3 241.1 218.9 239.2L208.1 235.6C208.3 237 208.4 238.5 208.4 240C208.4 257.7 194 272 176.4 272C158.7 272 144.4 257.7 144.4 240V240zM368.4 240C368.4 257.7 354 272 336.4 272C318.7 272 304.4 257.7 304.4 240C304.4 238.4 304.5 236.8 304.7 235.3L293.1 239.2C284.7 241.1 275.6 237.4 272.8 229.1C270 220.7 274.6 211.6 282.9 208.8L378.9 176.8C387.3 174 396.4 178.6 399.2 186.9C401.1 195.3 397.4 204.4 389.1 207.2L358.9 217.2C364.7 223 368.4 231.1 368.4 240H368.4zM0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464z"></path>
  </svg>

<p>Scale down - insufficient accuracy: rounded to integers</p>
<svg viewBox="0 0 25.6 25.6">
    <path d="M 16 20 c 0 0 -1 0 -2 0 c 0 0 -1 -1 -2 -1 c -1 0 -2 0 -2 1 c 0 0 -1 1 -2 0 c 0 0 -1 -1 0 -2 c 1 -1 2 -2 4 -2 c 2 0 3 1 4 2 c 0 0 0 1 0 2 z m -9 -8 c 0 0 0 -1 0 -1 l -2 -1 c 0 0 -1 -1 -1 -1 c 0 0 1 -1 1 -1 l 5 2 c 0 0 1 1 1 1 c 0 0 -1 1 -1 1 l -1 0 c 0 0 0 0 0 0 c 0 1 -1 2 -2 2 c -1 0 -2 -1 -2 -2 l 0 0 z m 11 0 c 0 1 -1 2 -2 2 c -1 0 -2 -1 -2 -2 c 0 0 0 0 0 0 l -1 0 c 0 0 -1 0 -1 -1 c 0 0 0 -1 1 -1 l 5 -2 c 0 0 1 0 1 1 c 0 0 0 1 -1 1 l -2 1 c 0 0 0 1 0 1 l 0 0 z m -18 1 c 0 -7 6 -13 13 -13 c 7 0 13 6 13 13 c 0 7 -6 13 -13 13 c -7 0 -13 -6 -13 -13 z m 13 10 c 6 0 10 -5 10 -10 c 0 -6 -5 -10 -10 -10 c -6 0 -10 5 -10 10 c 0 6 5 10 10 10 z"></path>
  </svg>

优化CAD应用程序中的大型绘图

也许,您的图形是打算用于像建筑标志,所以相当巨大的打印/输出大小。
如果您自己创建打印:

  • 搜索导出选项,如“缩放以适合”较小的打印/绘图输出尺寸(例如,将其缩小到US Paper或DIN A4的尺寸)
  • 也许您的应用程序允许降低输出浮点精度/准确度
  • 您也可以尝试使用优化的DFX/DXW到svg转换器,如nano
  • 也许你至少可以分割不同的图层像文本标签,线条,图例等分离svg文件使他们更易于编辑(渲染时不会崩溃)。

通常您需要删除层以防止它们被包含在SVG导出中-确保保存足够的备份状态。
如果您从建筑师/客户处收到文件:

也许创建者可以发送更紧凑的文件。

如果你已经成功地分割了层,你可能会得到3-4个单独的svg文件:
现在您可以尝试再次使用SVGOMG这样的优化器。
您也可以尝试在inkscape中打开文件以删除过多的组,这些组通常与许多不必要的转换结合在一起,如transform="matrix(1 0 0 1 0 0)"(不转换任何内容):

<svg viewBox="0 0 1000 1000">
  <g id="i-will-never-need-this-id-again" transform="matrix(1 0 0 1 0 0)" data-comment="unnecessary">
    <g id="i-will-never-need-this-id-again-nested1" transform="matrix(1 0 0 1 0 0)" data-comment="unnecessary">
      <g id="i-will-never-need-this-id-again-nested3" transform="matrix(1 0 0 1 0 0)" data-comment="unnecessary">
        <g id="i-will-never-need-this-id-again-nested4" transform="matrix(1 0 0 1 0 0)" data-comment="unnecessary">
          <path d="M999.9999 499.99995C999.9999 776.14152399 776.14152399 999.9999 499.99995 999.9999C223.85739951 999.9999 0 776.14152399 0 499.99995C0 223.85739951 223.85739951 0 499.99995 0C776.14152399 0 999.9999 223.85739951 999.9999 499.99995Z" fill="black" stroke-width="0" stroke="none" clip-rule="evenodd" fill-rule="evenodd" stroke-miterlimit="10" />
        </g>
      </g>
    </g>
  </g>
</svg>

<svg viewBox="0 0 1000 1000">
<path d="M999.9999 499.99995C999.9999 776.14152399 776.14152399 999.9999 499.99995 999.9999C223.85739951 999.9999 0 776.14152399 0 499.99995C0 223.85739951 223.85739951 0 499.99995 0C776.14152399 0 999.9999 223.85739951 999.9999 499.99995Z" />
</svg>

一个更精简的代码编辑器对于检查这些可能膨胀的文件是很方便的(例如windows notepad++)用途:最好禁用所有代码突出显示或代码自动完成。

优化渲染性能

通过<img>标记放置图形还可以提高渲染性能,因为超过10.000个矢量元素不会添加到DOM树中。
如果优化后的结果仍然太慢,也请参阅此帖子
"Create interactive map-like experience for big SVG file (non-map)"

p4tfgftt

p4tfgftt2#

我们不能简单地通过减小图像的大小来减小SVG的文件大小。SVG不是光栅图像。我们不能像压缩光栅图形那样压缩SVG。与其他类型的图像文件不同,SVG是点、曲线、填充和其他类似内容的集合。SVG不包含像素数据。光栅图像,如png、jpg、gif、bmp和其他,定义组成图像的像素,而SVG只包含点和对这些点的操作。您的示例 *.png文件是一个光栅图形,而不是SVG,但我猜您知道这一点。从示例的外观来看,如果实际上有一个SVG看起来像这样,那么我怀疑除了删除多余的空白来减少文件大小之外,你还能做些什么。
以这个SVG为例

<svg><path fill="#CCC" d="M 0 0 L 3 0 L 3 3 L 0 3 Z"/></svg>

在本例中,我们可以删除一些空格,如下所示

<svg><path fill="#CCC" d="M0 0 3 0 3 3 0 3Z"/></svg>

这将减少一点文件大小,但我有一种感觉,这不是你真实的的问题所在。我怀疑你的问题更可能源于你用来呈现SVG的方法。也许你可以分享一些关于你的缩放功能如何工作的东西。我希望你调整视图框来平移和缩放,而不是增长所有单独的SVG元素。

相关问题