<solidcolor>

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The <solidcolor> SVG element lets authors define a single color for use in multiple places in an SVG document. It is also useful as away of animating a palette colors.

Note: This 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.

Usage context

missing

Attributes

Global attributes

Specific attributes

None.

DOM interface

This element implements the SVGSolidcolorElement interface.

Example

SVG

<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

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of '<solidcolor>' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support No ? ? ? No ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No No ? ? No ? ?

See also

Document Tags and Contributors

Contributors to this page: fscholz, Sebastianz, david_ross, y6nH
Last updated by: fscholz,