Was ist eine SVG-Datei? – Aspose.SVG for .NET

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.

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:

1<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
2    <circle cx="50" cy="50" r="40" fill="#B0C4DE" />
3    <circle cx="50" cy="50" r="30" fill="#DDA0DD" />
4    <circle cx="50" cy="50" r="20" fill="#FFB6C1" />
5    <circle cx="50" cy="50" r="10" fill="#5F9EA0" />
6</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):

Text „Vier Kreise unterschiedlicher Größe und Farbe mit einem Mittelpunkt“

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.


Snowflake	Aspose Logo	Owl (Picasso style)	Tulips pattern


Flower	Winter forest	Colorful Mosaic	Gradient shapes

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

Vorteile	Nachteile
Unendliche Skalierbarkeit – Kein Qualitätsverlust bei jeder Größe.	Dateigröße wächst mit dem Detailgrad – Komplexe Illustrationen können sehr groß werden.
Klein für einfache Grafiken – Textbasierte Auszeichnungssprache lässt sich gut komprimieren.	Nicht geeignet für Fotorealismus – Begrenzte natürliche Farbverläufe.
Mit jedem Texteditor bearbeitbar – Volle Programmierbarkeit.	Steilere Lernkurve – SVG-Code kann für Anfänger abschreckend wirken.
Integrierte Komprimierung (SVGZ) – 50–80 % kleiner als reines SVG.	Ältere Browser – IE8 und ältere Versionen werden nicht unterstützt.
Barrierefreiheit – Bildschirmleseprogramme und Suchmaschinen können die Auszeichnungssprache lesen.	Keine native 3D-Unterstützung – SVG konzentriert sich auf 2D-Grafiken.
Performance – Kann in HTML eingebettet werden, um HTTP-Anfragen zu reduzieren.	Performanceeinbußen bei Tausenden von Elementen – Hoher Einfluss auf das DOM.
Animation & Interaktivität – Volle Kontrolle über JavaScript und CSS.
Styling mit CSS – Design und Markup trennen.
DOM-Integration – Manipulierbar über dieselben APIs wie HTML.
Offener Standard – Kostenlos, gepflegt vom W3C ( SVG 2.0).
Standardmäßig transparenter Hintergrund – Ideal für Overlays.

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.

Typische Anwendungsfälle

Skalierbare Icons und Logos
Illustrationen, Diagramme, Infografiken, Karten
UI-Komponenten und interaktive Widgets
Einfache webbasierte Spiele und Datenvisualisierungen
Druckfertige Vektorgrafiken (Polygraphie)

Häufige Fehler und Lösungen

Problem	Ursache	Lösung
SVG wird im Browser leer angezeigt	Fehlendes oder falsches `xmlns`-Attribut	Stellen Sie sicher, dass das Stamm-Tag `<svg>` `xmlns="http://www.w3.org/2000/svg"` enthält
Text ist nicht auswählbar oder durchsuchbar	Text in Pfade oder Konturen umgewandelt	`<text>`-Elemente im Markup beibehalten; vermeiden Sie die Umwandlung von Text in Formen beim Export
Dateigröße ist unerwartet groß	Zu detaillierte Pfade oder unnötige Gruppen	Pfade mit Tools wie SVGO vereinfachen, ausgeblendete Ebenen entfernen und SVG minimieren
Farben werden in verschiedenen Browsern unterschiedlich dargestellt	Verwendung nicht standardisierter Farbformate	Verwenden Sie Hexadezimal-Farbnamen (`#RRGGBB`) oder CSS-Farbnamen; vermeiden Sie `rgb()` mit Prozentangaben
Animation wird nicht ausgeführt	Fehlende `script`- oder `style`-Tags in einem Inline-SVG	Platzieren Sie beim Inlining `<style>` und `<script>` innerhalb des `<svg>`-Elements oder verweisen Sie auf externe Dateien
SVG ist nicht responsiv	Feste `width`/`height`-Attribute ohne `viewBox`	Entfernen Sie explizite Abmessungen und verwenden Sie `viewBox` mit CSS `width: 100%`
Barrierefreiheitstools können die Grafik nicht lesen	Fehlende `<title>`- oder `<desc>`-Elemente	Fügen Sie `<title>` für eine Kurzbeschreibung und `<desc>` für detaillierte Informationen hinzu

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.

Nächste Schritte und verwandte Ressourcen

SVG-Zeichnen – Grundlagen-Tutorial – Erlernen Sie Koordinatensysteme, SVG-Formen, Pfade und Transformationen.
SVG-Filter und -Verläufe – SVG-Code, Beispiele – Vertiefen Sie Ihr Wissen über Weichzeichnungs-, Schatten- und Farbmatrixfilter.
Arbeiten mit der Aspose.SVG für .NET API – C# – Anleitung zur programmatischen SVG-Bearbeitung mit der Aspose.SVG for .NET-Bibliothek.

Aspose.SVG for .NET Erste Schritte

Analyzing your prompt, please hold on...

An error occurred while retrieving the results. Please refresh the page and try again.