Remplissage et contour en SVG avec C#

SVG (Scalable Vector Graphics) est un format de fichier vectoriel convivial basé sur XML. Il est utilisé pour afficher des informations visuelles sur une page Web. Les images SVG sont évolutives sans modifier la qualité de l’image. Dans cet article, nous allons apprendre à travailler avec le remplissage et le contour en SVG à l’aide de C#.

Les sujets suivants seront traités dans cet article :

1. API C# pour remplir et barrer en SVG
2. Qu’est-ce que le remplissage SVG
3. Qu’est-ce que l’AVC SVG
4. Traits et remplissages en SVG
5. Remplissez et contournez le cercle en SVG
6. Chemin de remplissage et de contour en SVG
7. Appliquer le remplissage et le contour à l’aide du style

API C# pour remplir et barrer en SVG

Pour travailler avec les attributs de remplissage et de trait de SVG en C#, nous utiliserons l’API Aspose.SVG pour .NET. Il permet le chargement, l’analyse, le rendu, la création et la conversion de fichiers SVG en formats populaires sans aucune dépendance logicielle.

La classe SVGDocument de l’API représente la racine de la hiérarchie SVG et contient l’intégralité du contenu. La méthode Save() de cette classe permet d’enregistrer SVG dans le chemin de fichier spécifié. La méthode QuerySelector() renvoie le premier élément du document correspondant au sélecteur. L’API prend en charge l’utilisation de formes populaires telles que les rectangles, les cercles, les ellipses, les lignes, les polylignes, etc. L’API fournit des classes distinctes pour représenter ces formes prises en charge telles que SVGCircleElement pour le cercle, SVGPolygonElement pour le polygone, etc.

Veuillez soit télécharger la DLL de l’API ou l’installer à l’aide de NuGet.

PM> Install-Package Aspose.SVG

Qu’est-ce que le remplissage SVG?

La propriété fill est l’un des attributs de présentation SVG de base utilisés pour définir la couleur de la forme à l’intérieur de son contour.

Nous pouvons définir les attributs de remplissage suivants :

• fill : Définit la couleur de remplissage. Spécifiez aucun ou transparent s’il n’y a pas de remplissage.
• fill-opacity : définit la valeur d’opacité entre 0 et 1.
• règle de remplissage : définit la manière dont la zone intérieure d’une forme est déterminée, par exemple non nul, pairimpair.

Qu’est-ce que SVG Stroke?

La propriété stroke définit le contour ou une bordure de formes SVG. L’attribut de présentation du trait définit la couleur du contour de la forme.

Nous pouvons définir les attributs de trait suivants :

• contour : définit la valeur de la couleur.
• stroke-dasharray : spécifie les types de lignes en pointillés.
• trait-dashoffset
• stroke-linecap : contrôle la forme des extrémités des lignes telles que bout à bout, carré et rond.
• stroke-linejoin : spécifie la manière dont deux lignes se rejoignent, telles que l’onglet, le biseau et l’arrondi.
• stroke-miterlimit : Doit être supérieur ou égal à 1 si utilisé.
• stroke-opacity : définit la valeur d’opacité entre 0 et 1.
• stroke-width : définit la largeur.

Remplissages et contours en SVG

Le remplissage et le trait sont utilisés pour ajouter de la couleur, des dégradés ou des motifs aux graphiques en SVG. Le remplissage peint l’intérieur de l’élément SVG, tandis que le trait peint son contour. Nous pouvons spécifier à la fois le remplissage et le trait dans l’attribut de style ou les utiliser comme attributs de présentation.

Nous pouvons définir des remplissages SVG et des contours SVG dans l’attribut style comme indiqué ci-dessous :

style="stroke:#00ff00; stroke-width:2; fill:#ff0000"

Nous pouvons également utiliser les mêmes propriétés de style dans les attributs de présentation comme indiqué ci-dessous :

stroke="green" stroke-width="2" fill="#ff0000"

Pour spécifier la couleur SVG, nous pouvons utiliser des noms de couleur tels que rouge, bleu, etc. Nous pouvons également utiliser des valeurs RVB ou des valeurs HEX pour les couleurs.

Cercle de remplissage et de contour en C#

Nous pouvons définir les propriétés de remplissage SVG et de contour SVG pour un cercle en suivant les étapes ci-dessous :

1. Tout d’abord, chargez un SVG existant à l’aide de la classe SVGDocument.
2. Ensuite, récupérez l’élément racine du document.
3. Ensuite, recherchez tous les éléments du cercle à l’aide de la méthode QuerySelectorAll().
4. Après cela, définissez les attributs de remplissage pour le SVGCircleElement sélectionné.
5. Facultativement, définissez les attributs de trait pour le SVGCircleElement sélectionné.
6. Enfin, enregistrez l’image SVG de sortie à l’aide de la méthode Save().

L’exemple de code suivant montre comment définir le remplissage et le contour d’un élément cercle de SVG en C#.

// Cet exemple de code montre comment définir les attributs de remplissage et de trait pour un élément cercle de SVG en C#.
// Charger une image SVG existante
var document = new SVGDocument(@"C:\Files\SVG\Circle.svg");

// Obtenir l'élément SVG racine du document
var svgElement = document.RootElement;

// Trouver tous les éléments du cercle dans l'élément g
NodeList circleNodes = svgElement.QuerySelectorAll("circle");

// Obtenir le premier élément de cercle
SVGCircleElement circleElement = circleNodes[0] as SVGCircleElement;

// Définir les attributs de remplissage
circleElement.SetAttribute("fill", "#0F0");
circleElement.SetAttribute("fill-opacity", "0.3");

// Définir les attributs de trait
circleElement.SetAttribute("stroke", "#508484");
circleElement.SetAttribute("stroke-width", "10");

// Enregistrer le SVG
document.Save(@"C:\Files\SVG\Fill-Circle.svg");

Veuillez trouver ci-dessous le contenu de l’image Circle.svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="none"/>
    </g>
</svg>

Voici le contenu de l’image Fill-Circle.svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="#0F0" fill-opacity="0.3" stroke="#508484" stroke-width="10"/>
    </g>
</svg>

Chemin de remplissage et de contour en C#

Nous pouvons définir les propriétés de remplissage SVG et de trait SVG pour un élément de chemin dans SVG en suivant les étapes ci-dessous :

1. Tout d’abord, chargez un SVG existant à l’aide de la classe SVGDocument.
2. Ensuite, récupérez l’élément racine du document.
3. Ensuite, récupérez l’élément path à l’aide de la méthode QuerySelector().
4. Après cela, définissez les attributs de remplissage pour le SVGPathElement sélectionné.
5. Facultativement, définissez les attributs de trait pour le SVGPathElement sélectionné.
6. Enfin, enregistrez l’image SVG de sortie à l’aide de la méthode Save().

L’exemple de code suivant montre comment définir le remplissage et le contour d’un élément de chemin d’accès de SVG en C#.

// Cet exemple de code montre comment définir les attributs de remplissage et de trait pour un élément de chemin de SVG en C#.
// Charger une image SVG existante
var document = new SVGDocument(@"C:\Files\SVG\Sample-Path.svg");

// Obtenir l'élément SVG racine du document
var svgElement = document.RootElement;

// Obtenir le premier élément de chemin
SVGPathElement lineElement = svgElement.QuerySelector("path:nth-child(1)") as SVGPathElement;

// Définir les attributs de remplissage
lineElement.SetAttribute("fill", "orange");
lineElement.SetAttribute("fill-opacity", "0.6");

// Définir les attributs de trait
lineElement.SetAttribute("stroke", "#508484");
lineElement.SetAttribute("stroke-width", "10");

// Enregistrer le SVG
document.Save(@"C:\Files\SVG\Fill-Path.svg");

Veuillez trouver ci-dessous le contenu de l’image Sample-Path.svg.

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" fill="none" />
    </g>
</svg>

Veuillez trouver ci-dessous le contenu de l’image Fill-Path.svg.

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="#508484" stroke-width="10" fill="orange" fill-opacity="0.6"/>
    </g>
</svg>

Appliquer le remplissage et le contour à l’aide du style en C#

Nous pouvons également appliquer les propriétés de remplissage SVG et de contour SVG à l’aide de l’attribut de style CSS en suivant les étapes ci-dessous :

1. Tout d’abord, créez une instance de la classe SVGDocument.
2. Ensuite, récupérez l’élément racine du document.
3. Ensuite, créez un élément cercle à l’aide de la méthode CreateElementNS().
4. Ensuite, définissez les propriétés de base du cercle telles que Cx, Cy et R.
5. Ensuite, appliquez l’attribut de style à l’aide de la méthode SetAttribute().
6. Après cela, ajoutez l’enfant à l’aide de la méthode AppendChild().
7. Enfin, enregistrez l’image SVG de sortie à l’aide de la méthode Save().

L’exemple de code suivant montre comment appliquer le remplissage et le trait à l’aide du style CSS en C#.

// Cet exemple de code montre comment appliquer les attributs de remplissage et de contour à l'aide du style CSS en C#.
// Créer un nouveau SVG
using (var document = new SVGDocument())
{
    // Obtenir l'élément SVG racine du document
    var svgElement = document.RootElement;

    const string @namespace = "http://www.w3.org/2000/svg";
    
    // Ajouter un cercle
    var circle = (SVGCircleElement)document.CreateElementNS(@namespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    
    // Définir l'attribut de style
    circle.SetAttribute("style", "fill:blue; stroke:#fb6796; stroke-width:5");
    
    // Ajouter un cercle à l'élément racine
    svgElement.AppendChild(circle);
    
    // Enregistrer le SVG
    document.Save(@"C:\Files\SVG\ApplyStyle.svg");
}

<svg xmlns="http://www.w3.org/2000/svg">
	<g>
		<circle cx="50" cy="50" r="40" style="fill: blue; stroke: rgb(251, 103, 150); stroke-width: 5;"/>
	</g>
</svg>

Obtenez une licence temporaire gratuite

Vous pouvez obtenir une licence temporaire gratuite pour essayer Aspose.SVG pour .NET sans limitation d’évaluation.

Conclusion

Dans cet article, nous avons appris à :

• créer une nouvelle image SVG ;
• charger une image SVG existante ;
• modifier une image SVG ;
• définir les attributs de remplissage et de trait pour les formes de SVG ;
• définir les attributs de style pour les formes en C#.

En outre, vous pouvez en savoir plus sur Aspose.SVG pour .NET dans la documentation et explorer les différentes fonctionnalités prises en charge par l’API. En cas d’ambiguïté, n’hésitez pas à nous contacter sur notre forum.

Voir également

• Modifier la couleur ou l’arrière-plan SVG par programmation en C#