SVG Tutorial – Grundlagen lernen

SVG ist eine XML-basierte Sprache zum Erstellen von Vektorgrafiken. Sie können SVG-Markup in einem Texteditor schreiben, im Browser prüfen und anschließend mit Aspose.SVG APIs verarbeiten, wenn Sie SVG-Dateien aus Code generieren, bearbeiten, rendern oder konvertieren müssen.

Dieses Tutorial erklärt die SVG-Konzepte, die in den meisten realen Workflows vorkommen: coordinate systems, viewBox, shapes, paths, text, colors, fills, strokes, gradients, filters, transforms und embedded content. Nutzen Sie es als Grundlage, bevor Sie zu API-orientierten Artikeln über SVG editing, conversion, vectorization oder document generation wechseln.

Koordinaten und Layout

SVG-Koordinatensysteme und Einheiten erklärt SVG canvas, viewport, user coordinate systems und coordinate units.
SVG viewBox zeigt, wie viewBox SVG-Grafiken skaliert, zuschneidet und neu positioniert.

Formen, Paths und Text

SVG-Formen behandelt Rechtecke, Kreise, Ellipsen, Linien, polylines und polygons.
SVG Path Data erklärt path-Befehle für Linien, Bögen, Bézier-Kurven und eigene Konturen.
SVG-Text führt <text>, <tspan> und <textPath> für Anzeige und Styling von SVG-Text ein.

Farbe und Painting

SVG-Farbe erklärt Farbwerte, fill, stroke, opacity und Farbeinsatz für shapes, paths und Text.
Füllung und Kontur in SVG konzentriert sich auf das SVG painting model, stroke width, line caps, joins und dashes.
SVG-Hintergrundfarbe zeigt zuverlässige Methoden zum Hinzufügen oder Ändern eines SVG-Hintergrunds.
SVG Gradients erklärt lineare und radiale gradients, stops, Richtungen und Wiederverwendung über url(#id).

Effekte und Transformationen

SVG-Transformationen behandelt translate, scale, rotate, skew und matrix transform functions.
SVG-Transformationsmatrix erklärt das Matrixmodell hinter SVG-Transformationen.
SVG-Filter führt blur, drop shadow, lighting und color filter primitives ein.

Embedded Content und Praxis

SVG Embedded Content zeigt, wie SVG Rasterbilder, verschachteltes SVG und HTML über embedded content enthalten kann.
Schneeflocke zeichnen ist ein praktisches SVG-Projekt mit wiederverwendbaren Elementen, rotation und animation.

So verwenden Sie dieses SVG Tutorial

Beginnen Sie mit den Themen, die zu Ihrem aktuellen Problem passen:

Lernen Sie zuerst Koordinaten und viewBox, wenn Sie SVG layout, scaling, cropping oder responsive graphics verstehen müssen.
Nutzen Sie shapes, paths und text, wenn Sie SVG-Geometrie zeichnen oder lesbaren Text im Markup erstellen möchten.
Nutzen Sie color, fill, stroke, gradients und backgrounds, wenn die SVG-Struktur stimmt, aber der visuelle Stil bearbeitet werden muss.
Nutzen Sie filters und transformations, wenn Sie blur, shadows, lighting, rotation, scaling, skewing oder matrix-based positioning benötigen.
Wechseln Sie zu Aspose.SVG API-Artikeln, wenn Sie SVG-Dateien aus Code generieren, bearbeiten, konvertieren, rendern oder vektorisieren müssen.

Die Beispiele in diesem Tutorial verwenden direktes SVG-Markup. Die folgende Abbildung zeigt das Aspose-Logo als SVG-Bild. Schon ein kleines SVG-Fragment kann ein wiederverwendbares Icon, Logo oder eine einfache Illustration definieren.

Aspose-Logo als SVG-Bild gerendert

Das folgende Snippet ist ein kompaktes SVG-Markup-Beispiel für das Aspose-Logo. Sie können auch die Quelldatei öffnen: aspose.svg.

1<svg height="400" width="400" viewBox="-40 0 400 400" xmlns="http://www.w3.org/2000/svg">
2    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78" fill="#3993c9"/>
3    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#f3622a" transform= "rotate(90 30 64) translate(5 -14)"/>
4    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#c1af2c" transform= "rotate(180 25 78) translate(-19 9)"/>
5    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#499c43" transform= "rotate(-90 25 78) translate(-5 14)"/>
6    <circle cx="34.5" cy="73.5" r="40"   fill="white" fill-opacity="0.3" />
7</svg>

Aspose.SVG bietet kostenlose SVG-Webanwendungen zum Konvertieren von SVG- oder Bilddateien, Zusammenführen von SVG-Dateien, Vektorisieren von Bildern, Generieren von SVG-Sprites, Codieren von SVG als Base64 und Vektorisieren von Text. Diese Online-Apps funktionieren im Browser und erfordern keine zusätzliche Softwareinstallation.

SVG-Koordinatensysteme und Einheiten