title: I need help minimizing instances of SVG gradients
body: <p>I have a logo I created in Illustrator that I'm manually crafting into an SVG file piece by piece.  It's a highly detailed illustration with lots of layering and blending so I have a lot of repeated gradients that only differ in the values of the <code>gradientTransform</code> property.</p>
  
  <p>Here's an example</p>
  
  <pre><code>&lt;radialGradient id="sil_bor_clr_layer_01" cx="145.8111" cy="91.9766" r="5.5753" gradientTransform="matrix(1.665142e-02 -0.9999 1.0812 1.800584e-02 43.939 236.1114)" gradientUnits="userSpaceOnUse"&gt;
      &lt;stop  offset="0" style="stop-color:#FFFFFF"/&gt;
      &lt;stop  offset="0.6007" style="stop-color:#DBE2E8"/&gt;
      &lt;stop  offset="1" style="stop-color:#C0CDD8"/&gt;
  &lt;/radialGradient&gt;
  
  &lt;radialGradient id="sil_bor_clr_layer_02" cx="121.087" cy="94.1915" r="6.7356" gradientTransform="matrix(-0.1704 -0.9854 0.917 -0.1586 55.3406 228.4433)" gradientUnits="userSpaceOnUse"&gt;
      &lt;stop  offset="0" style="stop-color:#FFFFFF"/&gt;
      &lt;stop  offset="0.6007" style="stop-color:#DBE2E8"/&gt;
      &lt;stop  offset="1" style="stop-color:#C0CDD8"/&gt;
  &lt;/radialGradient&gt;
  
  &lt;radialGradient id="sil_bor_clr_layer_03" cx="98.1764" cy="102.6783" r="7.6206" gradientTransform="matrix(-0.5989 -0.8008 0.6381 -0.4771 91.458 230.294)" gradientUnits="userSpaceOnUse"&gt;
      &lt;stop  offset="0" style="stop-color:#FFFFFF"/&gt;
      &lt;stop  offset="0.6007" style="stop-color:#DBE2E8"/&gt;
      &lt;stop  offset="1" style="stop-color:#C0CDD8"/&gt;
  &lt;/radialGradient&gt;
  </code></pre>
  
  <p>I have another 21 elements that use this same gradient which means I'll have to define it 21 more times just for the sake of defining the <code>gradientTransform</code> property.</p>
  
  <p>Is there a way for me to define the <code>gradientTransform</code> on the SVG elements using the gradient so I can just define them once?  These particular elements have a color layer, shadow layer and highlight layer which will be about 60+ instances of the same thing which is pretty ridiculous.  I'm currently doing this in Angular so I know I could make components and export a few const to take care of this, but I'd prefer to keep it svg and css if possible.</p>