SVG Chapter 001 : Graphics from Vectors

Defining an SVG in code

preprocessor -> markup -> browser interpretes markups

sgv-standalone –> XML parser

svg-inline –> html parser
simple inline SVG
* tag is self-closed. You can use explicit closing tags (less confusing for me).
SVG element well defined ! a blue rectange starting at coordinates 20, 20

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>first SVG-example</title>
    <style></style>
    </head>
<body>
    <svg width="400px" height="300px">
    <rect x="20" y="20" width="100" height="280" fill="blue" stroke="black" stroke-width="3" />
    </svg>
    </body>
</html>

Zo ziet het er uit in een browserwindow, wordpress en svg heeft plugin nodig vermoed ik.

Adding red, green and yellow lights with attribute.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>first SVG-example</title>
    <style></style>
    </head>
<body>
    <svg width="140px" height="320px">
    <rect x="20" y="20" width="100" height="280" fill="blue" stroke="black" stroke-width="3" />
    <circle cx="70" cy="80" r="30"
            fill="red" stroke="black" stroke-width="2"></circle>
    <circle cx="70" cy="160" r="30"
            fill="yellow" stroke="black" stroke-width="2"></circle>
    <circle cx="70" cy="240" r="30"
            fill="#40CC40" stroke="black" stroke-width="2"></circle>
    </svg>
    </body>
</html>

Standalone SVG

save file with .svg extension
The starting tag = declaration of SVG namespace.
xmlns=”http://www.w3.org/2000.SVG”
Height & width attributes are important setting default size for the graphic.
No requirement for head to put metadata. However is best at top.
One metadataelement to include (not working without here ?) is title tag.
title tag is more flexible than html equivalent, adding titles to individual graphics -> tooltip

<svg xmlns="http://www.w3.org/2000/svg" height="320px" width="140px">
<title xml:lang="en">Standalone stoplight</title>
    
    <rect x="20" y="20" width="100" height="280" fill="blue" stroke="black" stroke-width="3" />
    <circle cx="70" cy="80" r="30"
            fill="red" stroke="black" stroke-width="2"></circle>
    <circle cx="70" cy="160" r="30"
            fill="yellow" stroke="black" stroke-width="2"></circle>
    <circle cx="70" cy="240" r="30"
            fill="#40CC40" stroke="black" stroke-width="2"></circle>
    </svg>