Path Builder – Créer des SVG Paths en C#

Créer un SVG Path avec Aspose.SVG

Les SVG paths sont l’une des fonctionnalités SVG les plus puissantes pour créer des graphiques vectoriels personnalisés, courbes, contours et formes complexes. Avec Aspose.SVG Builder API, les développeurs peuvent créer des SVG path elements en C# avec une syntaxe fluide lisible.

Cet article explique comment créer des SVG paths en C#, construire des graphiques vectoriels complexes par programmation et utiliser des SVG text paths avec Aspose.SVG for .NET.

Path Builder

La classe PathBuilder simplifie la création de SVG paths grâce à des méthodes pour les commandes courantes comme M, L, C, Q, A et Z.

Aspose.SVG Builder API fournit SVGPathElementBuilder pour construire des éléments SVG <path> par programmation. Avec PathBuilder, les commandes SVG path sont définies par des méthodes fluentes chaînées.

Les SVG paths sont utilisés pour:

• illustrations vectorielles;
• formes personnalisées;
• icônes;
• graphiques et diagrammes;
• courbes et contours;
• effets text path.

Builders within Builders

SVG Builder API utilise des builders imbriqués pour définir intuitivement des structures SVG complexes. Dans l’exemple suivant, PathBuilder est un builder dans un builder: SVGSVGElementBuilder crée l’élément <svg>, tandis que PathBuilder construit l’élément <path> interne.

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

// Create an SVG path element with line commands using SVG Path Builder in C#

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element with specified width, height and viewBox, and add a <path> element to it
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(200).Height(200)
        .ViewBox(0, 0, 150, 150)

        .AddPath(p => p
        // 'D' method defines the 'd' attribute, which contains the path data
        .D(d => d
        // 'M' sets the starting point of the path (Move to x=50, y=50)
        .M(50, 50)
        // 'L' draws a line from the current point to the new point (Line to x=100, y=50)
        .L(100, 50)
        // Another 'L' to draw a line to a new point (Line to x=100, y=100)
        .L(100, 100)
        // 'Z' closes the path by drawing a line to the starting point
        .Z())
        // Sets the fill color of the path to teal
        .Fill(Color.Teal))
        .Build(document.FirstChild as SVGSVGElement);

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "path.svg"));
}

Fonctionnement du Path

Dans cet exemple, AddPath() définit un élément <path>. La méthode D() définit les SVG path data avec des commandes SVG path:

• M(50, 50) déplace le curseur au point de départ;
• L(100, 50) crée un segment de ligne;
• Z() ferme le path.

La syntaxe fluide simplifie la génération de SVG paths et rend les définitions plus faciles à lire et à maintenir.

SVG Path Commands pris en charge par PathBuilder

PathBuilder prend en charge les commandes SVG path absolues et relatives pour créer des lignes, courbes, arcs et graphiques vectoriels complexes.

Command	Relative Command	Description
M	m	Déplacer le point courant
L	l	Tracer une ligne droite
H	h	Tracer une ligne horizontale
V	v	Tracer une ligne verticale
C	c	Tracer une courbe de Bézier cubique
S	s	Tracer une courbe cubique lissée
Q	q	Tracer une courbe de Bézier quadratique
T	t	Tracer une courbe quadratique lissée
A	a	Tracer un arc elliptique
Z	z	Fermer le path courant

Ajouter des SVG Path Data personnalisées

Les path data peuvent aussi être ajoutées directement sous forme de chaîne avec AddPathSegment().

.D(d => d.AddPathSegment(
    "M199 89 C206 66 235 25 270 30 286 38 298 59 310 73"
))

Cette approche est utile lors de l’importation de SVG path data existantes ou de graphiques SVG générés par des outils externes.

Créer des SVG Curves et Bézier Paths

Les SVG paths prennent en charge les courbes de Bézier quadratiques et cubiques pour des graphiques vectoriels lisses et des contours complexes.

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element with specified width, height and viewBox, and add a <path> element to it
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(500).Height(500)
        .ViewBox(0, 0, 400, 400)

        .AddPath(p => p
            .D(d => d
            .M(80, 210)
            .Q(95, 110, 200, 200)
            .T(350, 200)
        )
        // Sets the fill color of the path to red
        .Fill(Color.Red))
        .Build(document.FirstChild as SVGSVGElement);

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "curve-path.svg"));
}

Dans cet exemple:

• Q() crée une courbe de Bézier quadratique;
• T() poursuit automatiquement la courbe lissée.

Les commandes de courbe sont utilisées dans les illustrations, graphiques, signatures et éléments SVG décoratifs.

SVG TextPath

SVG peut placer du texte le long d’un path défini par <path>. Cela se fait avec un élément <textPath> et l’attribut href.

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

// Create SVG text along a path using SVG Builder in C#

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element with specified width, height, and viewBox, and add into it <path> elements
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(1200).Height(300)
        .ViewBox(0, 0, 1200, 300)

        .AddPath(p => p.Id("Path1")
            .Fill(f => f.None()).Stroke(Color.IndianRed).Transform(t => t.Translate(-100, 40))
            .D(d => d.AddPathSegment("M 199 89 C 206 66 235 25 270 30 286 38 298 59 310 73 321 87 338 99 356 103 387 111 396 90 410 85"))
         )

        .AddPath(p => p.Id("Path2")
            .Fill(f => f.None()).Stroke(Paint.None).Transform(t => t.Translate(400, -100))
            .D(d => d.M(80, 210).Q(95, 110, 200, 200).T(400, 200)))


         .AddText(t => t.FontSize(30).Fill(Color.Teal)
             .AddTextPath(tp => tp
                 .Href("#Path1")
                 .AddContent("SVG textPath element")
              )
             .AddTextPath(tp => tp
                  .Href("#Path2")
                  .AddContent("SVG can place text along a path")
              )
         )

        .Build(document.FirstChild as SVGSVGElement);

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "text-path.svg"));
}

Dans l’exemple, deux paths avec des attributs id différents sont créés. Le premier utilise AddPathSegment(), le second utilise M(), Q() et T(). L’élément SVG <textPath> référence l’id du <path> et affiche le texte le long de ce path:

Les builders within builders sont également utilisés: SVGSVGElementBuilder crée <svg>, tandis que des builders imbriqués ajoutent <path>, <text> et <textPath>.

Erreurs courantes et corrections

Problème	Cause possible	Correction recommandée
Le SVG path n’est pas visible	Styles fill ou stroke manquants	Appliquer Fill() ou Stroke()
La forme du path semble incomplète	Le path n’est pas fermé	Utiliser Z()
Le texte ne suit pas la courbe	Référence de path incorrecte	Vérifier que Href() correspond à Id()
Les courbes semblent déformées	Points de contrôle incorrects	Ajuster les points de contrôle Bézier
Les path data importées ne s’affichent pas	Syntaxe SVG path invalide	Valider la chaîne SVG path avant l’import

Quick Recipes

1. Créer un triangle simple

using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(200).Height(200)
        .ViewBox(0, 0, 150, 150)
        .AddPath(p => p
            .D(d => d
            .M(50, 150)
            .L(150, 150)
            .L(100, 50)
            .Z())
        .Fill(Color.Teal))
        .Build(document.FirstChild as SVGSVGElement);
    document.Save("triangle.svg");
}

2. Ajouter un path segment

    .AddPath(p => p
        .Fill(Color.IndianRed)
        .D(d => d.AddPathSegment("M10 75 Q150 0 290 75"))
        )

3. Combiner plusieurs segments

    .AddPath(p => p
    .Fill(Color.CadetBlue)
    .Stroke(Color.Red)
    .StrokeWidth(2)
    .D(d => d
        .AddPathSegment("M40 120")
        .AddPathSegment("C70 20 140 20 170 120")
        .AddPathSegment("S270 220 300 120")
        .AddPathSegment("Q250 180 170 170")
        .AddPathSegment("Q90 160 40 120")
        )
    )

Note: Le premier recipe est un exemple complet avec les directives using indiquées plus haut. Les autres recipes sont des fragments à intégrer dans un workflow complet de création SVG.

FAQ

1. PathBuilder est-il préférable aux SVG path strings manuelles?
Pour les graphiques SVG complexes, PathBuilder est généralement plus facile à maintenir et à déboguer.

2. Pourquoi utiliser SVG paths plutôt que des shapes simples?
Les SVG paths sont plus flexibles que <rect> ou <circle> et peuvent représenter des formes complexes, des courbes et des graphiques vectoriels.

3. Puis-je convertir des SVG path data existantes en commandes PathBuilder?
Oui. Les valeurs existantes de l’attribut d peuvent être traduites en commandes PathBuilder ou ajoutées avec AddPathSegment().

4. Les SVG paths sont-ils indépendants de la résolution?
Oui. Ils sont vectoriels et se redimensionnent sans perte de qualité.

5. Un SVG path peut-il contenir plusieurs formes séparées?
Oui. Un path peut contenir plusieurs subpaths avec plusieurs commandes M.

6. Quelle est la différence entre commandes relatives et absolues?
Les commandes absolues utilisent des coordonnées fixes, tandis que les commandes relatives calculent les positions depuis le point courant.

Ressources connexes

• Consultez SVG Path Data pour apprendre les SVG paths et path commands.
• L’article Modifier le fichier SVG explique comment modifier des SVG paths avec Aspose.SVG for .NET.
• L’article Element Builders présente les Element Builders de SVG Builder API.
• L’article Rule Builder explique la création de CSS style rules dans SVG.
• L’article Paint Builder présente PaintBuilder pour les valeurs stroke et fill.