SVG: Specifying Styles

SVG style sheet is basically the same as CSS.

(If you don't know CSS, see CSS Basics.)

Some of the SVG style attribute names are different from CSS.

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.

Here is explanation of each.

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)

<!-- inline styling -->
<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>

SVG: Shape Styles

SVG: Shape Styles