SVG: Specifying Styles

By Xah Lee. Date: . Last updated: .

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:

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" "">
<svg width="12cm" height="3cm" viewBox="0 0 1200 300" version="1.1" xmlns="" xmlns:xlink="">
  <style type="text/css">
      #x123 { fill: blue }
      path { fill-opacity: .5 }
      .y567 { stroke-linecap: round }

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: Shape Styles

SVG: Shape Styles

JavaScript in Depth

SVG tutorial

Canvas Intro