SVG -Tutorial
SVG steht für Scalable Vector Graphics.
SVG definiert vektorbasierte Grafiken im XML-Format.
Beispiele in jedem Kapitel
Mit unserem "Try it Yourself"-Editor können Sie das SVG bearbeiten und auf eine Schaltfläche klicken, um das Ergebnis anzuzeigen.
SVG-Beispiel
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Was du bereits wissen solltest
Bevor Sie fortfahren, sollten Sie über ein grundlegendes Verständnis der folgenden Punkte verfügen:
- HTML
- Einfaches XML
Wenn Sie diese Fächer zuerst studieren möchten, finden Sie die Tutorials auf unserer Homepage .
Was ist SVG?
- SVG steht für Scalable Vector Graphics
- SVG wird verwendet, um vektorbasierte Grafiken für das Web zu definieren
- SVG definiert die Grafiken im XML-Format
- Jedes Element und jedes Attribut in SVG-Dateien kann animiert werden
- SVG ist eine W3C-Empfehlung
- SVG lässt sich in andere W3C-Standards wie DOM und XSL integrieren
SVG ist eine W3C-Empfehlung
SVG 1.0 wurde am 4. September 2001 zu einer W3C-Empfehlung.
SVG 1.1 wurde am 14. Januar 2003 zu einer W3C-Empfehlung.
SVG 1.1 (Second Edition) wurde am 16. August 2011 zu einer W3C-Empfehlung.
SVG-Vorteile
Vorteile der Verwendung von SVG gegenüber anderen Bildformaten (wie JPEG und GIF) sind:
- SVG-Bilder können mit jedem Texteditor erstellt und bearbeitet werden
- SVG-Bilder können durchsucht, indiziert, geskriptet und komprimiert werden
- SVG-Bilder sind skalierbar
- SVG-Bilder können in jeder Auflösung in hoher Qualität gedruckt werden
- SVG-Bilder sind zoombar
- SVG-Grafiken verlieren KEINE Qualität, wenn sie gezoomt oder in der Größe verändert werden
- SVG ist ein offener Standard
- SVG-Dateien sind reines XML
Erstellen von SVG-Bildern
SVG-Bilder können mit jedem Texteditor erstellt werden, aber es ist oft bequemer, SVG-Bilder mit einem Zeichenprogramm wie Inkscape zu erstellen .