HTML <svg> tag

Definitie en gebruik

<svg> De <svg>-tag definieert een container voor SVG-geometrie.

SVG biedt verschillende methoden om paden, kaders, cirkels, tekst en grafische afbeeldingen te tekenen.

Voor meer informatie over SVG, lees onze SVG Tutorial。

Zie ook:

HTML Handleiding:HTML SVG

SVG Handleiding:SVG Tutorial

Voorbeeld

Voorbeeld 1

Tekenen van een cirkel:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Try It Yourself

Voorbeeld 2

Tekenen van een rechthoek:

<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>

Try It Yourself

Voorbeeld 3

Tekenen van een rechthoek met ronde hoeken:

<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>

Try It Yourself

Voorbeeld 4

Tekenen van een ster:

<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>

Try It Yourself

Voorbeeld 5

Tekenen van een SVG logo:

<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>
</svg>

Try It Yourself

Browser Support

The numbers in the table indicate the first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.0 3.2 10.1