SVG 颜色问题：红色显示为灰色

Question

我得到了这个有问题的 SVG 图像：

 <?xml version="1.0" encoding="utf-8" standalone="no"?>
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="Layer_1" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve" sodipodi:docname="tool-eye-dropper.svg" inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
      <metadata id="metadata12">
        <rdf:RDF>
          <cc:Work rdf:about="">
            <dc:format>
              image/svg+xml
            </dc:format>
            <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
          </cc:Work>
        </rdf:RDF>
      </metadata>
      <defs id="defs10" />
      <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1213" inkscape:window-height="942" id="namedview8" showgrid="false" inkscape:zoom="31.5" inkscape:cx="8" inkscape:cy="9.4708995" inkscape:window-x="347" inkscape:window-y="176" inkscape:window-maximized="0" inkscape:current-layer="icon" />
      <g id="icon">
        <path d="M12.828,7.837c-0.307,0,-0.596,-0.118,-0.813,-0.332l-3.737,-3.68c-0.448,-0.442,-0.448,-1.16,0,-1.602c0.217,-0.214,0.506,-0.332,0.813,-0.332c0.307,0,0.596,0.118,0.813,0.332l0.231,0.227c0.045,-0.158,0.13,-0.302,0.251,-0.421c0.01,-0.01,1.02,-1.002,1.084,-1.06C12.177,0.336,12.956,0,13.722,0c0.917,0,1.712,0.494,2.075,1.29c0.436,0.956,0.161,2.122,-0.738,3.119c-0.075,0.083,-1.112,1.108,-1.123,1.118c-0.121,0.119,-0.267,0.203,-0.427,0.247l0.132,0.13c0.448,0.442,0.448,1.16,0,1.602C13.424,7.72,13.135,7.837,12.828,7.837z" fill-rule="evenodd" fill="#3E79B4" id="path2" />
        <path d="M0.673,16c-0.26,0,-0.508,-0.176,-0.619,-0.439c-0.105,-0.249,-0.055,-0.508,0.132,-0.693c1.038,-1.022,1.585,-1.79,2.277,-2.762c1.061,-1.491,2.082,-3.046,5.871,-6.777l0.101,-0.099l0.102,0.097c0.763,0.723,1.03,0.991,1.266,1.227c0.225,0.225,0.402,0.402,0.942,0.907l0.108,0.101l-0.105,0.103c-3.925,3.865,-5.47,4.888,-6.953,5.952c-0.934,0.67,-1.672,1.199,-2.674,2.186C0.99,15.932,0.835,16,0.673,16z" fill-rule="evenodd" fill="#797979" id="path4" style="fill:#ff0000" />
      </g>
    </svg>

在INKSCAPE中，正确显示：

但是，对于其他质量较低的 SVG-Viewer（例如我当前安装的 Windows SVG Shell-Extension 和 GetIt 中可用的 Delphi SVGIconImageList VCL），它显示如下：

必须对 SVG XML 进行哪些更改才能使其与质量较低的 SVG-Viewer 兼容？

Answer 1

这是一个非常简单的 SVG。如果我们去掉不需要的部分，它看起来是这样的：

<path d="..." fill-rule="evenodd" fill="#3E79B4" id="path2" />
<path d="..." fill-rule="evenodd" fill="#797979" id="path4" style="fill:#ff0000" />

第一个是头部；第二个是管子。如您所见，管使用 SVG fill 属性和 CSS 规则指定其填充颜色。而这些不同！

非浏览器渲染器通常不支持 CSS，所以它们读起来就像

<path d="..." fill-rule="evenodd" fill="#3E79B4" id="path2" />
<path d="..." fill-rule="evenodd" fill="#797979" id="path4" />

所以管子变成灰色。

另一方面，现代浏览器会给 CSS 规则更高的优先级，所以它会有效地使用

<path d="..." fill-rule="evenodd" fill="#3E79B4" id="path2" />
<path d="..." fill-rule="evenodd" style="fill:#ff0000" id="path4" />

所以管子变成红色。

要使其成为高兼容性 SVG，只需删除 CSS（您非常不需要它！）并确保使用您想要的颜色作为 fill 属性。

Answer 2

矢量编辑器 Inkscape 给 SVG 文件增加了很多开销。
正如您的示例中的实践所示，这会干扰某些 SVG 文件查看器的高质量渲染。

有一个简单的方法可以解决这个问题，并且仍然可以显着减小文件大小 - 使用 SVG 代码优化器 SVGOMG

优化后的 SVG 文件：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="30%" height="30%" viewBox="0 0 16 16">
  <g id="icon" fill-rule="evenodd" >
    <path d="M12.8 7.8c-.3 0-.6 0-.8-.3L8.3 3.8c-.5-.4-.5-1.1 0-1.6.2-.2.5-.3.8-.3.3 0 .6.1.8.3l.2.2.3-.4 1-1c.8-.7 1.6-1 2.3-1 1 0 1.7.5 2.1 1.3.4 1 .2 2.1-.7 3.1a127 127 0 01-1.6 1.4l.1.1c.5.4.5 1.2 0 1.6-.2.2-.5.3-.8.3z" fill="#3E79B4" id="path2"/>
    <path d="M.7 16a.7.7 0 01-.6-.4c-.2-.3-.1-.5 0-.7 1.1-1 1.7-1.8 2.4-2.8 1-1.5 2-3 5.8-6.8h.2l1.3 1.3 1 .9v.2c-4 3.8-5.5 4.9-7 6-1 .6-1.7 1.1-2.7 2.1l-.4.2z" fill="red" id="path4"/>
  </g>
</svg>