Style and Structure

<g> – element (Group)

Logical structure of shapes
Styles applied to group will be inherited by children
can associate a single <title> element with a set of shapes
Stylistic effects : filters or masks
Move or hide by Layer
a way of setting css styles on an element

In the example the code is rewritten with css styling. Amount of code has increased but each style is defined.

User friendly for changes. DRY : don’t repeat yourself.

<head>
    <meta charset="utf-8">
    <title>Stoplight with css</title>
    <style>
        rect, circle {   /* stroke op vierkanten en cirkel*/
            stroke: black;
            stroke-width: 3; 
        }
        .light {    /*alle lichten krijgen kleinere stroke*/
            stroke-width: 2;
        }
    </style>
    </head>
<body>
    <svg width="140px" height="320px">
        <!--style="fill:blue;" heeft zelfde eff als fill = "blue"
        maar is makkelijker te veranderen en te selecteren via css
        -->
    <rect x="20" y="20" width="100" height="280" style="fill:blue;"/>
        <!--cirkels krijgen allemaal een "light" klasse -->
    <circle class="light" style = "fill:red" 
            cx="70" cy="80" r="30"/>
    <circle class="light" style="fill:orange" 
            cx="70" cy="160" r="30"/>
    <circle class="light" style="fill:#40CC40" 
            cx="70" cy="240" r="30"/>
    </svg>
    </body>

<use> – element (Reuse shapes earlier drawn or defined in defs)

<defs> – element (definition of SVG content later to use, not drawn as a child of def)

<head>
    <meta charset="utf-8">
    <title>Stoplight with css</title>
    <style>
    </style>
    </head>
<body>
    <svg width="140px" height="320px">
        <!--defs worden toegevoegd reusable graph -->
    <defs>
        <!-- circle without y coordinate , light wordt als 
        id toegevoegd, ref voor href -->
        <circle id="light" cx="70" r="30" />
    </defs>    
    <rect x="20" y="20" width="100" height="280" style="fill:blue;"/>
        <!--een groep van cirkels met link naar zie defs
            stroke wordt nu hier toegevoegd -->
    <g stroke ="black" stroke-width="2">
        <!-- use element kan ook gebruikt worden op eerder
        geplaatste zaken, defs is niet noodzakelijk voor use -->
    <use xlink:href="#light" y="80" fill="red"  />
    <use xlink:href="#light" y="160" fill="yellow"  />
    <use xlink:href="#light" y="240" fill="#40CC40"  />
    </g>
    </svg>
    </body>

Vier keer verschillend geschreven code met hetzelfde resultaat, namelijk een stoplicht.