SVG-Zeichnung – Grundlagen-Tutorial
SVG ist eine XML-Sprache, die zum Zeichnen von Vektorgrafiken verwendet wird. Wenn Sie mit grundlegendem HTML und XML vertraut sind, können Sie SVGs ganz einfach in jedem Texteditor erstellen! Wir hoffen, dass unser SVG-Zeichen-Tutorial Ihnen bei Ihrer Arbeit oder Ihrem Studium hilft. Wir versuchen, anhand einfacher Beispiele gängige Regeln und Standardschritte für die Erstellung von SVG von Grund auf zu erklären.
In diesem Kapitel soll erläutert werden, wie SVG-Bilder gezeichnet werden. Dazu gehören Artikel über SVG-Koordinatensysteme und -Einheiten, SVG-Grundformen, SVG-Pfaddaten, SVG-Text, grundlegende SVG-Transformationen, SVG-Farbe, Füllungen und Striche in SVG, eingebettete SVG-Inhalte sowie SVG-Filter und -Verläufe.
- SVG-Koordinatensysteme und -Einheiten In diesem Artikel finden Sie die Beschreibung des Arbeitsbereichs von SVG, der durch die Werte der Viewport- und ViewBox-Attribute definiert wird.
- SVG-Formen In diesem Artikel erfahren Sie, wie Sie verschiedene einfache Formen erstellen und einige Stileigenschaften darauf anwenden.
- SVG-Pfaddaten Dieser Artikel zeigt, wie die Pfade zum Zeichnen verschiedener Umrisse oder Formen durch die Kombination von Linien, Bögen und Bezier-Kurven verwendet werden können. Die Befehlsgruppe für die SVG-Pfaderstellung wird hier beschrieben.
- SVG-Text In diesem Artikel werden die Textinhaltselemente vorgestellt und einige allgemeine Attribute besprochen, die dabei helfen, den Text in einem SVG-Bild anzuzeigen, zu formatieren und zu formatieren.
- Grundlegende SVG-Transformationen Sie erfahren, wie Sie die Transformationsfunktionen für die Drehung, Skalierung, Verschiebung und Neigung von Grafikobjekten über das SVG-Transformationsattribut anwenden und betrachten Codebeispiele für SVG-Transformationen.
- SVG-Transformationsmatrix Erfahren Sie, wie Sie eine Transformationsmatrix verwenden, um SVG-Grafiken zu drehen, zu skalieren, zu übersetzen und zu neigen, und betrachten Sie Codebeispiele für SVG-Transformationen.
- Füllungen und Striche in SVG In diesem Artikel beschreiben wir mehrere Eigenschaften, mit denen Sie verschiedene Aspekte von Füllung und Strich festlegen können, einschließlich Farbe, Deckkraft, Dicke, Verwendung von Strichen usw.
- SVG-Farbe Dieser Artikel befasst sich ausführlich mit den verschiedenen Möglichkeiten, SVG-Texte und -Formen einzufärben. Sie finden einen Überblick darüber, wie Farbe definiert wird, einschließlich der verschiedenen Möglichkeiten, die Transparenz von SVG-Inhalten zu steuern.
- SVG-Hintergrundfarbe In diesem Artikel besprechen wir, was ein Hintergrund in SVG ist. Sie finden auch SVG-Codebeispiele und eine umfassende Anleitung zum Festlegen oder Ändern einer Hintergrundfarbe.
- SVG Embedded Content ist Inhalt, der aus einer anderen Ressource in das Dokument importiert wird. Sie erfahren, wie Sie Bitmap- und HTML-Elemente in ein SVG-Objekt einbinden und rendern.
- SVG-Filter und -Verläufe Filterprimitive, die Unschärfe-, Farb- und Lichteffekte erzeugen, werden überprüft. Das Kapitel zeigt, wie lineare oder radiale Farbverläufe jede Linie, Form oder jeden Text in SVG-Grafiken verzieren können.
In den nächsten SVG-Artikeln werden wir Vektorbilder mit XML-Code erstellen. Die Abbildung zeigt das Aspose-Logo – SVG-Bild. Mit nur wenigen Codezeilen können Sie ein Symbol, ein Logo oder ein beliebiges einfaches Bild erstellen.
Im Folgenden wird ein Beispiel eines SVG-Codes für das Aspose-Logo ( aspose.svg) gezeigt:
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 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-Apps funktionieren auf jedem Betriebssystem mit einem Webbrowser und erfordern keine zusätzliche Softwareinstallation. Es ist eine schnelle und einfache Möglichkeit, Ihre SVG-bezogenen Aufgaben effizient und effektiv zu lösen!