<solidcolor>

The <solidColor> SVG element lets authors define a single color for use in multiple places in an SVG document.

<solidColor> is an experimental technology, and not yet implemented in browsers. A workaround is to use a linearGradient with only one color stop. This is less elegant, and, unlike solidColor, cannot itself be used in the definition of gradients.

SVG using solidColor

HTML Content

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" height="150">
   <defs>
      <!-- solidColor is experimental. -->
      <solidColor id="myColor" solid-color="gold" solid-opacity="0.8"/>
      
      <!-- linearGradient with a single color stop is a less elegant way to 
           achieve the same effect, but it works in current browsers. -->
      <linearGradient id="myGradient">
         <stop offset="0" stop-color="green" />
      </linearGradient>
   </defs>
   
   <text x="10" y="20">Circles colored with solidColor</text>
   <circle cx="150" cy="65" r="35" stroke-width="2" stroke="url(#myColor)" fill="white"/>
   <circle cx="50" cy="65" r="35" fill="url(#myColor)"/>

   <text x="10" y="120">Circles colored with linearGradient</text>
   <circle cx="150" cy="165" r="35" stroke-width="2" stroke="url(#myGradient)" fill="white"/>
   <circle cx="50" cy="165" r="35" fill="url(#myGradient)"/>
</svg>

Result