HTML5 Inline SVG

HTML5 unterstützt inline SVG

Was ist SVG?

  • SVG ist abkürzt für skalierbare Vector Graphics (Scalable Vector Graphics)
  • SVG wird zur Definition von auf dem Netzwerk basierenden vektorbasierten Grafiken verwendet
  • SVG verwendet das XML-Format zur Definition von Grafiken
  • Die Grafikqualität von SVG-Bildern verliert bei Vergrößerung oder Änderung der Größe nicht an Qualität
  • 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>

Probieren Sie es selbst aus

Ergebnis:

SVG-Tutorial

Besuchen Sie unsere für mehr Wissen über SVG: SVG-Tutorial.