Convertir du texte en SVG en C#

L’élément SVG Text est utilisé pour définir un texte en SVG. SVG (Scalable Vector Graphics) est un format de fichier vectoriel adapté au Web. Il est utilisé pour afficher des informations visuelles sur une page Web. Nous pouvons facilement écrire n’importe quel texte en SVG en utilisant l’élément SVG Text. Dans cet article, nous allons apprendre à convertir du texte en SVG en C#.

Les sujets suivants seront traités dans cet article :

  1. API C# pour convertir du texte en SVG
  2. Qu’est-ce qu’un texte SVG
  3. Convertir le texte en SVG
  4. Convertir du texte avec TSpan en SVG
  5. Texte SVG avec TextPath
  6. Appliquer des styles de texte SVG

API C# pour convertir du texte en SVG

Pour convertir du texte en SVG, 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. Nous avons la méthode Save() dans cette classe qui permet d’enregistrer SVG dans le chemin de fichier spécifié. La classe SVGTextElement représente l’élément ’text’. L’interface SVGTSpanElement correspond à l’élément ’tspan’. L’API fournit la classe SVGTextPathElement représentant l’élément ’textPath’ et SVGPathElement pour l’élément ‘path’. Nous pouvons définir diverses propriétés/attributs pour les éléments SVG à l’aide de la méthode SetAttribute(string, string). La méthode AppendChild(Node) de l’API ajoute le nouvel enfant du nœud à la fin de la liste des enfants de ce noeud.

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 qu’un texte SVG ?

En SVG, le texte est rendu à l’aide de l’élément . Par défaut, le texte est rendu avec un remplissage noir et sans contour. Nous pouvons définir les attributs suivants :

  • x : définit la position du point horizontalement.
  • y : définit la position du point verticalement.
  • fill : définit la couleur du texte rendu.
  • transformer : faire pivoter, translater, incliner et mettre à l’échelle.

Convertir du texte en SVG à l’aide de C#

Nous pouvons ajouter n’importe quel texte à SVG 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 l’objet de classe SVGTextElement.
  4. Ensuite, définissez divers attributs à l’aide de la méthode SetAttribute().
  5. Après cela, appelez la méthode AppendChild() pour l’ajouter à l’élément racine.
  6. Enfin, enregistrez l’image SVG de sortie à l’aide de la méthode Save().

L’exemple de code suivant montre comment convertir du texte en SVG en C#.

// Cet exemple de code montre comment ajouter du texte à SVG.
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";

// Définir l'élément de texte SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Définir le texte à afficher
text.TextContent = "The is a simple SVG text!";

// Définir divers attributs
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// Ajouter du texte à la racine
svgElement.AppendChild(text);

// Enregistrer au format SVG
document.Save(@"C:\Files\simple-text.svg");
Convertir du texte en SVG à l'aide de CSharp

Convertissez du texte en SVG à l’aide de C#.

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

<svg xmlns="http://www.w3.org/2000/svg">
    <text fill="blue" x="10" y="30">The is a simple SVG text!</text>
</svg>

Convertir du texte avec TSpan en SVG en C#

L’élément SVG définit un sous-texte dans un élément . Nous pouvons ajouter n’importe quel texte avec un élément tspan à SVG 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 l’objet de classe SVGTextElement.
  4. Définissez éventuellement divers attributs à l’aide de la méthode SetAttribute().
  5. Ensuite, définissez l’objet SVGTSpanElement.
  6. Ensuite, définissez ses attributs à l’aide de la méthode SetAttribute().
  7. Maintenant, appelez la méthode AppendChild() pour l’ajouter à l’élément SVGTextElement.
  8. Répétez les étapes ci-dessus pour ajouter d’autres objets SVGTSpanElement.
  9. Après cela, appelez la méthode AppendChild() pour ajouter SVGTextElement à l’élément racine.
  10. Enfin, enregistrez l’image SVG de sortie à l’aide de la méthode Save().

L’exemple de code suivant montre comment convertir du texte avec tspan en SVG en C#.

// Cet exemple de code montre comment ajouter du texte avec tspan à SVG.
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";

// Élément de texte SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");
text.SetAttribute("style", "font-family:arial");
text.SetAttribute("x", "20");
text.SetAttribute("y", "60");

// Élément SVG TSpan
var tspan1 = (SVGTSpanElement)document.CreateElementNS(@namespace, "tspan");
tspan1.TextContent = "ASPOSE";
tspan1.SetAttribute("style", "font-weight:bold; font-size:55px");
tspan1.SetAttribute("x", "20");
tspan1.SetAttribute("y", "60");

// Ajouter au texte SVG
text.AppendChild(tspan1);

// Un autre élément TSpan
var tspan2 = (SVGTSpanElement)document.CreateElementNS(@namespace, "tspan");
tspan2.TextContent = "Your File Format APIs";
tspan2.SetAttribute("style", "font-size:20px; fill:grey");
tspan2.SetAttribute("x", "37");
tspan2.SetAttribute("y", "90");

// Ajouter au texte SVG
text.AppendChild(tspan2);

// Ajouter du texte SVG à la racine
svgElement.AppendChild(text);

// Enregistrer le SVG
document.Save(@"C:\Files\svg-tSpan.svg");
SVG-Texte-avec-tspan-dans-CSharp

Convertir du texte avec tspan en SVG en C#.

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

<svg xmlns="http://www.w3.org/2000/svg">
    <text style="font-family: arial;" x="20" y="60">
        <tspan style="font-weight: bold; font-size: 55px;" x="20" y="60">ASPOSE</tspan>
        <tspan style="font-size: 20px; fill: grey;" x="37" y="90">Your File Format APIs</tspan>
    </text>
</svg>

Texte SVG avec TextPath en C#

Nous pouvons également rendre le texte le long de la forme d’un élément et enfermer le texte dans un élément . Il permet de définir une référence à l’élément à l’aide de l’attribut href. Nous pouvons convertir du texte avec des chemins de texte 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 l’objet de classe SVGPathElement et définissez divers attributs à l’aide de la méthode SetAttribute().
  4. Après cela, appelez la méthode AppendChild() pour l’ajouter à l’élément racine.
  5. Ensuite, créez l’objet de classe SVGTextElement.
  6. Ensuite, initialisez l’objet SVGTextPathElement et définissez le contenu du texte.
  7. Ensuite, affectez SVGPathElement à son attribut href à l’aide de la méthode SetAttribute().
  8. Ensuite, appelez la méthode AppendChild() pour ajouter SVGTextPathElement à l’élément SVGTextElement.
  9. Après cela, ajoutez SVGTextElement à l’élément racine en utilisant la méthode AppendChild().
  10. Enfin, enregistrez l’image SVG de sortie à l’aide de la méthode Save().

L’exemple de code suivant montre comment convertir du texte avec textPath en SVG en C#.

// Cet exemple de code montre comment ajouter du texte avec textPath à SVG.
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";

// Élément de chemin SVG
var path1 = (SVGPathElement)document.CreateElementNS(@namespace, "path");
path1.SetAttribute("id", "path_1");
path1.SetAttribute("d", "M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100");
path1.SetAttribute("fill", "transparent");

// Ajouter le chemin SVG à l'élément racine
svgElement.AppendChild(path1);

// Another Élément de chemin SVG
var path2 = (SVGPathElement)document.CreateElementNS(@namespace, "path");
path2.SetAttribute("id", "path_2");
path2.SetAttribute("d", "M 50 100 Q 25 10 180 100 T 350 100");
path2.SetAttribute("transform", "translate(0,75)");
path2.SetAttribute("fill", "transparent");

// Ajouter le chemin SVG à l'élément racine
svgElement.AppendChild(path2);

// Élément de texte SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Créer un élément de chemin de texte SVG
var textPath1 = (SVGTextPathElement)document.CreateElementNS(@namespace, "textPath");
textPath1.TextContent = "Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.";
textPath1.SetAttribute("href", "#path_1");

// Ajouter le chemin du texte SVG au texte SVG
text.AppendChild(textPath1);

// Un autre élément de chemin de texte SVG
var textPath2 = (SVGTextPathElement)document.CreateElementNS(@namespace, "textPath");
textPath2.TextContent = "Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.";
textPath2.SetAttribute("href", "#path_2");

// Ajouter le chemin du texte SVG au texte SVG
text.AppendChild(textPath2);

// Ajouter du texte SVG à la racine
svgElement.AppendChild(text);

// Enregistrer le SVG
document.Save(@"C:\Files\svg-textPath.svg");
SVG-Text-with-textPath-in-CSharp

Convertissez le texte avec textPath en SVG en C#.

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

<svg xmlns="http://www.w3.org/2000/svg">
    <path id="path_1" d="M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100" fill="transparent"/>
    <path id="path_2" d="M 50 100 Q 25 10 180 100 T 350 100" transform="translate(0,75)" fill="transparent"/>
    <text>
        <textPath href="#path_1">Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.</textPath>
        <textPath href="#path_2">Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.</textPath>
    </text>
</svg>

Appliquer le style de texte SVG en C#

Nous pouvons ajouter n’importe quel texte à SVG 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 l’objet de classe SVGTextElement.
  4. Ensuite, définissez l’attribut de style à l’aide de la méthode SetAttribute().
  5. Après cela, appelez la méthode AppendChild() pour l’ajouter à l’élément racine.
  6. Enfin, enregistrez l’image SVG de sortie à l’aide de la méthode Save().

L’exemple de code suivant montre comment appliquer des styles CSS au texte SVG en C#.

// Cet exemple de code montre comment ajouter du texte à SVG et appliquer des attributs de style CSS.
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";

// Définir l'élément de texte SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Définir le texte à afficher
text.TextContent = "The is a simple SVG text!";

// Définir divers attributs
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// Appliquer le style
text.SetAttribute("style", "font-weight:bold; font-style: italic; text-decoration: line-through; text-transform: capitalize;");

// Ajouter du texte à la racine
svgElement.AppendChild(text);

// Enregistrer au format SVG
document.Save(@"C:\Files\text-style.svg");
Appliquer-SVG-Text-Style-in-CSharp

Appliquer le style de texte SVG en C#.

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

<svg xmlns="http://www.w3.org/2000/svg">
    <text fill="blue" x="10" y="30" style="font-weight: bold; font-style: italic; text-decoration-line: line-through; text-transform: capitalize;">The is a simple SVG text!</text>
</svg>

Obtenez une licence temporaire gratuite

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

Conclusion

Dans cet article, nous avons appris à :

  • créer une nouvelle image SVG ;
  • utiliser des éléments de texte SVG ;
  • rendre le texte SVG dans le chemin ;
  • définir les attributs de position et de remplissage pour le texte SVG ;
  • définir les attributs de style pour le texte SVG en C#.

Outre la conversion de texte en SVG en C#, 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 d’assistance gratuit.

Voir également