SVG: Specifying Styles

By Xah Lee. Date: 2015-08-18. Last updated: 2024-08-30.

SVG Uses Cascading Style Sheet (CSS)

SVG style sheet is basically the same as CSS. But some of the SVG style attribute names are different from CSS.

Visual CSS

Specifying Styles

There are 4 ways to specify SVG style:

SVG Element Attribute. E.g. <line … stroke="black" />
Inline CSS as style attribute in the tag. E.g. <line style="stroke:black;…" …/>
Internal CSS. (declared in file header)
External CSS. A link to style file.

SVG Element Attribute

<line x1="0" y1="0" x2="50" y2="10" stroke="black" />

The stroke is a style attribute for the SVG line element.

Inline CSS (style attribute)

<line x1="0" y1="0" x2="50" y2="10" style="stroke:black" />

The style=val is general way to style each SVG element.

Internal CSS (in File Header)

Here is a example of internal style sheet:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3cm" viewBox="0 0 1200 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style type="text/css">
    <![CDATA[
      #x123 { fill: blue }
      path { fill-opacity: .5 }
      .y567 { stroke-linecap: round }
    ]]>
  </style>
</svg>

Note: because it's XML file, so you must enclose it with <![CDATA[…]]>.

External CSS (Link to Style File)

Here is example with external style sheet. Basically a link to style file:

<!-- external style sheet-->
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="my_style.css" type="text/css"?>
<!DOCTYPE svg …>
<svg …>
…
</svg>