Svg styling support

Therere several ways to add styling to an element:

• By setting explicitly the value for styling attributes for an element. For example: fill="red"
• By setting the value for the style attribute for an element. For example: style="fill: red;"
• By setting the content for the style element. For example: <style>".st0{fill: red;}</style>"

Support for style attributes

The following style attributes elements are supported in the library^[1]

See Styling Effects

:

• fill. See also Gradients support
• stroke
• stroke properties
• font-family
• font-size
• font-weight
• font-style
• text-decoration
• baseline-shift on tspan elements
• opacity
• fill-opacity
• style
• class
• clipPath
• filter: see filters support

Note that the opacity and transform attributes are supported for all elements.

Example

   <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200">
      <g>
         <rect fill="red" width="100" height="100" x="50" y="50" />
      </g>
   </svg>

Support for styles specified within the style attribute

The following styles are supported within the style attribute^[2]

See The style attribute

:

• fill
• stroke
• stroke properties
• font-family
• font-size
• font-weight
• font-style
• text-decoration
• opacity
• fill-opacity
• clipPath

Example

   <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200">
      <g>
         <rect style="fill:red;" width="100" height="100" x="50" y="50" />
      </g>
   </svg>

Support for styles specified in the style element

The following styles are supported within the rules specified in the style element^[3]

See The style element

, and can be accessed through the class attribute^[4]

See The class attribute

:

• fill
• stroke
• stroke-width
• stroke-dasharray
• font-family
• font-size
• font-weight
• font-style
• text-decoration
• opacity
• fill-opacity

Example

   <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200">
      <style>.st0{fill: red;}</style>
      <g>
         <rect class="st0" width="100" height="100" x="50" y="50" />
      </g>
   </svg>