Effet d'ombre portée SVG C#

Les images SVG sont des images vectorielles adaptées au Web qui peuvent être recherchées, indexées, compressées et scénarisées. Alors que les ombres sont une caractéristique de conception courante utilisée pour rendre les images attrayantes et proéminentes. Parfois, vous devrez peut-être ajouter un effet d’ombre portée à une image SVG, comme une icône, ou du texte, etc. En conséquence, cet article explique comment créer un effet d’ombre portée sur une image SVG par programmation en C#.

Effet d’ombre portée sur une image SVG - Téléchargement gratuit de l’API C#

Aspose.SVG pour .NET prend en charge l’utilisation d’images SVG car il offre de nombreuses fonctionnalités pour modifier, mettre à jour ou convertir des graphiques vectoriels évolutifs par programmation en C#. Accédez simplement aux fichiers DLL de référence à partir de la page Nouvelles versions, ou exécutez la commande NuGet ci-dessous pour le configurer à partir de la galerie NuGet, ainsi que toutes les dépendances, le cas échéant.

PM> Install-Package Aspose.SVG

Comment créer un effet d’ombre portée sur une image SVG en C#

Les étapes suivantes décrivent l’ensemble du processus d’ajout d’un effet d’ombre portée sur une image SVG :

  1. Créez un objet de la classe SVGDocument.
  2. Définissez l’URL de l’espace de noms SVG et obtenez l’élément SVG racine.
  3. Créez un élément defs et un filterElement pour ajouter la primitive de filtre feOffset.
  4. Créez un filtre feBlend et un élément de texte.
  5. Enregistrez l’image SVG de sortie avec l’effet Ombre portée en appelant la méthode Save.

Créer un effet d’ombre portée sur une image SVG par programmation en C

Veuillez suivre les étapes ci-dessous pour créer un effet d’ombre portée sur une image SVG par programmation en C# :

  1. Créez un objet de la classe SVGDocument.
  2. Définissez l’URL de l’espace de noms SVG et obtenez l’élément SVG racine.
  3. Créez un élément defs et un filterElement pour ajouter la primitive de filtre feOffset.
  4. Créez un filtre feBlend et un élément de texte.
  5. Enregistrez l’image SVG de sortie avec un effet d’ombre portée en appelant la méthode Save.

L’extrait de code ci-dessous montre comment créer un effet d’ombre portée sur une image SVG en C# :

// Initialiser un objet de la classe SVGDocument
Aspose.Svg.SVGDocument document = new Aspose.Svg.SVGDocument();

// Définir l'URL de l'espace de noms SVG
string SvgNamespace = "http://www.w3.org/2000/svg";

// Obtenir l'élément svg racine du document
Aspose.Svg.SVGSVGElement svgElement = document.RootElement;

// Créez un élément defs et ajoutez-le à svgElement
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);

// Créez un élément de filtre et ajoutez-le à defsElement
var filterElement = (Aspose.Svg.SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
filterElement.Id = "shadow";
filterElement.SetAttribute("x", "-20px");
filterElement.SetAttribute("y", "-20px");
filterElement.SetAttribute("height", "150px");
filterElement.SetAttribute("width", "150px");
defsElement.AppendChild(filterElement);

// Créez une primitive de filtre feOffset et ajoutez-la à filterElement
var feOffsetElement = (Aspose.Svg.Filters.SVGFEOffsetElement)document.CreateElementNS(SvgNamespace, "feOffset");
feOffsetElement.In1.BaseVal = "SourceAlpha";
feOffsetElement.SetAttribute("result", "offset");
feOffsetElement.SetAttribute("dx", "3");
feOffsetElement.SetAttribute("dy", "3");
filterElement.AppendChild(feOffsetElement);

//// Crée une primitive de filtre feGaussianBlur et l'ajoute au filterElement
//var feGaussianBlurElement = (Aspose.Svg.Filters.SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
//feGaussianBlurElement.In1.BaseVal = "décalage" ;
//feGaussianBlurElement.StdDeviationX.BaseVal = 3;
//feGaussianBlurElement.StdDeviationY.BaseVal = 3;
//feGaussianBlurElement.SetAttribute("résultat", "flou");
//filterElement.AppendChild(feGaussianBlurElement);

// Créez une primitive de filtre feBlend et ajoutez-la à filterElement
var feBlendElement = (Aspose.Svg.Filters.SVGFEBlendElement)document.CreateElementNS(SvgNamespace, "feBlend");
feBlendElement.In1.BaseVal = "SourceGraphic";
feBlendElement.In2.BaseVal = "blur";
feBlendElement.SetAttribute("mode", "normal");
filterElement.AppendChild(feBlendElement);

// Créez un élément de texte et ajoutez-le à svgElement
var textElement = (Aspose.Svg.SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
textElement.Style.FontSize = "5em";
textElement.SetAttribute("x", "20px");
textElement.SetAttribute("fill", "#C0C0C0");
textElement.SetAttribute("y", "100px");
textElement.TextContent = "Aspose.SVG API";
textElement.SetAttribute("filter", "url(#shadow)");
svgElement.InsertBefore(textElement, svgElement.FirstChild);

// Enregistrez le document SVG
document.Save(Path.Combine(dataDir, "DropShadow.svg"));

Veuillez noter que quelques lignes de code sont commentées dans l’extrait de code ci-dessus. Vous pouvez choisir de le décommenter pour appliquer l’effet de flou gaussien sur l’ombre si vous préférez un effet d’ombre portée flou qui fait ressortir la sortie avec une ombre plus lisse.

Obtenez une licence temporaire gratuite

Vous pouvez demander une licence temporaire gratuite pour tester l’API à sa pleine capacité.

Conclusion

Dans cet article, vous avez appris à créer un effet d’ombre portée sur une image SVG par programmation en C#. Vous pouvez traiter une image SVG existante en la chargeant ou créer une nouvelle image SVG à partir de zéro en fonction de vos besoins. De plus, vous pouvez visiter la section documentation pour découvrir de nombreuses autres fonctionnalités de l’API. Si vous avez besoin de discuter de questions ou de préoccupations avec nous, n’hésitez pas à nous contacter via forum.

Voir également