Skip to content

Inkscape gradients not rendering #97

Description

@hash404

Gradients made in Inkscape don't always render properly with flutter_svg.

Here is what the SVG looks like with version 0.9.0+1 of flutter_svg:

Here is what it should look like (verified in web browser, Inkscape and Android Studio's SVG preview):

Inkscape version:

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

<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: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="356.78598"
   height="356.78598"
   viewBox="0 0 94.399622 94.399627"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.2 5c3e80d, 2017-08-06"
   sodipodi:docname="gradient.svg">
  <defs
     id="defs2">
    <linearGradient
       inkscape:collect="always"
       id="linearGradient829">
      <stop
         style="stop-color:#ff02ce;stop-opacity:1"
         offset="0"
         id="stop825" />
      <stop
         style="stop-color:#ffef3a;stop-opacity:1"
         offset="1"
         id="stop827" />
    </linearGradient>
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient829"
       id="linearGradient831"
       x1="-157.99403"
       y1="122.75297"
       x2="-9.071434"
       y2="122.75297"
       gradientUnits="userSpaceOnUse" />
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient829"
       id="linearGradient916"
       gradientUnits="userSpaceOnUse"
       x1="-157.99403"
       y1="122.75297"
       x2="-9.071434"
       y2="122.75297" />
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.7"
     inkscape:cx="116.40809"
     inkscape:cy="239.7796"
     inkscape:document-units="mm"
     inkscape:current-layer="g914"
     showgrid="false"
     inkscape:window-width="1440"
     inkscape:window-height="818"
     inkscape:window-x="0"
     inkscape:window-y="1"
     inkscape:window-maximized="1"
     units="px"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0" />
  <metadata
     id="metadata5">
    <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:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(2.9777116,-102.81465)">
    <g
       id="g884">
      <g
         id="g914"
         transform="matrix(0.63388377,0,0,0.63388377,97.172147,72.203346)">
        <circle
           r="74.461304"
           cy="122.75297"
           cx="-83.532738"
           id="path815"
           style="opacity:1;fill:url(#linearGradient916);fill-opacity:1;stroke:none;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
      </g>
    </g>
  </g>
</svg>

Compressed version (without any Inkscape metadata):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 94.4 94.4">
  <defs>
    <linearGradient id="a">
      <stop offset="0" stop-color="#ff02ce"/>
      <stop offset="1" stop-color="#ffef3a"/>
    </linearGradient>
    <linearGradient id="b" x1="-157.994" x2="-9.071" y1="122.753" y2="122.753" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
  </defs>
  <circle cx="-83.533" cy="122.753" r="74.461" fill="url(#b)" transform="matrix(.63388 0 0 .63388 100.15 -30.611)"/>
</svg>

Both versions don't work with the current build but can't figure out why some other SVGs with gradients work fine.

Issue related to #49 and #4

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions