Argthtjtr

I am trying to minify a SVG by hand. It uses two radial gradients which are the same, but with colors reversed.

<radialGradient id="a">

  <stop offset="0"  stop-color="#aadee8"/>

  <stop offset=".2" stop-color="#94d7e7"/>

  <stop offset=".5" stop-color="#6dcce9"/>

  <stop offset=".8" stop-color="#28b1e6"/>

  <stop offset="1"  stop-color="#27ace2"/>

</radialGradient>



<!-- Same colors, but opposite direction as #a -->

<radialGradient id="b">

  <stop offset="0"  stop-color="#27ace2"/>

  <stop offset=".2" stop-color="#28b1e6"/>

  <stop offset=".5" stop-color="#6dcce9"/>

  <stop offset=".8" stop-color="#94d7e7"/>

  <stop offset="1"  stop-color="#aadee8"/>

</radialGradient>

Is it possible to create an inverse copy by cloning a? I already tried <radialGradient xlink:href="#a" gradientTransform="scale(-1)" />, but that did not work out.

Here's a bit of trickery with the spreadMethod; it depends on the use of the fr attribute which was only introduced in SVG 2, so compatibility might be an issue.

The idea is to define the colors outside the intended outer radius and then define how it is continued further in. (Percentages are relative to the bounding box, so r="50%", the default, fits the outer radius to the border of the box if cx is in the middle.)

<svg width="200" height="100">

  <radialGradient id="a" r="100%" fr="50%">

    <stop offset="0"  stop-color="#aadee8"/>

    <stop offset=".2" stop-color="#94d7e7"/>

    <stop offset=".5" stop-color="#6dcce9"/>

    <stop offset=".8" stop-color="#28b1e6"/>

    <stop offset="1"  stop-color="#27ace2"/>

  </radialGradient>

  <radialGradient id="b" spreadMethod="repeat" xlink:href="#a" />

  <radialGradient id="c" spreadMethod="reflect" xlink:href="#a" />

  

  <circle r="50" cx="50" cy="50" fill="url(#b)" />

  <circle r="50" cx="150" cy="50" fill="url(#c)" />

</svg>