Styling SVG

Objective: Learn the different methods to apply styles to SVG elements

So far in these lessons we have used SVG attributes and values for applying styles to a shape. You can use other methods for faster and easier styling.

The styling methods are:

1. Defined SVG attributes and values (as we have used so far)
2. Using a style attribute which uses CSS syntax
3. Using a CSS file inside the SVG file
4. Using styles defined in an external CSS that is loaded with the HTML.

Let's look at these one by one using a simple circle as an example.

12.1 SVG Attributes

This is what we have been working with so far. It is verbose and typing intensive, but we stuck with that while you were learning SVG basics. Now we can look at some short cuts.

<circle cx="100" cy="100" r="50"
    stroke="red"
    stroke-width="5"
    fill="red"
    fill-opacity="0.5" />

12.2 Style attribute

You can use one style="" attribute and put all the presentation attributes and values in using CSS colon and semi-colon syntax as shown here.

<circle cx="300" cy="100" r="50"
    style="fill:blue; stroke:black; stroke-width:5; fill-opacity:0.5;" />

This simplifies styling a lot and keeps all the styles organized in a single attribute.

12.3 CSS in the SVG

You can define CSS in the SVG and then apply styles using the CSS class attribute. This is useful if a drawing has a number of shapes that use the same styling. It can reduce the file size considerably if styles are not repeated on each element.

To do this you have to tell the SVG that the CSS is separate from the SVG text. You need to insert the style element containing CDATA after the opening SVG element.

<style type="text/css" >
  <![CDATA[
    /*CSS Goes Here*/
  ]]>
</style>

 So our circle SVG with the styles applied to the element will look like this:

<style type="text/css" >
  <![CDATA[
    .red-circle {
       fill: blue;
       stroke: black;
       stroke-width: 5;
       fill-opacity: 0.5;
       }
  ]]>
</style>
<circle class="red-circle" cx="100" cy="300" r="50" />

12.4 External CSS File

When you have a lot of  SVG in a book or training manual that uses the same styles it is probably useful to use standardized styling in the external CSS file loaded by the HTML file.

IGP:Digital Publisher has a number of default styles built in that can be used immediately in any SVG. This means you only need a class statement and put in the CSS properties and everything is ready to go. Alternatively you can create a custom project CSS which will be even more terse.

<circle class="l5 s-red f-red fo-5" cx="300" cy="300" r="50" />

You can immediately see the file size benefit of this approach. The downside is that the CSS has to be loaded separately. The advantage is it is only loaded once and can be applied to dozens of shapes in a book section.

View the default IGP:Digital Publisher SVG Style List.

/* SVG MEDIA DEFAULTS ==================== */
/* Temporary construction lines */
.construction {stroke: blue; stroke-width: 1; stroke-dasharray:2, 2; fill:none;}
/* Shape Fill */
.f  {fill: rgb(192, 192, 192);}
.f-none {fill: none;}
.f-white {fill: rgb(255, 255, 255);}
.f-black {fill: rgb(0, 0, 0);}
.f-gray1 {fill: rgb(64, 64, 64);}
.f-gray2 {fill: rgb(128, 128, 128);}
.f-gray3 {fill: rgb(192, 192, 192);}
.f-gray4 {fill: rgb(240, 240, 240);}
.f-red {fill: rgb(255, 128, 128);}
.f-red2{fill: rgb(255, 0, 0);}
.f-dred {fill: rgb(128, 0, 0);}
.f-green {fill: rgb(128, 255, 128);}
.f-dgreen {fill: rgb(0, 128, 0);}
.f-blue {fill: rgb(128, 128, 255);}
.f-dblue {fill: rgb(0, 0, 128);}
.f-cyan {fill: rgb(128, 255, 255);}
.f-dcyan {fill: rgb(0, 128, 128);}
.f-magenta {fill: rgb(255, 128, 255);}
.f-dmagenta {fill: rgb(128, 0, 128);}
.f-yellow {fill: rgb(255, 255, 128);}
.f-dyellow {fill: rgb(128, 128, 0);}
.f-paper {fill: rgb(255, 250, 235);}
/*Stroke Color */
.s  { stroke: rgb(0, 0, 0);}
.s-white {stroke: rgb(255, 255, 255);}
.s-black {stroke: rgb(0, 0, 0);}
.s-gray1 {stroke: rgb(64, 64, 64);}
.s-gray2 {stroke: rgb(128, 128, 128);}
.s-gray3 {stroke: rgb(192, 192, 192);}
.s-gray4 {stroke: rgb(240, 240, 240);}
.s-red {stroke: rgb(255, 0, 0);}
.s-green {stroke: rgb(0, 128, 0);}
.s-blue {stroke: rgb(0, 0, 128);}
.s-cyan {stroke: rgb(0, 128, 128);}
.s-magenta {stroke: rgb(128, 0, 128);}
.s-yellow {stroke: rgb(255, 255, 0);}
.s-orange  {stroke: rgb(255, 190, 0);}
/*Line styles - Stroke Width*/
.l {stroke-width: 1;}
.l1 {stroke-width: 1;}
.l2 {stroke-width: 2;}
.l3 {stroke-width: 3;}
.l4 {stroke-width: 4;}
.l5 {stroke-width: 5;}
.l6 {stroke-width: 6;}
.l7 {stroke-width: 7;}
.l8 {stroke-width: 8;}
.l9 {stroke-width: 9;}
.l10 {stroke-width: 10;}
.l11 {stroke-width: 11;}
.l12 {stroke-width: 12;}
/*Letter Spacing */
.ls1 {letter-spacing: 0.5em;}
.ls2 {letter-spacing: 1.5em;}
.ls3 {letter-spacing: 2.5em;}
/*Opacity */
.fo-5{fill-opacity: 0.5;}
/* Points */
.p  {fill: rgb(0, 0, 0);}
.p-black {fill: rgb(0, 0, 0);}
.p-gray {fill: rgb(128, 128, 128);}
.p-red {fill: rgb(255, 0, 0);}
.p-green {fill:rgb(0, 255, 0);}
.p-blue {fill: rgb(0, 0, 255);}
/* Text */
.ff-ss {font-family:Arial, sans-serif; }
.ff-s {font-family:"Times New Roman", serif; }
.ff-m{font-family:Courier, monospace; }
.t48 {font-size: 48px;}
.t40 {font-size: 40px;}
.t36 {font-size: 36px;}
.t32 {font-size: 32px;}
.t28 {font-size: 28px;}
.t24 {font-size: 24px;}
.t22 {font-size: 22px;}
.t20 {font-size: 20px;}
.t18 {font-size: 18px;}
.t16 {font-size: 16px;}
.t14 {font-size: 14px;}
.t12 {font-size: 12px;}
.bold {font-weight: bold;}
.italic {font-style: italic;}
.t-start { text-anchor: start;}
.t-end { text-anchor: end;}
.t-mid { text-anchor: middle;}
.tick {stroke:black; stroke-width: 1; fill: none;}
.arc  {stroke: rgb(0, 0, 0); stroke-width: 1; fill: none;}

SVG Editor - Four Style Methods Applied

Here we have four red circles, each with styles applied using each of the methods above. The outcome is identical.

SVG Editor. Inheriting Previous Styles

There is one more very powerful property with SVG styling. If a style has been defined in an earlier SVG it can be used again in any following SVG drawings. This circle uses the CSS style that was embedded in the previous SVG image. 

Have a look at it and understand how this technique can allow you to create really small, fast-loading SVG. Put all your styles in the first SVG illustration in a book section and all the following images can inherit the styles.

12.5 Exercises

1. Practice using all the styling methods.
2. Immediately stop using presentation/styling attributes and use the style attribute or CSS in all your SVG from this point on.