SVG CSS

Tutorial

SVG elements can be styled with Cascading Style Sheets (CSS). Cascading Style Sheets are a technology used to specify the visual properties (styles) of document elements for documents written in markup languages (think HTML and SVG). In theory, they allow the style of a document to be separated from the document itself. In practice many HTML and SVG documents have some of the style specified in individual elements instead of in a separate style section. If you were constructing a chart by hand with SVG, consider the energy saved if you only have to say the circles are red with black outlines once.

No CSS

<circle cx="10" cy="10" fill="red" stroke="black" stroke-width="1px"> 
<circle cx="20" cy="10" fill="red" stroke="black" stroke-width="1px"> 
<circle cx="30" cy="10" fill="red" stroke="black" stroke-width="1px">
<circle cx="40" cy="10" fill="red" stroke="black" stroke-width="1px">

Kinda CSS - Here, attributes relating to style have been moved to the style attribute.

<circle cx="10" cy="10" style="fill:red;stroke:black;stroke-width:1px;"> 
<circle cx="20" cy="10" style="fill:red;stroke:black;stroke-width:1px;"> 
<circle cx="30" cy="10" style="fill:red;stroke:black;stroke-width:1px;">
<circle cx="40" cy="10" style="fill:red;stroke:black;stroke-width:1px;">

With CSS

<style>
  .plotCirles {
    fill: red;
    stroke: black;
    stroke-width 1px;
  }
</style>

<circle cx="10" cy="10" clas="plotCircles"> 
<circle cx="20" cy="10" clas="plotCircles"> 
<circle cx="30" cy="10" clas="plotCircles"> 
<circle cx="40" cy="10" clas="plotCircles"> 

Of course as we will soon see, with D3.js we can generate the above programatically with data. When using D3.js there is still the benefit of separating some aspects of the look of the chart from the display code. This means that people unfamiliar with D3.js, but familiar with CSS, will be able to change to blue circles with white outlines or anything else. Additionly, we can quickly change the style of many circles at once.

How to specify CSS

CSS is specified inside the style element. The style element is located in the header (head element) of an HTML file. Note that it can also be specified in a separate file but we won't worry about that here.

CSS has the concept of a selector, which specifies what elements get styled. To specify CSS, provide a selector and a list of properties to set for those elements. Visually, it looks like this:

[the selector] {
  propertyA: property A's value;
  propertyB: property B's value;
  propertyC: property C's value;
}

If you aren't familiar with CSS selectors, here is a quick reference table for the most common selections.

Now that we know more about CSS, let's revisit our example from above.

.plotCirles {
  fill: red;
  stroke: black;
  stroke-width 1px;
}

Here we are selecting everything that is in the "plotCircles" class and setting the following properties: fill, stroke, and stroke-width.

Most useful CSS properties for SVG

For our purposes there are two must-know SVG properties: stroke and fill.

The fill property specifies the paint for enclosed objects (such as circles, text, rectancles and enclosed paths). As shown below, colors can be specified in several ways including: with hexidecimal notation, as a CSS function or with a text description.

circle.hexRed {
  fill: #FF0000;
}
circle.rgbRed {
  fill: rgb(255,0,0);
}
circle.textRed {
  fill: red;
}

The stroke property specifies the paint for lines (line and path elements) and outlines of other elements. Color values are specified in the same way as fill. Closely related to stroke is stroke-width, which controls the thickness of strokes. stroke-width is specified in pixels. For example:

circle.wideStroke {
  stroke: black;
  stroke-width: 20px;
}

Things to do

1. Change the fill color of all of the cirlces to purple.
2. Change the fill color of all circles in the "selectedCircle" class to red.
3. Remove the yellow outline from all circles

Extra Credit

• Break the rules and edit where it says not to. Try to change the radius of the cirlce's to 8.

Change the code on the left. Once you've made a change, the page will render on the right.