HTML <svg> Tag

Definition und Verwendung

<svg> Der <svg>-Tag definiert den Container für SVG-Grafiken.

SVG bietet verschiedene Methoden zum Zeichnen von Pfaden, Rechtecken, Kreisen, Texten und Grafiken.

Um mehr über SVG zu lernen, lesen Sie bitte unsere SVG Tutorial.

Weitere Informationen finden Sie unter:

HTML-Tutorial:HTML SVG

SVG-Tutorial:SVG Tutorial

Beispiel

Beispiel 1

Malen Sie einen Kreis:

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

Try It Yourself

Beispiel 2

Zeichnen Sie ein Rechteck:

<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

Beispiel 3

Malen Sie einen rechteckigen Polygon mit abgerundeten Ecken:

<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

Beispiel 4

Malen Sie ein Sternenmuster:

<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

Beispiel 5

Zeichnen Sie das 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