Ben's Hobbyhoekje -- Graphics op je website II: svg-tag

Graphics op je website II: <svg>-tag

In het artikel Graphics op je website I: <canvas>-tag wordt beschreven hoe je de <canvas> kunt gebruiken in je website. Een nadeel van <canvas> is dat de geproduceerde figuur niet schaalbaar is. Als de afmetingen van het browser-window of het <canvas>-element worden gewijzigd, moet de hele figuur steeds opnieuw worden opgebouwd. Dat geldt ook als er beweging is, zoals bij een analoge klok.

<svg> heeft dat probleem niet. Ieder element kan worden aangepast, onafhankelijk van de rest. Dat komt doordat elk element in <svg> is opgebouwd met wiskundige formules, waar <canvas> een bitmap produceert. Bij het resizen van het browser-window of het <svg>-element worden de formules simpelweg gewijzigd en daarmee is het klaar.

Op deze pagina wordt iets gezegd over het gebruiken van <svg> in je website.

De <svg>-tag is nieuw in de HTML5-standaard. Alle grote browsers ondersteunen het.

Net als <canvas> is <svg> een container. Binnen die container programmeer je de figuur-elementen met XML-tags. Als voorbeeld zie je hieronder een paar basisfiguren, die zijn ontleend aan w3schools.com:

De code van het voorbeeld ziet er zo uit:


<svg width="600" height="320" style="border:1px solid black">

  <!-- Cirkel -->

  <circle cx="500" cy="210" r="80" stroke="green" stroke-width="4"

    fill="#ff7" />

  <!-- Rechthoek -->

  <rect x="290" y="10" width="300" height="100"

    style="fill:rgb(0,0,240);stroke-width:5;stroke:#888" />

  <!-- Vierkant met afgeronde hoeken -->

  <rect x="10" y="160" rx="20" ry="20" width="150" height="150"

    style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />

  <!-- Ster -->

  <polygon points="270,110 210,298 360,178 190,178 330,298"

    style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

  <!-- Ellips met verlopende achtergrond -->

  <defs>

    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="80%" >

      <stop offset="0%"

        style="stop-color:rgb(255,255,0);stop-opacity:1" />

      <stop offset="100%"

        style="stop-color:rgb(255,0,0);stop-opacity:1" />

    </linearGradient>

  </defs>

  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />

  <text fill="#ffffff" font-size="45" font-family="Verdana"

    x="50" y="86">Mooi</text>

  <line x1="300" y1="0" x2="500" y2="200"

    style="stroke:rgb(255,0,0);stroke-width:5" />


  Sorry, uw browser heeft geen ondersteuning voor de &lt;svg&gt;-tag.

</svg>

Toelichting bij de code

De lijnkleur stel je in met stroke. Voor de lijndikte gebruik je stroke-width.
Om een vlak in te kleuren gebruik je fill.
Om kleuren aan te geven kun je alle gebruikelijke CSS-code gebruiken.
Alle elementen positioneer je ten opzichte van de linker bovenhoek. De x-richting is naar links, de y-richting is naar beneden.
Een cirkel positioneer je met cx en cy. Dit zijn de coördinaten van het middelpunt. Met r definieer je de straal.
Een rechthoek of vierkant positioneer je met x en y. Dit geeft de linker bovenhoek van de rechthoek aan. De breedte en hoogte van de rechthoek stel je in met width en height.
Een vierkant maak je als rechthoek waarvan de width en height aan elkaar gelijk zijn.
Hoekpunten afronden doe je door rx en ry toe te voegen.
Om een ster of een andere veelhoek te tekenen gebruik je polygon. In het attribuut points geef je paren x,y-coördinaten op, De x en de y scheid je door een komma. De achtereenvolgende paren scheid je door een spatie. Het eindpunt van een veelhoek is automatsch het beginpunt.
Naast de polygon is er ook de polyline. Die is identiek aan de polygon, behalve dat de de figuur niet automatisch wordt gesloten.
Het tekenen van de ellips gaat net zo als een cirkel. Alleen geef je hier twee stralen op, rx en ry. Dit zijn de halve assen in x- resp. y-richting.
Het aanbrengen van de gradiënt in de ellips gaat via de fill in de tag ellipse. Deze verwijst door een url-function naar het id van een LinearGradient-tag. Deze wordt gedefinieerd in een defs-tag.
In LinearGradient worden twee punten (x1,y1) en (x2,y2) opgegeven:
- x1, y1, y1 en y2 kunnen worden uitgedrukt in percentages van de box waar het element in staat, maar alle in CSS geldige eenheden zijn toegestaan..
- Als y1 = y2 krijg je een horizontaal verloop
- Als x1 = x2 krijg je een verticaal verloop
- Het is een kwestie van een beetje spelen met de getallen om te zien hoe het verloop zich gedraagt.
Om tekst in de figuur te zetten gebruik je text. Positioneren gaat net als een rechthoek. Om de kleur in te stellen gebruik je fill. Verdere instellingen lijken veel op CSS.
Een lijn teken je met line. Het het begin- en eindpunt gebruik je paren (x1, y1) en (x2, y2).
Een element dat hier niet genoemd is, maar dat zeker niet ongenoemd mag blijven, is path. De mogelijkheden daarvan zijn zo uitgebreid dat er een apart item aan gewijd is: Over de <path>-tag in SVG.

En verder:

Elk element ligt bovenop het vorige element. De volgorde waarin je dingen tekent is dus van belang.
In dit voorbeeld zijn overal de default-eenheden gebruikt (pixels). Je kunt echter alle eenheden gebruiken die in CSS ook mogelijk zijn: %, em, ex, pt, enzovoort.
Elk element moet correct worden afgesloten met /> (dus niet met alleen een > !)
Platte tekst (dus zonder enige opmaak!) die tussen de <svg> ... </svg> tags voorkomt wordt getoond als de browser de <svg>-tag niet ondersteunt. Tekst tussen <text> ... </text>-tags wordt gewoon getoond. Dat is logisch want een oude browser ziet dat gewoon als tekst. Het kan tot merkwaardige resultaten leiden. Als je deze bladzijde bekijkt met bijv. Internet Explorer 8, dan zie je:
Mooi Sorry, uw browser heeft geen ondersteuning voor de <svg>-tag.
Met <svg> kun je alleen 2D-graphics maken. <svg> is dus niet geschikt om spelletjes mee te maken.
De 2D-graphics die je met <svg> maakt, kunnen heel ingewikkeld zijn zonder dat het programmeren moeilijk wordt. Denk daarbij aan landkaarten waarop allerlei markers en foto's staan, zoals Google maps, maar ook aan allerlei grafieken die realtime worden gemaakt en bijgewerkt.
Elke SVG-figuur heeft een eigen Document Object Model (DOM). Je kunt daarvoor event-handlers bouwen (met JavaScript) om de gebruiker of de website zelf te laten reageren op veranderingen in de figuur.
Als de figuur heel ingewikkeld wordt, wordt het bijwerken van de figuur traag. Dat ligt voor de hand, want voor inwikkelde figuren is veel code nodig.
Je kunt figuren animeren, zij het beperkt. Dit kan met JavaScript en/of CSS.

Tenslotte:
Werken met <svg> is niet beperkt tot het tekenen van elementen zoals op deze pagina is gedaan. Het voert te ver om alle mogelijkheden te bespreken, want dat zijn er heel veel. Op internet zijn daar voldoende voorbeelden van te vinden.