Was ist eine SVG-Datei? – Vor- und Nachteile, XML-Code

SVG ist eine Vektorgrafik im Textformat

Scalable Vector Graphics (SVG) ist eine XML-Sprache zum Erstellen zweidimensionaler Vektor- und gemischter Vektor-/Rastergrafiken. Bei einem SVG-Dokument handelt es sich um eine Textdatei, die Bilder als geometrische Grundelemente beschreibt: Linien, Kurven, Formen, Text usw. Vektorobjekte werden als Satz von Befehlen, Zahlen und Formeln erstellt und gespeichert, nicht in einem Pixelraster wie bei Bitmaps. Dies bedeutet, dass die Größe von Vektor-SVGs ohne Qualitätsverlust erheblich geändert werden kann, was sie ideal für Symbole, Logos, SVG-Sprites und mehr macht. Da SVGs im XML-Code geschrieben sind, speichern sie Informationen im Klartext und nicht in Formen. Dadurch können Suchmaschinen wie Google SVG-Grafiken für ihre Schlüsselwörter lesen, was dazu beitragen kann, dass eine Website im Suchranking aufsteigt.

Das SVG-Format bietet alle Vorteile von Vektorgrafiken sowie viele weitere Vorteile gegenüber Bitmap-Bildformaten. Das Vektordateiformat wird im Web häufig verwendet, und das Verständnis der Grundlagen von SVG wird für Entwickler hilfreich sein.

SVG-Datei – XML-Code

Eine SVG-Datei wird in der XML-Auszeichnungssprache geschrieben. Der XML-Code im SVG-Dokument definiert alle Formen, Pfade, Farben und Texte, aus denen das Bild besteht. Der SVG-Code kann direkt in HTML eingebettet oder in einer SVG-Datei gespeichert und wie jedes andere Bild eingefügt werden. Da der gesamte Inhalt einer SVG-Datei aus Text besteht, können Sie sie in einem Texteditor öffnen, SVG-Code lesen und bearbeiten. Sie können einen modernen Webbrowser wie Chrome, Firefox oder Edge verwenden, um SVG-Bilder online zu öffnen und anzuzeigen, ohne sie herunterladen zu müssen. Sie können eine SVG-Datei leicht an der Erweiterung .svg erkennen. Es ist jedoch hilfreich, die SVG-Grundlagen zu kennen, um zu verstehen, wie es angezeigt werden soll.

Elemente und Attribute

Jedes SVG-Dokument basiert auf XML-Hauptstrukturelementen: einer baumartigen Struktur, Tags, Elementen und Attributen. Die Elemente werden zum Zeichnen, Transformieren, Stylen und Platzieren von Bildern verwendet. Sie können Attribute enthalten, die seine Eigenschaften definieren, d. h. Details darüber, wie das Element behandelt oder gerendert werden soll. Das Element schreibt mit Hilfe eines Start-Tags und eines End-Tags in spitzen Klammern. Die SVG-Datei sollte gemäß der XML-Syntax und der W3C SVG 2.0-Spezifikation geschrieben werden.

Schauen wir uns ein einfaches Beispiel an. Wir erzeugen ein SVG-Bild aus vier Kreisen unterschiedlicher Größe und Farbe mit einem Mittelpunkt:

<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="#B0C4DE" />
    <circle cx="50" cy="50" r="30" fill="#DDA0DD" />
    <circle cx="50" cy="50" r="20" fill="#FFB6C1" />
    <circle cx="50" cy="50" r="10" fill="#5F9EA0" />
</svg>

Das Hauptelement im SVG-Code ist das Element <svg>, das ein SVG-Dokumentfragment definiert.

• Das Attribut xmlns in SVG steht für XML-Namespace und stellt die Standardelemente und Attribute dar, die in einem SVG-Dokument gemäß der Scalable Vector Graphics-Spezifikation verwendet werden können. Ohne das Attribut xmlns wird der SVG-Code möglicherweise nicht richtig oder überhaupt nicht gerendert.
• Das Attribut viewBox definiert ein Fenster, durch das Elemente Ihrer SVG sichtbar sind. In diesem Fall reicht die Viewbox von (0,0) bis (300.300).

Das SVG-Element <circle> wird verwendet, um einen Kreis auf dem Bildschirm zu zeichnen. Sie müssen die Position des Mittelpunkts und des Radius des SVG-Kreises festlegen. Im Beispiel haben wir die Kreise mithilfe des Attributs fill mit verschiedenen Farben bemalt.

Hier ist das resultierende Bild ( circles.svg):

Das Kapitel SVG-Zeichnungsgrundlagen ist ein Tutorial, das sich mit dem Zeichnen von SVG-Bildern befasst und Artikel über SVG-Koordinatensysteme und -Einheiten, SVG-Grundformen, SVG-Pfaddaten, SVG-Text, grundlegende SVG-Transformationen, SVG-Farbe und Füllungen enthält & Striche in SVG, eingebetteten SVG-Inhalten sowie SVG-Filtern und -Verläufen. Unser Tutorial zum SVG-Zeichnen erklärt anhand einfacher Beispiele allgemeine Regeln und Standardschritte für die Erstellung von SVG von Grund auf. Wir hoffen, dass es Ihnen bei Ihrer Arbeit oder Ihrem Studium hilft.

Vor- und Nachteile des SVG-Formats

Das SVG-Format bietet alle Vorteile von Vektorgrafiken sowie viele weitere Vorteile gegenüber Bitmap-Bildformaten.

Vorteile

1. Skalierung. Im Gegensatz zu Bitmap-Grafiken können Vektor-SVG-Bilder in einem Browser ohne Qualitätsverlust in der Größe geändert und gezoomt werden. SVG bietet Ihnen die Möglichkeit der unbegrenzten Skalierung.

2. Geringe Dateigröße. Im Vergleich zu Bitmaps sind SVG-Dateien erheblich kleiner; Es ermöglicht ein schnelleres Laden der Webseite mit SVG.

3. Programmierbarkeit. SVG-Bilder können mit jedem geeigneten Texteditor erstellt, konstruiert und bearbeitet werden.

4. Dateikomprimierung. Die SVG-Dateien sind Text-XML-Dateien und lassen sich daher gut ohne Datenverlust komprimieren. SVGZ ist die komprimierte SVG-Datei. Es ist typischerweise 50 bis 80 Prozent kleiner als SVG.

5. Barrierefreiheit. Da es sich um eine textbasierte Datei auf der Webseite handelt, wird das SVG-Bild für Bildschirmlesegeräte und Suchmaschinen zugänglich, die seinen Code lesen können. Dies ist sehr nützlich für Leute, die Hilfe beim Lesen von Webseiten benötigen. Außerdem können die SVG-Bilder von Suchmaschinen durchsucht und indiziert werden.

6. Leistung. SVG kann in ein HTML-Dokument eingebettet werden; Dies führt zu einer besseren Ladeleistung der Website.

7. Animationen und Interaktionen. SVG ist über JavaScript zugänglich und ermöglicht Entwicklern die Erstellung von Animationen und interaktiven Bildern.

8. Styling. Für jedes Element des SVG-Bildes können CSS-Eigenschaften festgelegt werden.

9. Flexibilität. SVG-Bilder können mit DOM, CSS, HTML und JavaScript interagieren.

10. SVG ist ein kostenloser offener Standard. SVG 2.0 ist eine W3C-Empfehlung und die neueste Version der vollständigen Spezifikation.

11. Der SVG-Hintergrund ist standardmäßig transparent, was für Webdesigner-Aktionen sehr wichtig und praktisch ist.

Nachteile

1. Die Dateigröße hängt von der Detailanzahl ab. Die Detaillierung und Komplexität des SVG-Bildes sind proportional zur Anzahl der geometrischen Grundelemente und damit zum „Gewicht“ der Datei. Fazit: Schlechte Leistung bei der Arbeit mit einer großen Anzahl von Elementen.

2. Unrealistische Bilder. SVG eignet sich nicht gut zum Zeichnen fotorealistischer Bilder. Bei Vektorbildern sind noch keine natürlichen Farbübergänge möglich. Aber heute ist das nicht ihr Zweck.

3. Alte Browser und unzureichende Cross-Browser-Kompatibilität. SVG wird offiziell von allen gängigen Webbrowsern unterstützt, außer in Internet Explorer 8 und früher. Einige Server können jedoch nicht alle Arten von SVG-Elementen rendern, sodass die generierten Bitmaps manchmal nicht den Wünschen des Autors entsprechen.

4. Nicht-3D-Grafiken SVG fehlt völlig die Unterstützung für die Beschreibung von 3D-Objekten.

5. SVG-Komplexität. Der Code in SVG-Bildern kann schwierig zu verstehen sein, wenn Sie mit dem SVG-Dateiformat noch nicht vertraut sind.

Trotz dieser Nachteile sind Entwickler moderner Browser sowie das Aspose.SVG-Team davon überzeugt, dass SVG die Zukunft der Webdesign-Grafiken ist.

SVG-Geschichte

SVG wurde vom World Wide Web Consortium (W3C) entwickelt und hat eine lange Geschichte, die bis in die späten 1990er Jahre zurückreicht. In den Anfängen des Webs wurden schnell verschiedene HTML-Formate und -Erweiterungen entwickelt. Ein Vektorgrafikformat für das Web wäre natürlich hilfreich. Die SVG-Arbeitsgruppe wurde 1998 gegründet, um eine Standardmethode zur Darstellung von Vektorgrafiken im Web bereitzustellen und eine Alternative zu Rasterbildformaten wie JPEG und GIF anzubieten. Bis 1998 gab es beim W3C sechs konkurrierende Anwendungen im Bereich Web-Vektorgrafiken: Web Schematics, PGML, VML, Hyper Graphics Markup Language. , WebCGM und DrawML, die dabei halfen, herauszufinden, was schließlich zum SVG-Format des W3C wurde. Infolgedessen untersuchte die SVG-Arbeitsgruppe die allgemeinen Anforderungen an ein neues Vektorformat und beschloss, keine der vorhandenen Anwendungen zu entwickeln, sondern eine neue Sprache zu entwickeln, wobei die Lehren aus allen bisherigen Arbeiten berücksichtigt wurden. Unter den Entwicklern herrschte allgemeine Einigkeit über die Art der benötigten Vektorgrafikwerkzeuge – Bezierkurven, Masken, Compositing – und die SVG-Arbeitsgruppe konzentrierte sich eher auf diese Gemeinsamkeit als auf Syntaxkonflikte. Grundsätzlich wurde SVG von Grund auf unter Berücksichtigung aller bisherigen Einflüsse konzipiert.

Die erste Version von SVG, bekannt als SVG 1.0, wurde am 4. September 2001 als W3C-Empfehlung veröffentlicht. Diese Version legte den Grundstein für Vektorgrafiken im Web und führte grundlegende Formen, Texte, Pfade und Transformationen ein. Die Entwicklung von SVG 2.0 begann mit dem Ziel, die SVG-Spezifikation zu verfeinern und zu erweitern. SVG 2.0 zielt darauf ab, neue Funktionen und eine bessere Integration mit anderen Webstandards bereitzustellen. Der neueste SVG 2.0-Entwurf wurde am 8. März 2023 veröffentlicht.

Es dauerte einige Zeit, bis SVG an Popularität gewann. Die SVG-Unterstützung war bis 2017 relativ gering, als die Menschen begannen, die Vorteile der Verwendung von SVG in modernen Webbrowsern zu erkennen.

Wofür werden SVG-Dateien verwendet?

Als Vektorgrafikformat, das den aktuellen Anforderungen der Webentwicklung wie Skalierbarkeit, Leistung, Programmierbarkeit usw. entspricht, findet SVG die Hauptanwendung im Web. Das Zoomen ohne Qualitätsverlust eröffnet auch die Perspektive für den SVG-Einsatz in der Polygraphie.

Einige praktische Anwendungsfälle:

• skalierbare Symbole und Logos
• einfache Illustrationen, Tabellen, Diagramme, Grafiken, Infografiken, Karten
• Animationen
• Spezialeffekte
• Aufbau von Schnittstellen und Anwendungen
• einfache Spiele
• Polygraphie.

Das Ziel des Aspose.SVG-Teams besteht darin, Ihnen dabei zu helfen, ausreichend über die SVG-Technologie herauszufinden, damit Sie das produzieren können, was Sie benötigen.

Aspose.SVG bietet SVG-kostenlose Webanwendungen zum Konvertieren von SVG- oder Bilddateien, Zusammenführen von SVG-Dateien, Bildvektorisierung, SVG-Sprite-Generierung, SVG-zu-Base64-Datenkodierung und Textvektorisierung. Diese Online-Anwendungen funktionieren auf jedem Betriebssystem mit einem Webbrowser und erfordern keine zusätzliche Softwareinstallation. Es ist eine schnelle und einfache Möglichkeit, Ihre Aufgaben effizient und effektiv zu lösen!