Styling SVG with CSS

<style>

The <style> SVG element allows style sheets to be embedded directly within SVG content.

The SVG's style element has the same attributes as the corresponding element in HTML.

Example:

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <style>
    circle {
      fill: gold;
      stroke: maroon;
      stroke-width: 2px;
    }
  </style>

  <circle cx="5" cy="5" r="4" />
</svg>

Attributes:

type

This attribute defines type of the style sheet language to use as a media type string. Value type: media-type; Default value: text/css; Animatable: no

media

This attribute defines to which media the style applies. Value type: media-query-list; Default value: all; Animatable: no

title

This attribute is the title of the style sheet which can be used to switch between alternate style sheets. Value type: string; Default value: none; Animatable: no

...

Properties shared between CSS and SVG

Font properties:

• font
• font-family
• font-size
• font-size-adjust
• font-stretch
• font-style
• font-variant
• font-weight

Text Properties:

• direction
• letter-spacing
• text-decoration
• unicode-bidi
• word-spacing
• writing-mode

Color properties:

• color: Applies to elements using: fill, stroke, stop-color, flood-color, or lighting-color

SVG Color

You can specify the stroke color in a variety of ways:

• One of the color keyword names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

• A six-digit hexadecimal specifier in the form #rrggbb, where rr is the red component, gg is the green component, and bb is the blue component in the range 0-ff.

• A three-digit hexadecimal specifier in the form #rgb, where r is the red component, g is the green component, and b is the blue component in the range 0-f. This is a shorthand form of the previous method of specifying color. To produce the six-digit equivalent, each digit of the short form is duplicated; thus #d6e is the same as #dd66ee.

• An rgb specifier in the form rgb(red-value, green-value, blue-value), where each value is in the range 0-255 or a percentage in the range 0% to 100%

Internal Stylesheets

You don't need to place your styles inside each SVG element; you can create an internal stylesheet to collect commonly-used styles that you can apply to all occurrences of a particular element, or use as named classes to apply to individual elements. The following example sets up an internal stylesheet that will draw all circles in a blue double-thick dashed line with a light yellow interior. We have placed the stylesheet within a <defs> element, which we will discuss later.

The example then draws several circles. The circles in the second row have inline styles that override the specification in the internal stylesheet.

<svg width="200px" height="200px" viewBox="0 0 200 200">
<defs>
<style type="text/css">
  circle {
    fill: #ffc;
    stroke: blue;
    stroke-width: 2;
    stroke-dasharray: 5 3
  }</style>
</defs>
<circle cx="20" cy="20" r="10"/>
<circle cx="60" cy="20" r="15"/>
<circle cx="20" cy="60" r="10" style="fill: #cfc"/>
<circle cx="60" cy="60" r="15" style="stroke-width: 1; stroke-dasharray: none;"/>
</svg>