Changer la couleur d’arrière-plan SVG – Exemples C#

La couleur d’arrière-plan SVG est essentielle pour assurer la clarté et le contraste visuels, améliorant ainsi la visibilité et l’esthétique du contenu. Il est essentiel pour maintenir la cohérence de la conception, améliorer l’accessibilité en fournissant un texte lisible et définir les limites des compositions multicouches. Vous pouvez changer la couleur d’arrière-plan d’un SVG soit en modifiant le SVG directement, soit en appliquant des styles à l’aide de CSS ou de JavaScript.

Aspose.SVG for .NET API vous permet de modifier un document SVG et d’apporter des modifications à son contenu.

Dans cet article, vous apprendrez comment appliquer la couleur d’arrière-plan aux fichiers SVG à l’aide d’Aspose.SVG for .NET et comment utiliser la couleur d’arrière-plan des images SVG dans des documents HTML à l’aide de la bibliothèque Aspose.HTML C#.

Modifier SVG directement

Pour définir la couleur d’arrière-plan d’une image SVG, vous devez insérer un nouvel élément SVG, tel qu’un rectangle ou un cercle, comme premier élément enfant du document SVG. Cette méthode prend une règle sur l’ordre des éléments SVG: les éléments qui apparaissent plus tard dans le code SVG apparaissent au-dessus de ceux qui apparaissent plus tôt. En plaçant un rectangle ou un cercle au début du SVG, vous créez effectivement un calque d’arrière-plan qui se trouve sous tous les autres éléments graphiques.

Ajouter un arrière-plan au SVG

La méthode la plus courante pour définir la couleur d’arrière-plan en SVG consiste à créer un élément <rect> qui couvre l’intégralité du canevas SVG. Cette approche garantit que l’arrière-plan fait partie du contenu SVG lui-même. L’extrait de code suivant illustre comment ajouter un arrière-plan à SVG: créez un nouvel élément rectangle en SVG qui servira d’arrière-plan. Pour ce faire, le rectangle reçoit les attributs width="100%", height="100%" et fill="#ebf3f6", et est positionné de manière à apparaître derrière tout autre contenu SVG:

using Aspose.Svg;
using System.IO;
...

    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

    string documentPath = Path.Combine(DataDir, "tree.svg");

    // Load an SVG document from the file
    var document = new SVGDocument(documentPath);

    // Get root <svg> element of the document
    var svgElement = document.RootElement;

    // Create a rectangle element and set the "width", "height" and "fill" attributes
    var rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
    rectElement.X.BaseVal.Value = 3;
    rectElement.Y.BaseVal.Value = 3;
    rectElement.SetAttribute("width", "100%");
    rectElement.SetAttribute("height", "100%");
    rectElement.SetAttribute("fill", "#ebf3f6");

    // Add the rectangle element as the first child to <svg> element
    svgElement.InsertBefore(rectElement, svgElement.FirstChild);

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "add-background-color.svg"));

Changer la couleur d’arrière-plan SVG

Si votre document SVG comporte un élément qui sert de fond, comme par exemple un rectangle comme dans l’exemple précédent, changer la couleur de fond implique plusieurs étapes:

• Ouvrez un fichier SVG source.
• Récupérez l’élément racine <svg> du document.
• Obtenez le premier élément rectangle (ou un autre élément SVG qui sert de fond) pour changer de couleur.
• Définissez une nouvelle valeur d’attribut de remplissage pour l’élément <rect>.
• Enregistrez le document SVG modifié.

using Aspose.Svg;
using System.IO;
...

    // Load an SVG document from a file
    var document = new SVGDocument(Path.Combine(DataDir, "add-background-color.svg"));

    // Get root svg element of the document
    var svgElement = document.RootElement;

    // Get the first <rect> element to change color
    var rectElement = svgElement.QuerySelector("rect") as SVGRectElement;

    // Set a new "fill" attribute value for the <rect> element
    rectElement.SetAttribute("fill", "#fef4fd");

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "change-background-color.svg"));

Remarque: Cette méthode (méthode <rect>) est la plus cohérente entre les navigateurs et garantit que la couleur d’arrière-plan fait partie du SVG, même lorsque le SVG est exporté ou utilisé dans différents contextes.

La figure suivante montre l’image SVG originale (a), l’image avec l’arrière-plan ajouté (b) et l’image dans laquelle la couleur d’arrière-plan SVG a été modifiée (c):

Changer la couleur d’arrière-plan à l’aide de CSS

Changer la couleur d’arrière-plan SVG à l’aide de CSS est une tâche courante qui améliore la présentation visuelle des images SVG dans les pages Web. Bien que les éléments SVG ne prennent pas en charge une propriété native background-color, vous pouvez obtenir cet effet en utilisant CSS pour styliser des éléments SVG supplémentaires comme <rect> ou en appliquant des styles via CSS externe, interne ou en ligne.

CSS en ligne – Comprendre les pièges

Vous pouvez intuitivement tenter d’utiliser la propriété style="background-color" directement sur un élément <svg>, en vous attendant à ce qu’elle fonctionne de la même manière qu’elle le fait pour les éléments HTML comme <div> ou <p> . Cependant, cette approche est semée d’embûches et d’incompréhensions. Mais parfois ça marche ! Dans l’exemple suivant, nous utilisons la propriété background-color dans l’attribut style pour l’élément <svg>:

using Aspose.Svg;
using System.IO;
...

    // Prepare a path to a source SVG file
    string documentPath = Path.Combine(DataDir, "tulips.svg");

    // Load an SVG document from the file
    var document = new SVGDocument(documentPath);

    // Get root <svg> element of the document
    var svgElement = document.RootElement;

    // Create a style attribute for <svg> element
    svgElement.SetAttribute("style", "background: grey");

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "with-background-color.svg"));

Pourquoi cela semble-t-il fonctionner?

Dans certains navigateurs ou contextes de rendu, l’application de background-color à un élément SVG peut sembler fonctionner, car le navigateur peut remplir l’espace alloué au SVG avec la couleur spécifiée. Cependant, cet effet ne se produit pas parce que le SVG lui-même a un arrière-plan, mais parce que la zone autour ou derrière le contenu SVG est colorée. Il s’agit probablement d’un comportement accidentel, plutôt que d’une fonctionnalité définie par la spécification SVG.

Le problème avec cette approche

Le principal problème lié à l’utilisation de background-color dans l’attribut SVG style est qu’il ne fait pas partie de la spécification SVG. La norme SVG ne reconnaît pas background-color comme propriété de style valide pour un élément SVG. Cela signifie:

1. Ce qui fonctionne dans un navigateur peut ne pas fonctionner dans un autre.
2. L’arrière-plan ne fait pas réellement partie du contenu SVG, vous avez donc moins de contrôle sur son comportement et son apparence, en particulier lorsque le SVG est exporté, imprimé ou traité dans d’autres contextes.

CSS interne

Le CSS interne fait référence aux styles intégrés directement dans un document HTML ou SVG, généralement dans une balise <style>. Cela vous permet de définir des styles spécifiques qui s’appliquent uniquement au document actuel, sans affecter les autres documents ni nécessiter de feuilles de style externes.

Dans l’exemple suivant,

• l’élément <style> est créé et ajouté au SVG pour définir une classe CSS .background qui définit la couleur d’arrière-plan du SVG;
• l’élément <rect> est créé avec son attribut class défini sur background, qui applique le remplissage gris défini dans le CSS;
• l’élément <style> est inséré en premier, suivi de l’élément <rect>, garantissant que le rectangle fait office d’arrière-plan pour le SVG.

using Aspose.Svg;
using System.IO;
...

    // Set SVG Namespace URL
    string SvgNamespace = "http://www.w3.org/2000/svg";
    
    // Load an SVG document from the file
    var document = new SVGDocument(Path.Combine(DataDir, "tulips.svg"));

    // Get the root <svg> element of the document
    var svgElement = document.RootElement;

    // Create a <style> element
    var styleElement = (SVGStyleElement)document.CreateElementNS(SvgNamespace, "style");

    // Set the CSS content to define a background color class
    styleElement.TextContent = @".background {fill: grey;}";

    // Insert the <style> element at the beginning of the <svg> element
    svgElement.InsertBefore(styleElement, svgElement.FirstChild);

    // Create a rectangle element and set the class to "background"
    var rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
    rectElement.X.BaseVal.Value = 0;
    rectElement.Y.BaseVal.Value = 0;
    rectElement.SetAttribute("width", "100%");
    rectElement.SetAttribute("height", "100%");
    rectElement.SetAttribute("class", "background");

    // Add the rectangle element as the first child to the <svg> element, after the <style> element
    svgElement.InsertBefore(rectElement, svgElement.ChildNodes[1]);

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "add-background-color-with-css.svg"));

Cette approche permet une séparation nette du style et de la structure, en tirant parti du CSS pour une gestion plus facile et des modifications futures potentielles de la couleur d’arrière-plan du SVG. Le CSS interne est largement pris en charge par tous les navigateurs modernes, garantissant un rendu cohérent de vos images SVG.

La figure montre la visualisation du fichier SVG original (a) et du même fichier avec la couleur d’arrière-plan ajoutée (b):

Changer la couleur d’arrière-plan à l’aide de SVG Builder

Dans le code suivant, SVG Builder ajoute par programme une couleur d’arrière-plan à un document SVG existant (pour le fichier tulips.svg comme dans le cas précédent).

using Aspose.Svg;
using System.IO;
...

    // Initialize an SVG document
    using (var document = new SVGDocument(Path.Combine(DataDir, "tulips.svg")))
    {
        var svg = new SVGSVGElementBuilder()
            .Width(100, LengthType.Percentage)
            .Height(100, LengthType.Percentage)
            .Build(document.FirstChild as SVGSVGElement);

        // Create a new <g> element using SVGGElementBuilder and add <style> and <rect> elements to it
        var g = new SVGGElementBuilder()
            .Id("backgound")
            .AddStyle(style => style
                .Type("text/css")
                .AddRule(".background", r => r.Fill(Color.AliceBlue))
            )
            .AddRect(rect => rect
                .X(0).Y(0).Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
                .Class("background")
            ).BuildElement(document);
        svg.InsertBefore(g, svg.FirstElementChild);

        // Save the document
        document.Save(Path.Combine(OutputDir, "add-background-color-with-builder.svg"));
    }

L’étape clé du code consiste à utiliser SVGGElementBuilder pour définir un élément de groupe (<g>) qui inclut un élément <style> avec CSS interne. Ce CSS définit une couleur d’arrière-plan via la classe .background. Un élément <rect> est ensuite ajouté pour appliquer l’arrière-plan à l’aide de cette classe. Le groupe est inséré au début du SVG, définissant ainsi la couleur d’arrière-plan.

Dans le chapitre SVG Builder – Création et modification SVG avancées, vous trouverez un guide pour manipuler efficacement SVG à l’aide de l’API Aspose.SVG Builder, couvrant des aspects allant de la création d’éléments de base aux techniques avancées telles que les mixins et sucre syntaxique.

Ajouter une couleur d’arrière-plan pour l’image SVG dans HTML

Pour continuer à suivre ce didacticiel, vous devez installer et configurer la bibliothèque Aspose.HTML for .NET dans votre projet C#.

Lorsque vous travaillez avec des documents HTML contenant des images SVG, vous devrez peut-être ajouter une couleur d’arrière-plan à vos éléments SVG. Bien que les SVG soient généralement transparents, l’ajout d’un arrière-plan peut améliorer la visibilité et l’esthétique. L’exemple C# suivant montre comment ajouter par programmation une couleur d’arrière-plan à tous les éléments SVG d’un document HTML à l’aide de C# et de la bibliothèque Aspose.HTML pour .NET.

1. Utilisez l’un des constructeurs HTMLDocument() pour charger un fichier HTML.
2. Utilisez la méthode QuerySelector() pour rechercher l’élément <style> dans le document HTML où vous ajouterez une nouvelle règle CSS.
3. Utilisez la propriété InnerHTML pour afficher le contenu actuel de l’élément <style> afin de garantir qu’aucune règle importante n’est écrasée.
4. Mettez à jour la propriété TextContent de l’élément <style> pour ajouter une règle CSS permettant de définir la couleur d’arrière-plan des éléments SVG.
5. Utilisez la méthode Save() pour exporter le document HTML mis à jour vers un nouveau fichier.

Le fichier HTML source aspose-svg.html contient du CSS interne. Pour ajouter une couleur d’arrière-plan pour toutes les images SVG, nous allons inspecter le contenu actuel de l’élément <style> et ajouter une règle de style aux éléments SVG spécifiant la couleur d’arrière-plan qui sera appliquée à toutes les images SVG dans le fichier HTML.

using System.IO;
using Aspose.Html;
...

    // Prepare a path to a source HTML file with SVG image
    string documentPath = Path.Combine(DataDir, "aspose-svg.html");

    // Load an HTML document from the file
    var document = new HTMLDocument(documentPath);

    // Find a <style> element and assign a background color value for all svg elements
    var styleElement = document.QuerySelector("style");

    // Print content of the <style>
    Console.WriteLine(styleElement.InnerHTML);

    // Assign a text content for the style element
    styleElement.TextContent = styleElement.InnerHTML + "svg {background-color: #fef4fd;}";

    // Save the HTML document
    document.Save(Path.Combine(OutputDir, "with-background-color.html"));

La figure montre la visualisation du fichier HTML d’origine et du même fichier avec la couleur d’arrière-plan ajoutée pour l’image SVG:

Changer la couleur d’arrière-plan à l’aide de JavaScript

Document SVG

Pour ajouter dynamiquement une couleur d’arrière-plan à un fichier SVG à l’aide de JavaScript, vous pouvez intégrer un élément <script> directement dans le SVG. Voici un guide étape par étape sur la façon d’y parvenir:

1. Utilisez la classe SVGDocument pour charger un fichier SVG.
2. Accédez à l’élément racine <svg> à partir du document chargé. C’est l’élément auquel vous ajouterez l’arrière-plan.
3. Utilisez la méthode CreateElementNS() pour créer un nouvel élément <script>. Ce script contiendra du code JavaScript pour ajouter une couleur d’arrière-plan SVG.
4. Définissez le code JavaScript. Sélectionnez l’élément SVG, créez un <rect> avec toutes les dimensions et la couleur d’arrière-plan, et insérez-le comme premier enfant pour définir l’arrière-plan.
5. Ajoutez l’élément <script> nouvellement créé au document SVG.
6. Enregistrez le document SVG mis à jour avec le code JavaScript intégré, qui inclut désormais la logique des couleurs d’arrière-plan.

using Aspose.Svg;
using System.IO;
...

    // Prepare the path to the SVG document
    string documentPath = Path.Combine(DataDir, "tree.svg");

    // Load the SVG document from the file
    var document = new SVGDocument(documentPath);

    // Get the root <svg> element of the document
    var svgElement = document.RootElement;

    // Create a new <script> element
    var scriptElement = document.CreateElementNS("http://www.w3.org/2000/svg", "script");

    // Define JavaScript code to add a <rect> element as the background
    scriptElement.TextContent = @"
        var svgElement = document.getElementsByTagName('svg')[0];
        if (svgElement) {
            var rectElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            rectElement.setAttribute('x', '0');
            rectElement.setAttribute('y', '0');
            rectElement.setAttribute('width', '100%');
            rectElement.setAttribute('height', '100%');
            rectElement.setAttribute('fill', '#fef4fd');
            svgElement.insertBefore(rectElement, svgElement.firstChild);
        };
    ";

    // Append the <script> element to the SVG document
    svgElement.AppendChild(scriptElement);

    // Save the modified SVG document
    document.Save(Path.Combine(OutputDir, "svg-background-color-using-script.svg"))

SVG dans un document HTML

Pour continuer à suivre ce didacticiel, vous devez installer et configurer la bibliothèque Aspose.HTML for .NET dans votre projet C#.

Pour modifier la couleur d’arrière-plan d’une image SVG dans un document HTML à l’aide de JavaScript avec Aspose.HTML pour .NET, vous pouvez intégrer JavaScript directement dans le code SVG, puis utiliser Aspose.HTML pour exécuter le script. Voici comment y parvenir:

1. Chargez un document HTML à l’aide du constructeur HTMLDocument().
2. Utilisez le QuerySelector() pour rechercher l’élément SVG par son ID ou un autre attribut.
3. Utilisez la méthode CreateElement() pour créer un nouvel élément <script>. Définissez son TextContent sur du code JavaScript qui modifie la couleur d’arrière-plan du SVG.
4. Ajoutez le nouvel élément <script> au corps du document à l’aide de la méthode AppendChild(), en vous assurant que le code JavaScript est exécuté.
5. Incluez une vérification conditionnelle pour gérer les cas où l’élément SVG n’est pas trouvé, en affichant un message pertinent si nécessaire.
6. Utilisez la méthode Save() pour exporter le document HTML mis à jour avec le script intégré vers un nouveau fichier.

using Aspose.Html;
using System.IO;
...

    // Prepare a path to a source HTML file with SVG image
    string documentPath = Path.Combine(DataDir, "aspose-svg.html");

    // Load an HTML document from the file
    var document = new HTMLDocument(documentPath);

    // Find the SVG element by its ID (or any other attribute)
    var svgElement = document.QuerySelector("svg[id='mySvg']");

    if (svgElement != null)
    {
        // Create a new <script> element
        var scriptElement = document.CreateElement("script");

        // Define JavaScript code to add a <rect> element as the background
        scriptElement.TextContent = @"
            var svgElement = document.getElementById('mySvg');
            if (svgElement) {
                var rectElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
                rectElement.setAttribute('x', '0');
                rectElement.setAttribute('y', '0');
                rectElement.setAttribute('width', '100%');
                rectElement.setAttribute('height', '100%');
                rectElement.setAttribute('fill', '#fef4fd');
                svgElement.insertBefore(rectElement, svgElement.firstChild);
            };
        ";

        // Append the <script> element to the HTML document's body
        document.Body.AppendChild(scriptElement);
    }
    else
    {
        // Handle the case where the svgElement was not found
        Console.WriteLine("SVG element not found.");
    }

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "svg-background-color-html-script.html"));

Conclusion

Dans cet article, nous avons examiné plusieurs méthodes pour appliquer et modifier la couleur d’arrière-plan des images SVG à l’aide des bibliothèques Aspose.SVG for .NET et Aspose.HTML for .NET:

• L’approche la plus robuste et la plus conforme aux standards consiste à modifier directement le document SVG. L’ajout d’un élément <rect> comme premier enfant du SVG crée un arrière-plan solide qui sous-tend tous les autres éléments graphiques. Cette méthode est particulièrement utile, car elle garantit une apparence cohérente et une compatibilité dans tous les contextes de rendu.
• Pour les scénarios dans lesquels des images SVG sont intégrées dans des documents HTML, CSS et JavaScript peuvent être utilisés pour styliser l’arrière-plan SVG. Cependant, en raison des différents comportements des navigateurs, JavaScript peut ne pas être aussi portable ou fiable.

En résumé, la méthode que vous choisissez doit dépendre du contexte dans lequel le SVG sera utilisé et du niveau de contrôle et de cohérence requis. La modification directe du SVG est généralement la méthode la plus fiable, en particulier pour les fichiers SVG autonomes. Lorsque vous travaillez avec SVG dans des documents HTML, CSS et JavaScript offrent une flexibilité mais avec des limitations potentielles.

Voir aussi

• Comment ajouter de nouveaux éléments SVG et définir leurs propriétés de couleur, nous avons couvert en détail des exemples C# dans l’article Modifier les fichiers SVG.
• L’article Couleur d’arrière-plan SVG explique ce qu’est l’arrière-plan en SVG. Il fournit également des exemples de code SVG et un guide complet sur la façon de définir ou de modifier une couleur d’arrière-plan.
• L’article Couleur SVG examine comment le texte et les formes SVG peuvent être colorisés. Vous trouverez un aperçu de la façon dont la couleur est définie, y compris les différentes façons dont vous pouvez contrôler la transparence du contenu SVG.
• Vous pouvez télécharger les exemples complets et les fichiers de données depuis GitHub. À propos du téléchargement depuis GitHub et de l’exécution d’exemples, vous le découvrirez dans la section Comment exécuter les exemples.
• Convertisseur de couleurs est une application en ligne gratuite permettant de transformer les couleurs entre les formats de couleurs. Entrez simplement le code couleur et obtenez le résultat immédiatement! Vous n’avez besoin d’aucun logiciel supplémentaire. Essayez notre puissant convertisseur de couleurs dès maintenant!