HTML SVG-afbeeldingen
SVG definieert op vectoren gebaseerde afbeeldingen in XML-indeling.
Wat is SVG?
- SVG staat voor Scalable Vector Graphics
- SVG wordt gebruikt om afbeeldingen voor het web te definiëren
- SVG is een aanbeveling van W3C
Het HTML <svg>-element
Het HTML <svg>-element is een container voor SVG-afbeeldingen.
SVG heeft verschillende methoden voor het tekenen van paden, kaders, cirkels, tekst en grafische afbeeldingen.
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die het
<svg>element volledig ondersteunt.
| Element | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
SVG cirkel
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<svg
width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green"
stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
SVG-rechthoek
Voorbeeld
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"
/>
</svg>
SVG afgeronde rechthoek
Voorbeeld
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20"
width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
SVG-ster
Voorbeeld
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
SVG-logo
Voorbeeld
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%"
y1="0%" x2="100%" y2="0%">
<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">SVG</text>
Sorry, your browser does not
support inline SVG.
</svg>
Verschillen tussen SVG en canvas
SVG is een taal voor het beschrijven van 2D-afbeeldingen in XML.
Canvas tekent direct 2D-graphics (met een JavaScript).
SVG is gebaseerd op XML, wat betekent dat elk element beschikbaar is binnen de SVG DOM. U kunt JavaScript-gebeurtenishandlers voor een element koppelen.
In SVG wordt elke getekende vorm onthouden als een object. Als kenmerken van een SVG-object worden gewijzigd, kan de browser de vorm automatisch opnieuw weergeven.
Canvas wordt pixel voor pixel weergegeven. In canvas, zodra de afbeelding is getekend, wordt deze vergeten door de browser. Als de positie moet worden gewijzigd, moet de hele scène opnieuw worden getekend, inclusief alle objecten die mogelijk door de afbeelding zijn bedekt.
Vergelijking van Canvas en SVG
De onderstaande tabel toont enkele belangrijke verschillen tussen Canvas en SVG:
| Canvas | SVG |
|---|---|
|
|
SVG-zelfstudie
Lees onze SVG-zelfstudie voor meer informatie over SVG .