HTML SVG-grafika
SVG definieer vektor-gebaseerde grafika in XML-formaat.
Wat is SVG?
- SVG staan vir Scalable Vector Graphics
- SVG word gebruik om grafika vir die web te definieer
- SVG is 'n W3C-aanbeveling
Die HTML <svg> Element
Die HTML <svg>-element is 'n houer vir SVG-grafika.
SVG het verskeie metodes om paaie, bokse, sirkels, teks en grafiese beelde te teken.
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die
<svg>element ten volle ondersteun.
| Element | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
SVG-sirkel
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 Reghoek
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 reghoek
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 Star
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>
Verskille tussen SVG en Canvas
SVG is 'n taal vir die beskrywing van 2D-grafika in XML.
Canvas teken 2D-grafika, on the fly (met 'n JavaScript).
SVG is XML gebaseer, wat beteken dat elke element beskikbaar is binne die SVG DOM. U kan JavaScript-gebeurtenishanteerders vir 'n element aanheg.
In SVG word elke getekende vorm as 'n voorwerp onthou. As kenmerke van 'n SVG-voorwerp verander word, kan die blaaier outomaties die vorm weergee.
Canvas word pixel vir pixel weergegee. Op doek, sodra die grafika geteken is, word dit deur die blaaier vergeet. As die posisie daarvan verander moet word, moet die hele toneel oorgeteken word, insluitend enige voorwerpe wat moontlik deur die grafika gedek is.
Vergelyking van Canvas en SVG
Die tabel hieronder toon 'n paar belangrike verskille tussen Canvas en SVG:
| Canvas | SVG |
|---|---|
|
|
SVG-tutoriaal
Om meer te wete te kom oor SVG, lees asseblief ons SVG-tutoriaal .