: Gradient rendered differently in Inkscape (PNG export) and browser I have created an image with Inkscape. This is how it looks in Inkscape and when exported as a PNG image: But when I try

@Phylliss782

Posted in: #Browser #Export #Gradient #Inkscape #Svg

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



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



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


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?

Vote Up Vote Down

Login to post a comment!