Hauptmerkmale
- Hervorragende SVG-zu-PNG-Transformation
- Beibehaltung der Transparenz in allen PNG-Ausgaben
- Benutzerdefinierte Ausgabegrößen- und Auflösungsoptionen
- Effiziente Batch-Konvertierungsfunktionen
- Benutzerfreundliches und einfaches Design
Skalierbare Vektorgrafiken (SVG) verstehen
SVG (Scalable Vector Graphics) ist ein bekanntes Vektorformat für Grafiken, das für seine integrierte Animationsunterstützung bekannt ist. Da SVG-Bilder auf XML basieren, sind sie durchsuchbar, indexierbar, skriptfähig und komprimierbar. Darüber hinaus sind sie über Texteditoren oder professionelle Vektordesignprogramme wie Adobe Illustrator oder Inkscape bearbeitbar. SVG-Bilder zeichnen sich dadurch aus, dass sie auflösungsunabhängig sind, d.h. sie können ohne Verlust der Klarheit skaliert und mit JavaScript animiert werden, was sie ideal für Logos, Symbole und einfache Animationen macht. Beachten Sie jedoch, dass moderne Browser SVGs nativ verarbeiten, ihre Unterstützung auf allen Plattformen jedoch möglicherweise nicht universell ist und sie nicht ideal für sehr detaillierte Bilder wie Fotos sind.
Portable Network Graphics (PNG) verstehen
Portable Network Graphics (PNG) ist aufgrund seiner außergewöhnlichen Bildqualität und seiner vielfältigen Vielseitigkeit ein begehrtes Rasterbildformat. PNGs verfügen über eine verlustfreie Datenkomprimierung, die sicherstellt, dass ihre Qualität nach der Komprimierung konstant bleibt. Sie bestehen aus Pixeln anstelle von Vektoren, was bedeutet, dass sie nicht unendlich skaliert werden können, aber Transparenzoptionen bieten, die sie für klare Hintergründe geeignet machen. Sie werden im Gegensatz zu SVGs, die einige Einschränkungen haben, auf verschiedenen Plattformen umfassend unterstützt. Schließlich führen PNGs trotz ihrer bemerkenswerten Flexibilität oft zu größeren Dateigrößen und es fehlt ihnen die Druckskalierbarkeit des Vektors.
SVG vs. PNG: Die richtige Wahl treffen
Keines der beiden Formate ist von vornherein überlegen, da sich ihre Designprioritäten unterscheiden. Während Grafikdesigner PNG aufgrund seiner vielseitigen Eigenschaften oft bevorzugen, ist SVG aufgrund seiner Skalierbarkeit und seiner einzigartigen Eigenschaften die bevorzugte Wahl für Symbole, Logos, einfache Grafikdesigns und Schriftarten. Zusammenfassend lässt sich sagen, dass SVG unübertroffen ist, wenn Skalierbarkeit im Vordergrund steht, während PNG in Fällen glänzt, in denen mehr Flexibilität und Bildpräzision erforderlich sind.
SVG-Koordinatensystem
SVG verwendet ein zweidimensionales Koordinatensystem, bei dem die x-Achse nach rechts und die y-Achse nach unten zunimmt. Der Ursprung (0,0) befindet sich in der oberen linken Ecke der SVG-Leinwand.
SVG-Syntax
Die SVG-Syntax (Scalable Vector Graphics) basiert auf XML mit spezifischen Regeln zur Beschreibung von Vektorgrafiken.
Grundlegende SVG-Strukturen
- Element: Grundlegende Bausteine von SVG, die Formen, Texte und Bilder definieren.
- Attribut: Eigenschaften eines Elements, die sein Aussehen und Verhalten steuern.
- Gruppe: Wird verwendet, um zusammengehörige Elemente zu gruppieren, wodurch das Anwenden gemeinsamer Transformationen und Stile erleichtert wird.
Gängige SVG-Datentypen
- Pfad: Eine Folge von Zeichenbefehlen, die komplexe Formen definieren.
- Rechteck: Eine rechteckige Form mit Attributen für Breite, Höhe und Position.
- Kreis: Eine Kreisform, die durch ihren Mittelpunkt und Radius definiert wird.
- Ellipse: Eine elliptische Form, die durch ihren Mittelpunkt und ihre Radien definiert wird.
- Linie: Eine gerade Linie, die zwei Punkte verbindet.
- Polylinie: Eine verbundene Reihe von geraden Linien.
- Polygon: Eine geschlossene Form aus geraden Liniensegmenten.
- Text: Wird verwendet, um Textinhalte auf dem Bildschirm anzuzeigen.
- Bild: Rasterbilder in das SVG einbetten.
Gängige SVG-Attribute
- fill: Gibt die Farbe zum Füllen einer Form an.
- stroke: Gibt die Farbe des Umrisses einer Form an.
- stroke-width: Gibt die Dicke des Umrisses einer Form an.
- opacity: Gibt die Transparenz eines Elements an.
- width und height: Gibt die Abmessungen eines Elements an.
- x und y: Gibt die Position eines Elements an.
- d: Wird für das Pfadelement verwendet, um Formbefehle zu definieren.