Изменить цвета фона SVG – примеры C#

Цвет фона SVG имеет решающее значение для обеспечения визуальной четкости и контрастности, улучшения видимости и эстетики контента. Это жизненно важно для поддержания единообразия дизайна, улучшения доступности за счет предоставления читаемого текста и определения границ в многослойных композициях. Вы можете изменить цвет фона SVG, изменив сам SVG или применив стили с помощью CSS или JavaScript.

Aspose.SVG for .NET API позволяет редактировать документ SVG и вносить изменения в его содержимое.

В этой статье вы узнаете, как применять цвет фона к файлам SVG с помощью Aspose.SVG for .NET и как работать с цветом фона для изображений SVG внутри документов HTML с помощью библиотеки Aspose.HTML C#.

Изменить SVG напрямую

Чтобы установить цвет фона изображения SVG, вам следует вставить новый элемент SVG, например прямоугольник или круг, в качестве первого дочернего элемента в документе SVG. Этот метод использует правило порядка элементов SVG: элементы, которые появляются позже в коде SVG, появляются поверх тех, которые появляются раньше. Размещая прямоугольник или круг в начале SVG, вы фактически создаете фоновый слой, который находится под всеми остальными графическими элементами.

Добавить фон в SVG

Самый распространенный метод установки цвета фона в SVG – создание элемента <rect>, который покрывает весь холст SVG. Такой подход гарантирует, что фон является частью самого содержимого SVG. Следующий фрагмент кода показывает, как добавить фон в SVG – создайте новый прямоугольный элемент в SVG, который будет служить фоном. Для этого прямоугольнику присваиваются атрибуты width="100%", height="100%" и fill="#ebf3f6", и он позиционируется так, чтобы он отображался позади всего остального содержимого 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"));

Изменить цвет фона SVG

Если в вашем документе SVG есть элемент, служащий фоном, например прямоугольник, как в предыдущем примере, изменение цвета фона включает в себя несколько шагов:

• Откройте исходный файл SVG.
• Получите корневой элемент <svg> документа.
• Получите первый прямоугольный элемент (или другой элемент SVG, который служит фоном), чтобы изменить цвет.
• Установите новое значение атрибута заполнения для элемента <rect>.
• Сохраните отредактированный документ SVG.

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"));

Примечание. Этот способ (метод <rect>) наиболее согласован во всех браузерах и гарантирует, что цвет фона является частью SVG, даже если SVG экспортируется или используется в разных контекстах.

На следующем рисунке показано исходное изображение SVG (а), изображение с добавленным фоном (б) и изображение, в котором цвет фона SVG был изменен (в):

Изменить цвет фона с помощью CSS

Изменение цвета фона SVG с помощью CSS – распространенная задача, которая улучшает визуальное представление изображений SVG на веб-страницах. Хотя элементы SVG не поддерживают собственное свойство background-color, вы можете добиться этого эффекта, используя CSS для стилизации дополнительных элементов SVG, таких как <rect>, или применяя стили через внешний, внутренний или встроенный CSS.

Встроенный CSS – понимание подводных камней

Вы можете интуитивно попытаться использовать свойство style="background-color" непосредственно в элементе <svg>, ожидая, что оно будет работать так же, как и для элементов HTML, таких как <div> или <p>. Однако этот подход чреват подводными камнями и недоразумениями. Но иногда это работает! В следующем примере мы используем свойство background-color в атрибуте style для элемента <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"));

Почему это работает?

В некоторых браузерах или контекстах рендеринга применение background-color к элементу SVG может оказаться эффективным, поскольку браузер может заполнить пространство, выделенное для SVG, указанным цветом. Однако этот эффект возникает не потому, что сам SVG имеет фон, а потому, что область вокруг или позади содержимого SVG окрашена. Вероятно, это случайное поведение, а не функция, определенная спецификацией SVG.

Проблема этого подхода

Основная проблема с использованием background-color в атрибуте style SVG заключается в том, что он не является частью спецификации SVG. Стандарт SVG не признает background-color допустимым свойством стиля для элемента SVG. Это означает:

1. То, что работает в одном браузере, может не работать в другом.
2. Фон на самом деле не является частью содержимого SVG, поэтому у вас меньше контроля над его поведением и внешним видом, особенно когда SVG экспортируется, печатается или обрабатывается в других контекстах.

Внутренний CSS

Внутренний CSS относится к стилям, которые встроены непосредственно в документ HTML или SVG, обычно в теге <style>. Это позволяет вам определять определенные стили, которые применяются только к текущему документу, не затрагивая другие документы и не требуя внешних таблиц стилей.

В следующем примере:

• элемент <style> создается и добавляется в SVG для определения CSS-класса .background, который устанавливает цвет фона SVG;
• элемент <rect> создается с атрибутом class, установленным в background, который применяет серую заливку, определенную в CSS;
• первым вставляется элемент <style>, а затем элемент <rect>, гарантируя, что прямоугольник будет служить фоном для 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"));

Этот подход позволяет четко разделить стиль и структуру, используя CSS для упрощения управления и возможных будущих изменений цвета фона SVG. Внутренний CSS широко поддерживается во всех современных браузерах, обеспечивая единообразный рендеринг изображений SVG.

На рисунке показана визуализация исходного SVG-файла (а) и того же файла с добавленным цветом фона (б):

Изменить цвет фона с помощью SVG Builder

В следующем коде SVG Builder программно добавляет цвет фона к существующему документу SVG (для файла tulips.svg, как и в предыдущем случае).

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"));
    }

Ключевой шаг в коде включает использование SVGGElementBuilder для определения элемента группы (<g>), который включает элемент <style> с внутренним CSS. Этот CSS определяет цвет фона через класс .background. Затем добавляется элемент <rect> для применения фона с использованием этого класса. Группа вставляется в начало SVG, фактически задавая цвет фона.

В главе SVG Builder – Расширенное создание и изменение SVG вы найдете руководство по эффективному управлению SVG с помощью API Aspose.SVG Builder, охватывающее аспекты от создания базовых элементов до продвинутых методов, таких как миксины и синтаксический сахар.

Добавить цвет фона для изображения SVG внутри HTML

Чтобы продолжить работу с этим руководством, вам необходимо установить и настроить библиотеку Aspose.HTML for .NET в своем проекте C#.

При работе с HTML-документами, содержащими изображения SVG, вам может потребоваться добавить цвет фона к элементам SVG. Хотя SVG обычно прозрачны, добавление фона может улучшить видимость и эстетику. В следующем примере C# показано, как программно добавить цвет фона ко всем элементам SVG в документе HTML с помощью C# и библиотеки Aspose.HTML for .NET.

1. Используйте один из конструкторов HTMLDocument() для загрузки HTML-файла.
2. Используйте метод QuerySelector(), чтобы найти элемент <style> в HTML-документе, куда вы добавите новое правило CSS.
3. Используйте свойство InnerHTML для вывода текущего содержимого элемента <style>, чтобы гарантировать, что никакие важные правила не будут перезаписаны.
4. Обновите свойство TextContent элемента <style>, чтобы добавить правило CSS для установки цвета фона элементов SVG.
5. Используйте метод Save(), чтобы экспортировать обновленный HTML-документ в новый файл.

Исходный HTML-файл aspose-svg.html содержит внутренний CSS. Чтобы добавить цвет фона для всех изображений SVG, мы проверим текущее содержимое элемента <style> и добавим правило стиля к элементам SVG, определяющее цвет фона, который будет применяться ко всем изображениям SVG в 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"));

На рисунке показана визуализация исходного HTML-файла и того же файла с добавленным цветом фона для SVG-изображения:

Изменить цвет фона с помощью JavaScript

SVG-документ

Чтобы динамически добавить цвет фона в файл SVG с помощью JavaScript, вы можете встроить элемент <script> непосредственно в SVG. Вот пошаговое руководство, как это сделать:

1. Используйте класс SVGDocument для загрузки файла SVG.
2. Получите доступ к корневому элементу <svg> из загруженного документа. Это элемент, к которому вы добавите фон.
3. Используйте метод CreateElementNS() для создания нового элемента <script>. Этот скрипт будет содержать код JavaScript для добавления цвета фона SVG.
4. Определите код JavaScript. Выберите элемент SVG, создайте <rect> с полными размерами и цветом фона и вставьте его в качестве первого дочернего элемента для установки фона.
5. Добавьте вновь созданный элемент <script> в документ SVG.
6. Сохраните обновленный документ SVG со встроенным кодом JavaScript, который теперь включает логику цвета фона.

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 внутри HTML-документа

Чтобы продолжить работу с этим руководством, вам необходимо установить и настроить библиотеку Aspose.HTML for .NET в своем проекте C#.

Чтобы изменить цвет фона изображения SVG внутри HTML-документа с помощью JavaScript с Aspose.HTML for .NET, вы можете встроить JavaScript непосредственно в код SVG, а затем использовать Aspose.HTML для выполнения сценария. Ниже описано, как этого можно добиться:

1. Загрузите HTML-документ, используя конструктор HTMLDocument().
2. Используйте QuerySelector(), чтобы найти элемент SVG по его идентификатору или другому атрибуту.
3. Используйте метод CreateElement(), чтобы создать новый элемент <script>. Установите для его TextContent код JavaScript, который изменяет цвет фона SVG.
4. Добавьте новый элемент <script> в тело документа с помощью метода AppendChild()`, гарантируя выполнение кода JavaScript.
5. Включите условную проверку для обработки случаев, когда элемент SVG не найден, при необходимости выводя соответствующее сообщение.
6. Используйте метод Save(), чтобы экспортировать обновленный HTML-документ со встроенным скриптом в новый файл.

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"));

Заключение

В этой статье мы рассмотрели несколько методов применения и изменения цвета фона изображений SVG с использованием библиотек Aspose.SVG for .NET и Aspose.HTML for .NET:

• Самый надежный и соответствующий стандартам подход – напрямую изменить документ SVG. Добавление элемента <rect> в качестве первого дочернего элемента SVG создает сплошной фон, который лежит в основе всех остальных графических элементов. Этот метод особенно полезен, поскольку обеспечивает единообразный внешний вид и совместимость во всех контекстах рендеринга.
• В сценариях, где изображения SVG встроены в документы HTML, для стилизации фона SVG можно использовать CSS и JavaScript. Однако из-за различий в поведении браузеров JavaScript может быть не таким переносимым и надежным.

Подводя итог, можно сказать, что выбранный вами метод должен зависеть от контекста, в котором будет использоваться SVG, а также от требуемого уровня контроля и согласованности. Непосредственное изменение SVG, как правило, является наиболее надежным методом, особенно для отдельных файлов SVG. При работе с SVG в документах HTML CSS и JavaScript обеспечивают гибкость, но с потенциальными ограничениями.

Смотрите также

• Как добавлять новые элементы SVG и устанавливать их цветовые свойства, мы подробно рассмотрели на примерах C# в статье Редактирование файлов SVG.
• В статье Цвет фона SVG обсуждается, что такое фон в SVG. Он также предоставляет примеры кода SVG и подробное руководство о том, как установить или изменить цвет фона.
• В статье Цвет SVG рассматривается, как можно раскрасить текст и фигуры SVG. Вы найдете обзор того, как определяется цвет, включая различные способы управления прозрачностью содержимого SVG.
• Вы можете загрузить полные примеры и файлы данных с GitHub. О загрузке с GitHub и запуске примеров вы узнаете из раздела Как запускать примеры.
• Конвертер цветов – бесплатное онлайн-приложение для преобразования цветов между цветовыми форматами. Просто введите код цвета и сразу получите результат! Вам не нужно никакого дополнительного программного обеспечения. Попробуйте наш мощный конвертер цветов прямо сейчас!