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

Reden wir über SVGs

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.

Sie können eine SVG-Datei mit grafischen Editoren wie Inkscape, Adobe Illustrator, CorelDRAW und Figma erstellen, die benutzerfreundliche Oberflächen zum visuellen Erstellen und Bearbeiten von SVG-Dateien bieten, was sie sehr beliebt macht. In diesem Artikel konzentrieren wir uns jedoch darauf, wie man SVG erstellt, indem man XML-Code schreibt oder Rasterbilder in SVG konvertiert.

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). Weitere Informationen finden Sie im Artikel SVG-Koordinatensysteme und -Einheiten.
• 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. Weitere Informationen finden Sie im Artikel SVG-Formen.

Hier ist das resultierende Bild ( circles.svg):

Klicken Sie auf das Bild!

In der Bildergalerie präsentieren wir einige der SVGs, die einfach manuell durch das Schreiben von XML-Code erstellt werden können. Klicken Sie auf das Bild und Sie öffnen es im Browser. Sie können es auch speichern und den Quellcode anzeigen. Sie werden feststellen, dass Sie Ihre eigenen Vektorbilder erstellen können, sobald Sie die grundlegenden Elemente wie Formen, Pfade, Transformationen und das Arbeiten mit Farben beherrschen. Im Abschnitt Grundlagen des SVG-Zeichnens unserer Dokumentation finden Sie alle notwendigen Anleitungen, um mit der Erstellung von Vektorgrafiken von Grund auf zu beginnen.

Das Kapitel Grundlagen des SVG-Zeichnens 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. Die Größe einer SVG-Datei hängt davon ab, wie viele Bilddaten sie enthält. Komplexe Grafiken mit vielen Pfaden, Formen und Ankerpunkten benötigen mehr Speicherplatz als einfachere Bilder.

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. Der neueste W3C Editor’s Draft wurde am 08. März 2023 veröffentlicht.

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.

Rasterbilder in SVGs konvertieren – Bereit zum Ausprobieren?

Eine Möglichkeit, ein SVG-Dokument zu erstellen, besteht darin, ein Rasterbild in eine Vektorgrafik umzuwandeln. Aspose.SVG bietet hierfür ein kostenloses Onlinetool an. Die Anwendung Bild-Vektorisierer ist dafür vorgesehen, JPG-, PNG-, BMP-, TIFF-, ICO- und GIF-Bitmapbilder in Vektorgrafiken umzuwandeln, die auf geometrischen Figuren aus Bézierkurven und -linien basieren. Nach der Konvertierung werden alle Vektorgrafikelemente als SVG-Dateien gespeichert.

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.

Fazit

SVG ist ein wesentliches Format in der modernen Webentwicklung und bietet Skalierbarkeit, Flexibilität, kleine Dateigrößen und Programmierbarkeit. Im Gegensatz zu Rasterbildern sind SVG-Dateien textbasiertes XML, wodurch sie editierbar und SEO-durchsuchbar. Die Möglichkeit, SVGs mit CSS und JavaScript zu gestalten und zu animieren, verbessert ihre Benutzerfreundlichkeit noch weiter.

Trotz einiger Nachteile, wie fehlender fotorealistischer Darstellung und eingeschränkter 3D-Unterstützung, bleibt SVG ein weithin unterstützter Standard für Vektorgrafiken. Obwohl SVGs einige Einschränkungen aufweisen, wie Komplexität bei hochdetaillierten Bildern und eingeschränkte Browserunterstützung für ältere Versionen, überwiegen ihre Vorteile diese Nachteile bei weitem. Von Symbolen und Logos bis hin zu interaktiven Webelementen und Polygrafie bieten SVG-Dateien eine professionelle und effiziente Möglichkeit, mit Vektorgrafiken zu arbeiten.

Die Beherrschung von SVG eröffnet eine Welt kreativer Möglichkeiten und ermöglicht es Ihnen, leichte, skalierbare und hochreaktive Grafiken für moderne digitale Erlebnisse zu erstellen.

Das Ziel des Aspose.SVG-Teams ist es, Ihnen dabei zu helfen, genug über die SVG-Technologie herauszufinden, damit Sie das produzieren können, was Sie brauchen.

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!