Desenfoque Gaussiano (Gaussian Blur) – Filtros SVG – Código C#

Filtros SVG

Aspose.SVG for .NET le permite abrir o crear, editar un documento SVG y realizar cambios en su contenido. Puede modificar el documento, incluida la aplicación de los numerosos filtros disponibles para obtener el resultado deseado. El espacio de nombres Aspose.Svg.Filters contiene clases e interfaces relacionadas con efectos de filtro en la especificación SVG. La clase SVGFEGaussianBlurElement corresponde a un elemento <feGaussianBlur> para implementar el efecto Desenfoque Gaussiano.

En SVG, un filtro se define por el elemento <filter>, que se establece dentro de un elemento <defs>. Nunca se representa en sí mismo y se describe conceptualmente como el elemento que incluye a sus hijos: primitivos de filtro. El elemento <filter> tiene un conjunto de atributos. Los atributos requeridos para el filtro primitivo son x, y, width, height e id. Establecen el área de la imagen a la que se aplicará el filtro. Y el atributo “id” proporciona un identificador único a un elemento SVG e identifica un elemento dentro de un documento SVG.

En este artículo, aprenderá a escribir código SVG para crear un filtro de Desenfoque Gaussiano y considerará ejemplos detallados de C# sobre el uso de la clase SVGFEGaussianBlurElement para aplicar el efecto de Desenfoque Gaussiano a elementos SVG y mapas de bits.

Desenfoque Gaussiano (Gaussian Blur) – Código SVG

El filtro SVG de Desenfoque Gaussiano es un tipo de filtro que aplica un efecto de desenfoque al contenido de un elemento SVG utilizando una distribución gaussiana. Este es uno de los filtros más utilizados en SVG para crear efectos suaves, fluidos y visualmente atractivos. El filtro <feGaussianBlur> crea un efecto de desenfoque suave. El atributo StdDeviation especifica el número que caracteriza la desviación estándar para la operación de desenfoque. Si se proporcionan dos números, el primer número representa un valor de desviación estándar a lo largo del eje x del sistema de coordenadas, y el segundo, en el eje y. Cada filtro requiere una imagen de origen para procesar. De lo contrario, el filtro no tendrá nada que renderizar y por lo tanto no funcionará. Los datos de entrada de la primitiva de filtro se especifican en el atributo in. El valor predeterminado es in="SourceGraphic".

A continuación se muestra un ejemplo de aplicación de un filtro SVG de Desenfoque Gaussiano con varios valores del atributo stdDeviation a un elemento rectangular SVG:

<svg height="150" width="750" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="f1" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
        </filter>
        <filter id="f2" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10, 0" />
        </filter>
        <filter id="f3" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="0,10" />
        </filter>
		<filter id="f4" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
        </filter>
		<filter id="f5" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
    </defs>
    <g fill="#ffa500">
        <rect x="40" y="40" width="60" height="60" />
        <rect x="40" y="40" width="60" height="60" transform="translate(120)" filter="url(#f1)" />
        <rect x="40" y="40" width="60" height="60" transform="translate(240)" filter="url(#f2)" />
        <rect x="40" y="40" width="60" height="60" transform="translate(360)" filter="url(#f3)" />
		<rect x="40" y="40" width="60" height="60" transform="translate(480)" filter="url(#f4)" />
		<rect x="40" y="40" width="60" height="60" transform="translate(600)" filter="url(#f5)" />
    </g>
</svg>

Como puede ver, el valor stdDeviation controla la dispersión de la distribución gaussiana. Un valor de stdDeviation más grande produce más desenfoque, mientras que un valor más pequeño crea un efecto más suave.

Nota: El desenfoque, agregado alrededor de una forma, a menudo hace que la imagen de salida sea más grande que la de origen. Necesitamos usar números negativos para x e y para evitar recortar los gráficos agregados por el filtro. En el ejemplo anterior, usamos x="-20" e y="-20".

Desenfoque Gaussiano – código C#

En el ejemplo de código SVG anterior, analizamos en detalle cómo crear un filtro de Desenfoque Gaussiano y ahora sabemos qué elementos y atributos usar. Creemos el código C# para implementar dicho filtro usando Aspose.SVG for .NET API.

Según la sintaxis SVG, el elemento <filter> debe ubicarse en un elemento <defs>, y la primitiva de filtro <feGaussianBlur> está solo dentro del elemento <filter>. Por lo tanto, para programar filtros SVG, debe crear y anidar correctamente los elementos requeridos.1. Si crea un documento SVG desde cero, utilice el constructor SVGDocument() para crear un documento SVG vacío. 2. La propiedad RootElement de la clase SVGDocument apunta al elemento raíz <svg> del documento. 3. Cree un elemento <rect>, establezca los atributos requeridos y agréguelo al elemento <svg>. - Utilice el método CreateElementNS(namespaceURI, qualifiedName) de la clase SVGDocument para crear una instancia de SVGRectElement. - Una opción para configurar los valores del atributo es utilizar el método SetAttribute(name, value). Otra forma es tomar métodos de acceso de puntos SVG DOM usando propiedades del tipo SVGAnimatedLength, cuyos datos estáticos se pueden configurar o leer a través de la construcción: element.X.BaseVal.Value. - Utilice el método AppendChild() para agregar el elemento <rect> al elemento <svg>. 4. De manera similar, cree un elemento <defs> y agréguelo al elemento <svg>. 5. Para crear un elemento <filter>, use el mismo algoritmo: use el método CreateElementNS() para crear una instancia de SVGFilterElement. Recuerde establecer los atributos x, y, width, height e id usando el método SetAttribute() y agregar el <filter> al elemento <defs>. 6. Cree un elemento <feGaussianBlur> y establezca los atributos in y stdDeviation. Luego agréguelo al elemento <filter>. - Utilice el método CreateElementNS() para crear una instancia de la clase SVGFEGaussianBlurElement. - Para configurar el atributo In1, use la propiedad del tipo SVGAnimatedLength, cuyos datos estáticos se pueden configurar o leer a través de la construcción feGaussianBlurElement.In1.BaseVal = "SourceGraphic". - Utilice las propiedades StdDeviationX y StdDeviationY de la clase SVGFEGaussianBlurElement para establecer el atributo setDerivation. - Llame al método AppendChild() para agregar <feGaussianBlur> al elemento <filter>. 7. Llame al método Save() para guardar el documento en un archivo local especificado por la ruta.

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

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

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

        // Create a <rect> element and set the "fill" and "filter" attributes
        var rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
        rectElement.X.BaseVal.Value = 40;
        rectElement.Y.BaseVal.Value = 40;
        rectElement.Width.BaseVal.Value = 60;
        rectElement.Height.BaseVal.Value = 60;
        rectElement.SetAttribute("fill", "#ffa500");
        rectElement.SetAttribute("filter", "url(#F1)");
        svgElement.AppendChild(rectElement);

        // Create a <defs> element and add it to the <svg> element
        var defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
        svgElement.AppendChild(defsElement);

        // Create a <filter> element and add it to the <defs> element
        var filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
        filterElement.SetAttribute("x", "-20px");
        filterElement.SetAttribute("y", "-20px");
        filterElement.SetAttribute("height", "100px");
        filterElement.SetAttribute("width", "100px");
        filterElement.Id = "F1";
        defsElement.AppendChild(filterElement);

        // Create a <feGaussianBlur> element and add it to the <filter> element
        var feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
        feGaussianBlurElement.In1.BaseVal = "SourceGraphic";
        feGaussianBlurElement.StdDeviationX.BaseVal = 10;
        feGaussianBlurElement.StdDeviationY.BaseVal = 10;
        filterElement.AppendChild(feGaussianBlurElement);

        // Save the document
        document.Save(Path.Combine(OutputDir, "gaussian-blur.svg"));
    }

Si renderiza el archivo de resultados, verá un rectángulo naranja borroso exactamente como el de la figura anterior, segundo en orden con stdDeviation=“10”.

Imagen de fondo borrosa

Para utilizar el filtro SVG de Desenfoque Gaussiano para el desenfoque del fondo, puede aplicar el filtro a un elemento SVG que actúa como fondo detrás del contenido principal. Puede ser, por ejemplo, cualquier mapa de bits. El filtro de desenfoque le permite crear un efecto de desenfoque de fondo visualmente atractivo mientras mantiene el contenido de primer plano nítido y enfocado.

Para lograr que la imagen de fondo esté borrosa con SVG, siga estos pocos pasos. Son similares a los pasos descritos en el ejemplo anterior de C#:

1. Cree una instancia de la clase SVGDocument.
2. La propiedad RootElement de la clase SVGDocument apunta al elemento raíz <svg> del documento.
3. Puede utilizar el método CreateElementNS(namespaceURI, qualifiedName) de la clase SVGDocument para crear instancias de SVGImageElement, SVGDefsElement, SVGFilterElement, y clases SVGFEGaussianBlurElement.
   Por ejemplo, si planea utilizar un mapa de bits como fondo, cree una instancia de la clase SvgImageElement y establezca atributos que especifiquen su origen, posición y tamaño. Para agregar un imageElement a svgElement, puede usar el método AppendChild(). El uso de un atributo filter de imageElement que se refiere al nombre de la URL de filterElement (en el atributo id) permite aplicar el efecto de filtro SVG a la imagen.
4. Agregue todos los atributos necesarios a los elementos creados y anídelos adecuadamente.
5. Después de crear un filtro de desenfoque y establecer un filterElement.Id para el elemento <filter>, se puede aplicar a la imagen.
6. Llame al método Save() para guardar el documento con la imagen de fondo borrosa en un archivo local especificado por la ruta.

A continuación se muestra un ejemplo que ilustra la implementación de una imagen de fondo borrosa:

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

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

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

        // Create an <image> element and add to the <svg> element
        var imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
        imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/seaside.jpg";
        imageElement.Height.BaseVal.Value = 480;
        imageElement.Width.BaseVal.Value = 640;
        imageElement.X.BaseVal.Value = 20;
        imageElement.Y.BaseVal.Value = 20;
        imageElement.SetAttribute("filter", "url(#F1)");
        svgElement.AppendChild(imageElement);

        // Create a <defs> element and add to the <svg> element
        var defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
        svgElement.AppendChild(defsElement);

        // Create a <filter> element and add to the <defs> element
        var filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
        filterElement.Id = "F1";
        defsElement.AppendChild(filterElement);

        // Create a <feGaussianBlur> element and add to the <filter> element
        var feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
        feGaussianBlurElement.In1.BaseVal = "SourceGraphic";
        feGaussianBlurElement.StdDeviationX.BaseVal = 5;
        feGaussianBlurElement.StdDeviationY.BaseVal = 5;
        filterElement.AppendChild(feGaussianBlurElement);

        // Save the document
        document.Save(Path.Combine(OutputDir, "blur-background-image.svg"));
    }

Desenfoque de imagen de fondo usando la API SVG Builder

Aspose.SVG Builder API está diseñada para simplificar la creación y actualización de elementos SVG en C#. Veamos un ejemplo de С# para implementar el desenfoque de fondo (exactamente el mismo ejemplo que en el párrafo anterior) usando SVG Builder API. Este código muestra el uso de un patrón de creación fluido para crear documentos SVG concisos y legibles, aprovechando las capacidades de la biblioteca Aspose.SVG:

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

    var svgContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"></svg>";
    using (var document = new SVGDocument(svgContent, "."))
    {
        // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
        var svg = new SVGSVGElementBuilder()
            .AddDefs(d => d
                .AddFilter(f => f.Id("gaussian-blur")
                    .AddFeGaussianBlur(g => g
                    .StdDeviation(5, 5)
                    )
                )
            )
            .AddImage(i => i
                .X(20).Y(20).Height(480).Width(640)
                .Href("http://docs.aspose.com/svg/images/api/seaside.jpg")
                .Filter(fl => fl
                    .FilterId("gaussian-blur")
                )
            )
            // Call the Build() method on the SVGSVGElementBuilder to construct the <svg> element with its child elements
            .Build(document.FirstChild as SVGSVGElement);
        document.Save(Path.Combine(OutputDir, "gaussian-blur-builder.svg"));
    }

El patrón de creación fluido le permite crear elementos SVG y aplicar filtros de forma más concisa y legible. Cada llamada a un método indica claramente su propósito, lo que le permite comprender la estructura del documento SVG de un vistazo. Este ejemplo demuestra un enfoque más expresivo para crear documentos SVG usando SVG Builder, proporcionando legibilidad, facilidad de mantenimiento y flexibilidad mejoradas en comparación con el enfoque manual de creación de elementos que se muestra en el ejemplo anterior.

Ver también

• Puede descargar los ejemplos completos y los archivos de datos desde GitHub.
• Encontrará información sobre la descarga desde GitHub y la ejecución de ejemplos en la sección Cómo ejecutar los ejemplos.
• Para obtener más información sobre las primitivas de filtro, consulte la página W3C Filter Effects Module y el artículo Filtros y degradados SVG.
• Aspose.SVG ofrece Aplicaciones web SVG gratuitas para convertir archivos SVG o de imagen, fusionar SVG, vectorizar imágenes, generar sprites SVG, codificar datos SVG a Base64 y más. Estas aplicaciones en línea funcionan en cualquier sistema operativo con un navegador web y no requieren instalación de software adicional. ¡Es una manera rápida y fácil de resolver de manera eficiente y efectiva sus tareas relacionadas con SVG!