Search code examples
delphisvgdelphi-10.4-sydney

SVG color problem: RED color displayed as GRAY

I got this problematic SVG image:

 <?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>

In INKSCAPE, it is displayed correctly:

enter image description here

However, with other lower-quality SVG-Viewers (like e.g. my currently installed Windows SVG Shell-Extension and the Delphi SVGIconImageList VCL available in GetIt), it is displayed like this:

enter image description here

What has to be changed in the SVG XML to make it compatible even with lower-quality SVG-Viewers?

Solution

  • This is a very simple SVG. If we remove the unnecessary parts, it looks like this:

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

    The first one is the head; the second one is the tube. As you can see, the tube specifies its fill colour using both the SVG fill attribute and a CSS rule. And these differ!

    Non-browser renderers typically don't support CSS, so they read it like

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

    and so the tube becomes grey.

    On the other hand, a modern browser will give the CSS rule higher priority, so it will effectively use

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

    and so the tube becomes red.

    To make this into a high-compatibility SVG, simply remove the CSS (you very much don't need it!) and make sure to use the colour you want as the fill attribute.