5

I have created an image with Inkscape. This is how it looks in Inkscape and when exported as a PNG image:

PrivateBin icon - Inkscape

But when I try to display it as an SVG the gradient looks drastically different:

PrivateBin icon - SVG

In case it does not look differently for you, here is a screenshot of the SVG file: PrivateBin icon - SVG screenshot

SVG file (on GitHub):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
   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:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="500"
   height="500"
   viewBox="0 0 500 500"
   id="svg2"
   version="1.1">
  <defs
     id="defs4">
    <linearGradient
       inkscape:collect="always"
       id="linearGradient7636">
      <stop
         style="stop-color:#ffab00;stop-opacity:1"
         offset="0"
         id="stop7664" />
      <stop
         id="stop4188"
         offset="0.20623536"
         style="stop-color:#ffa500;stop-opacity:1" />
      <stop
         style="stop-color:#ffab00;stop-opacity:1"
         offset="0.2469174"
         id="stop4190" />
      <stop
         style="stop-color:#ff8800;stop-opacity:1"
         offset="1"
         id="stop7666" />
    </linearGradient>
    <linearGradient
       id="linearGradient7620"
       osb:paint="solid">
      <stop
         style="stop-color:#fcff00;stop-opacity:1;"
         offset="0"
         id="stop7622" />
    </linearGradient>
    <radialGradient
       xlink:href="#linearGradient7636"
       id="radialGradient7642"
       cx="250"
       cy="250.00003"
       fx="250"
       fy="250.00003"
       r="229.85291"
       gradientTransform="matrix(1.3983125,1.4831815e-7,-1.507182e-7,1.4209396,-99.578086,-105.23497)"
       gradientUnits="userSpaceOnUse"
       spreadMethod="pad" />
    <filter
       style="color-interpolation-filters:sRGB;"
       id="filter9316">
      <feGaussianBlur
         result="result1"
         stdDeviation="3"
         id="feGaussianBlur9318" />
      <feBlend
         in2="result1"
         result="result5"
         mode="multiply"
         in="result1"
         id="feBlend9320" />
      <feGaussianBlur
         in="result5"
         result="result6"
         stdDeviation="1"
         id="feGaussianBlur9322" />
      <feComposite
         result="result8"
         in2="result5"
         in="result6"
         operator="xor"
         id="feComposite9324" />
      <feComposite
         in="result6"
         result="fbSourceGraphic"
         operator="xor"
         in2="result8"
         id="feComposite9326" />
      <feSpecularLighting
         in="fbSourceGraphic"
         result="result1"
         lighting-color="rgb(255,255,255)"
         surfaceScale="2"
         specularConstant="2.2"
         specularExponent="55"
         id="feSpecularLighting9328">
        <fePointLight
           x="-5000"
           y="-10000"
           z="20000"
           id="fePointLight9330" />
      </feSpecularLighting>
      <feComposite
         in2="fbSourceGraphic"
         in="result1"
         result="result2"
         operator="in"
         id="feComposite9332" />
      <feComposite
         in="fbSourceGraphic"
         result="result4"
         operator="arithmetic"
         k2="2"
         k3="1"
         in2="result2"
         id="feComposite9334" />
      <feComposite
         in2="result4"
         in="result4"
         operator="in"
         result="result91"
         id="feComposite9336" />
      <feBlend
         mode="darken"
         in2="result91"
         id="feBlend9338" />
    </filter>
    <pattern
       patternUnits="userSpaceOnUse"
       width="150.00683"
       height="75.64963"
       patternTransform="translate(-105.5802,590.28444)"
       id="pattern9832">
      <rect
         y="2.7309999"
         x="2.7309999"
         height="70.18763"
         width="144.54483"
         id="rect9830"
         style="opacity:1;fill:#ebee00;fill-opacity:0.69724767;fill-rule:nonzero;stroke:#000000;stroke-width:5.46199989;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
    </pattern>
    <filter
       id="filter9316-8"
       style="color-interpolation-filters:sRGB;">
      <feGaussianBlur
         id="feGaussianBlur9318-0"
         stdDeviation="3"
         result="result1" />
      <feBlend
         id="feBlend9320-6"
         in="result1"
         mode="multiply"
         result="result5"
         in2="result1" />
      <feGaussianBlur
         id="feGaussianBlur9322-8"
         stdDeviation="1"
         result="result6"
         in="result5" />
      <feComposite
         id="feComposite9324-0"
         operator="xor"
         in="result6"
         in2="result5"
         result="result8" />
      <feComposite
         id="feComposite9326-9"
         in2="result8"
         operator="xor"
         result="fbSourceGraphic"
         in="result6" />
      <feSpecularLighting
         id="feSpecularLighting9328-2"
         specularExponent="55"
         specularConstant="2.2"
         surfaceScale="2"
         lighting-color="rgb(255,255,255)"
         result="result1"
         in="fbSourceGraphic">
        <fePointLight
           id="fePointLight9330-6"
           z="20000"
           y="-10000"
           x="-5000" />
      </feSpecularLighting>
      <feComposite
         id="feComposite9332-7"
         operator="in"
         result="result2"
         in="result1"
         in2="fbSourceGraphic" />
      <feComposite
         id="feComposite9334-8"
         in2="result2"
         k3="1"
         k2="2"
         operator="arithmetic"
         result="result4"
         in="fbSourceGraphic" />
      <feComposite
         id="feComposite9336-2"
         result="result91"
         operator="in"
         in="result4"
         in2="result4" />
      <feBlend
         id="feBlend9338-7"
         in2="result91"
         mode="darken" />
    </filter>
    <pattern
       id="pattern9832-3"
       patternTransform="translate(-105.5802,590.28444)"
       height="75.64963"
       width="150.00683"
       patternUnits="userSpaceOnUse">
      <rect
         style="opacity:1;fill:#ebee00;fill-opacity:0.69724767;fill-rule:nonzero;stroke:#000000;stroke-width:5.46199989;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         id="rect9830-3"
         width="144.54483"
         height="70.18763"
         x="2.7309999"
         y="2.7309999" />
    </pattern>
  </defs>
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
        <cc:license
           rdf:resource="https://creativecommons.org/licenses/by/4.0/" />
        <dc:rights>
          <cc:Agent>
            <dc:title>rugk</dc:title>
          </cc:Agent>
        </dc:rights>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1"
     transform="translate(0,-552.36219)">
    <path
       style="opacity:1;fill:url(#radialGradient7642);fill-opacity:1;stroke:#000000;stroke-width:15.67965698;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;filter:url(#filter9316)"
       d="M 250.41797,3.1582031 23.300781,126.23828 22.880859,373.07812 249.58203,496.8418 476.69922,373.76172 477.11914,126.92188 Z m -0.71094,97.8652369 0,0.006 c 3.78018,0 7.60386,0.29655 11.45703,0.875 41.10089,6.16576 72.18274,40.63955 66.38414,70.45619 -5.7986,29.81664 -33.27979,55.97822 -40.0849,61.67271 -6.80511,5.69448 37.09529,164.94336 37.09529,164.94336 l -74.07421,0 -1.06836,0 -73.97657,0 c 0,0 46.18084,-156.80132 36.48594,-164.94336 -9.69491,-8.14204 -41.19767,-36.87188 -36.38828,-68.93554 4.80939,-32.06366 37.62649,-63.97482 74.16992,-64.07422 z"
       transform="matrix(0.95665359,0,0,0.95665359,10.836603,563.19879)"
       id="path4140" />
  </g>
</svg>

Tested with the following browsers: Firefox 47.0.1 and a Chromium-based browser with the same result

So why does it look differently? And how can I fix that?

1 Answer 1

2

So a collaborator finally fixed this. The issue was that the gradient used pixels, which can apparently not be rendered by mayor browsers.

So changing the gradient to this XML fixed it:

<radialGradient
   inkscape:collect="always"
   xlink:href="#linearGradient7636"
   id="radialGradient7642"
   cx="50%"
   cy="50%"
   fx="50%"
   fy="50%"
   r="40%"
   spreadMethod="pad" />

This is how it looks now:

screenshot

screenshot png

However as this is quite unexpected behaviour I have opened a bug in the Inkscape issue tracker. If someone experiences this problem too, you can comment there or click on "Also affects...".

2
  • Screenshot and live version differ the same way as in the question. Firefox 49.0, Chrome 54.0.2840.59, gPicView 0.2.4, eyeOfGnome 3.10.2, and Gimp 2.8.10 on Linux Mint 17.3.
    – Socowi
    Oct 19, 2016 at 20:11
  • Yeah, I've removed the live version here. It included the file from GitHub, where we had fixed the issue, so that it showed the wrong image.
    – rugk
    Oct 25, 2016 at 13:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.