Lessons in SVG

by Nivaldo

HTML

<ul>
    <li>each svg viewport has its own local coord system with origin point given by x,y; if not specified, assumed (0,0); if width, height not specified, assumed (100%,100%) - X,Y COORDS SEEM TO HAVE NO EFFECT...CHECK DOCUMENTATION</li>
    <li>setting x, y, width and height of svg viewport allows complete control of what gets displayed within it</li>
    <li>no html elements can be placed within the svg viewport!!!</li>
    <li>SVG provides an ‘a’ element, to indicate links (also known as hyperlinks or Web links). The ‘a’ element may contain any element that its parent may contain, except itself; as an example, blue circle and text are both inside the same a, but there could be one or many elements under a; the text element is also decorated by CSS3</li>
</ul>
<hr/>
<p>first viewport</p>
<svg  x="0" y="0" width="100" height="100">
    <rect x="0" y="0" width="100" height="100" fill="none" stroke="red"/>
    <g transform="translate(10,0)">
        <circle cx="30" cy="100" r="10" fill="red"/>
        <a xlink:href="http://www.w3.org/TR/SVG/linking.html#Links">
            <circle cx="10" cy="50" r="10" fill="blue"/>
            <text x="10" y="50">blue circle</text>
        </a>
    </g>
</svg>
<p>second viewport</p>
<svg  x="0" y="0" width="200" height="200">
    <rect x="0" y="0" width="200" height="200" fill="none" stroke="pink"/>
    <g transform="translate(10,0)">
        <circle cx="100" cy="150" r="5" fill="pink"/>
        <circle cx="10" cy="50" r="5" fill="cyan"/>
    </g>
</svg>

CSS

a text {
  fill: blue;
}
a text:visited {
  fill: lightpurple;
}
a text:hover, a text:active {
  text-decoration: underline;
  fill: lightblue;
}