HTML5 Inline SVG

HTML5 unterstützt eingebettete SVG

Was ist SVG?

  • SVG steht für skalierbare Vektor-Grafiken (Scalable Vector Graphics)
  • SVG wird zur Definition von vektorbasierten Grafiken für das Netzwerk verwendet
  • SVG wird im XML-Format definiert
  • Die Grafikqualität von SVG-Bildern bleibt bei Vergrößerung oder Änderung der Größe unverändert
  • SVG ist ein Standard der World Wide Web Consortium

Vorteile von SVG

Im Vergleich zu anderen Bildformaten (z.B. JPEG und GIF) liegen die Vorteile von SVG darin:

  • SVG-Bilder können mit einem Texteditor erstellt und bearbeitet werden
  • SVG-Bilder können durchsucht, indexiert, skriptiert oder komprimiert werden
  • SVG ist skalierbar
  • SVG-Bilder können in jeder Auflösung hochwertig gedruckt werden
  • SVG kann ohne Qualitätsverlust vergrößert werden

Browserunterstützung

Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen Inline SVG.

SVG direkt in HTML-Seite einbetten

In HTML5 können Sie SVG-Elemente direkt in die HTML-Seite einbetten:

Beispiel

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

Versuchen Sie es selbst

Ergebnis:

SVG-Tutorial

Möchten Sie mehr über SVG lernen, besuchen Sie bitte unsere SVG-Tutorial.