DEV Community

Juan Diego Mejía Maestre
Juan Diego Mejía Maestre

Posted on

Cómo cambiar el color de una imagen SVG en C#

Alt Text

Vamos aprender a cambiar el color de una imagen SVG en un proyecto de visual studio 2017, 2019 en C#.

Lo primero es crear nuevo proyecto y crear un diseño que nos permita cambiar el color a una imagen SVG.

Así

Alt Text

Cómo estos componentes

image

*** Link del proyecto *** https://github.com/JuanDiegogit/CambiarColorImagenSVG

Si te preguntas cómo se hacen los botones redondeado, para eso instalamos Guna.ui2

image

Una vez tengamos el Diseño, lo siguiente a realizar es la instalación del paquete de SVG desde el administrador de paquete de visual studio.

image

y buscar el paquete SVG para posteriormente instalarlo.

image

Una vez instalado el paquete procedemos a crear una Clase llamada "SVGParser.cs" dentro de una carpeta "SVG", la clase la puedes llamar cómo desees pero debe cumplir la misma función (obtener y ajustar el archivo SVG y convertir el archivo SVG a Bitmap) y debe ser estática.

image
Vamos a ver que contiene la clase SVGparser.cs
Esta propiedad nos dice el tamaño que tenga la imagen

public static Size MaximSize { get; set; }
Enter fullscreen mode Exit fullscreen mode

Este método convierte una imagen SVG a un Bitmap

public static Bitmap GetBitmapFromSVG(string filePath)
{
SvgDocument svgDocument = SVGParser.GetSvgDocument(filePath);
Bitmap bitmap = svgDocument.Draw();
return bitmap;
}
Enter fullscreen mode Exit fullscreen mode

Este método ajusta el archivo SVG respeto al tamaño máximo del contenedor que se define al asignar la propiedad MaximSize

private static SvgDocument AdjustSize(SvgDocument document)
{
document.Width = MaximSize.Width;
document.Height = MaximSize.Height;
return document;
}
Enter fullscreen mode Exit fullscreen mode

Este último abre el archivo SVG y lo ajusta con el método anterior

public static SvgDocument GetSvgDocument(string filePath)
{
SvgDocument document = SvgDocument.Open(filePath);
return AdjustSize(document);
}
Enter fullscreen mode Exit fullscreen mode

Ya con esto hemos terminado la clase SVGparser.cs el resto de la programación se hará en el formulario.

En el evento de clic del botón de buscar Abrimos el archivo SVG

image
nota
La parte naranja es un PictureBox, solo que tiene el mismo fondo del formulario y no se nota a simple vista.

image

//Declaración de variables
private string selectedPath;
private Svg.SvgDocument svgDocument;

 private void AbrirSVG()
        {
            DialogResult selectResult = filePicker.ShowDialog();
            if (selectResult == System.Windows.Forms.DialogResult.OK)
            {

                SVGParser.MaximSize = new Size(pickImagen.Width, pickImagen.Height);
                selectedPath = filePicker.FileName;
                txtBuscar.Text = selectedPath;
                svgDocument = SVGParser.GetSvgDocument(selectedPath);
                nupAncho.Value = (int) svgDocument.Width.Value;
                nupAlto.Value = (int)  svgDocument.Height.Value;
                pickImagen.Image = SVGParser.GetBitmapFromSVG(selectedPath);
                Guardar.FileName = filePicker.FileName;
            }
        }

Enter fullscreen mode Exit fullscreen mode

Creamos una método que nos permita cambiar un color por otro en el archivo SVGDocument.

foreach (Svg.SvgElement item in svgDocument.Children)
{
ChangeFill(item, btnColorOrigen.BackColor, btnColorDestino.BackColor);
}
Enter fullscreen mode Exit fullscreen mode
private void ChangeFill(SvgElement element, Color sourceColor, Color replaceColor)
        {
            try
            {
                if (element is SvgPath)
                {

                    if (((element as SvgPath).Fill as SvgColourServer).Colour.ToArgb() == sourceColor.ToArgb())
                    {
                        (element as SvgPath).Fill = new SvgColourServer(replaceColor);
                    }
                }
            }
            catch (Exception)
            {


            }

            if (element.Children.Count > 0)
            {
                foreach (var item in element.Children)
                {
                    ChangeFill(item, sourceColor, replaceColor);
                }
            }

        }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)