Cómo optimizar SVG – Ejemplos de C#

¿Por qué optimizar SVG?

El formato SVG es muy flexible, pero también tiene algunos inconvenientes. Uno de ellos es que el formato no es muy eficiente. Esto significa que las imágenes SVG pueden tardar en cargarse y también pueden tardar en renderizarse. Esto es un problema para los desarrolladores web porque puede afectar la experiencia del usuario. También puede afectar el SEO de un sitio web porque los motores de búsqueda pueden penalizar a los sitios web lentos. Optimizar los SVG por motivos de rendimiento es una tarea muy común. Aspose.SVG for .NET API proporciona la clase SVGOptimizer para ayudar con esa tarea. Esta herramienta comprime el documento SVG aplicando varias heurísticas para optimizar rutas y eliminar elementos y atributos no utilizados o inútiles.

Aspose.SVG ofrece Optimizador de SVG gratuito en línea. ¡Optimice los archivos SVG para hacer que su sitio web sea más rápido y mejor! Puede utilizar un conjunto de opciones que le permiten controlar de forma flexible el nivel de compresión y simplificación y lograr el resultado deseado. Con Optimizador de SVG, optimizará SVG fácilmente en cuestión de minutos. ¡Prueba nuestra contundente aplicación gratis ahora!

Optimizar SVG en C#

Para optimizar documentos SVG, utilice el siguiente fragmento de código:

 1using Aspose.Svg;
 2using System.IO;
 3using Aspose.Svg.Toolkit.Optimizers;
 4...
 5
 6	// Initialize an SVG document from a file
 7    using (var document = new SVGDocument(Path.Combine(DataDir, "source.svg")))
 8    {
 9        var options = new SVGOptimizationOptions();
10        // Set float precision
11        options.PathOptimizationOptions.FloatPrecision = 2;
12        // Optimize document
13        SVGOptimizer.Optimize(document, options);
14        // Save document to a file
15        document.Save(Path.Combine(DataDir, "optimized.svg"));
16    }

La sección actual describe escenarios admitidos de optimización de archivos SVG. Veamos los pasos para optimizar SVG.

Inicialice un documento SVG desde un archivo usando uno de los constructores SVGDocument().
Cree un nuevo objeto SVGOptimizationOptions. Utilice el constructor SVGOptimizationOptions().
Utilice la propiedad PathOptimizationOptions de la clase SVGOptimizationOptions para optimizar las rutas SVG.
Llame al método Optimize() para optimizar el documento SVG.
Guarde el documento SVG optimizado en un archivo.

Opciones de optimización SVG

Aspose.SVG for .NET API ofrece un conjunto de opciones de optimización que permiten reducir el código SVG eliminando elementos vacíos, atributos con valores vacíos, atributos de trazo y relleno no utilizados, elementos que no son visibles durante el renderizado, contenedores vacíos, elementos de texto vacíos, sangrías y saltos de línea, y más.
La biblioteca Aspose.SVG C# admite las siguientes opciones de optimización de elementos SVG SVGOptimizationOptions:

La propiedad CollapseGroups colapsa los grupos sobrantes.

Original SVG

1<svg xmlns="http://www.w3.org/2000/svg">
2    <g>
3        <g attr1="val1">
4            <path d="..."/>
5        </g>
6    </g>
7</svg>

Optimized SVG

1<svg xmlns="http://www.w3.org/2000/svg">
2    <g>
3        <g attr1="val1">
4           <path d="..."/>
5        </g>
6    </g>
7</svg>

RemoveDescriptions: elimina solo el contenido del editor o los elementos vacíos

Original SVG

1<svg xmlns="http://www.w3.org/2000/svg">
2    <desc>Created with ...</desc>
3    <desc>Custom description</desc>
4    <path d="...">
5</svg>

Optimized SVG

1<svg xmlns="http://www.w3.org/2000/svg">
2    <desc>Custom description</desc>
3    <path d="...">
4</svg>

RemoveEmptyAttributes: elimina atributos con valores vacíos

Original SVG

1<svg xmlns="http://www.w3.org/2000/svg">
2    <path attr1=" attr2 =" d="M..."/>
3</svg>"

Optimized SVG

1<svg xmlns="http://www.w3.org/2000/svg">
2    <path d="M..."/>
3</svg>"

RemoveEmptyContainers – Elimina contenedores vacíos

Original SVG

1<svg xmlns="http://www.w3.org/2000/svg">
2    <pattern/>
3    <g>
4        <marker>
5            <a/>
6        </marker>
7    </g>
8    <path d="M..."/>
9</svg>

Optimized SVG

1<svg xmlns="http://www.w3.org/2000/svg">
2    <path d="M..."/>
3</svg>

RemoveEmptyText – Elimina elementos de ‘Text’ vacíos

Original SVG

1<svg xmlns="http://www.w3.org/2000/svg">
2    <g>
3        <text></text>
4        <tspan></tspan>
5        <tref>...</tref>
6    </g>
7</svg>

Optimized SVG

1<svg xmlns="http://www.w3.org/2000/svg">
2    <g></g>
3</svg>

RemoveHiddenElements: elimina elementos que no son visibles durante el renderizado

Original SVG

 1<svg xmlns="http://www.w3.org/2000/svg">
 2    <style>
 3      .a { display: block; opacity: 0.5; }
 4    </style>
 5    <g>
 6        <rect display="none"  width="1" height="1" />
 7        <rect display="none" class="a" width="1" height="1" />
 8        <rect opacity="0"  width="1" height="1" />
 9        <rect opacity="0" class="a" width="1" height="1" />
10        <rect x="1" y="1" width="0" height="1" fill="blue" />
11        <g visibility="hidden">
12             <rect x="1" y="1" width="1" height="1" fill="red" />
13        </g>
14        <circle cx="10" cy="10" r="0">
15        </circle>
16        <ellipse rx="0"/>
17        <image width="0"/>
18        <path d="M 10 10 L 0"/>
19    </g>
20</svg>

Optimized SVG

1<svg xmlns="http://www.w3.org/2000/svg">
2    <style>.a { display: block; opacity: 0.5; }</style>
3    <g>
4        <rect display="none" class="a" width="1" height="1"/>
5        <rect opacity="0" class="a" width="1" height="1"/>
6    </g>
7</svg>

RemoveMetadata – Elimina metadatos

Original SVG

1<svg xmlns="http://www.w3.org/2000/svg">
2    <metadata>...</metadata>
3    <path d="..."/>
4</svg>

Optimized SVG

1<svg xmlns="http://www.w3.org/2000/svg">
2    <path d="..."/>
3</svg>

RemoveUnusedNamespaces: elimina la declaración de espacios de nombres no utilizados del elemento SVG que no se utilizan en elementos o atributos

Original SVG

1<svg xmlns="http://www.w3.org/2000/svg" xmlns:test="http://test1.com/" xmlns:test2="http://test2.com/">
2    <g test:attr="val">
3        <g>
4            test
5        </g>
6    </g>
7</svg>

Optimized SVG

1<svg xmlns="http://www.w3.org/2000/svg" xmlns:test="http://test1.com/">
2    <g test:attr="val">
3        <g>
4            test
5        </g>
6    </g>
7</svg>

RemoveUnusedDefs: elimina el contenido de los defs que no se muestran directamente sin identificadores

Original SVG

1<svg xmlns="http://www.w3.org/2000/svg">
2    <defs>
3        <path d="M..."/>
4        <g>
5            <path d="M..." id="test"/>
6        </g>
7    </defs>
8</svg>

Optimized SVG

1<svg xmlns="http://www.w3.org/2000/svg">
2    <defs>
3        <path d="M..." id="test"/>
4    </defs>
5</svg>

RemoveUselessStrokeAndFill: elimina los atributos de trazo y relleno no utilizados

Original SVG

 1<svg xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <g id="test">
 4            <rect stroke-dashoffset="5" width="10" height="10"/>
 5        </g>
 6    </defs>
 7    <circle fill="red" stroke-width="6" stroke-dashoffset="5" cx="6" cy="6" r="5"/>
 8    <circle fill="red" stroke="#000" stroke-width="6" stroke-dashoffset="5" stroke-opacity="0" cx="6" cy="6" r="5"/>
 9    <circle fill="red" stroke="#000" stroke-width="0" stroke-dashoffset="5" cx="6" cy="6" r="5"/>
10    <circle fill="red" stroke="#000" stroke-width="6" stroke-dashoffset="5" cx="6" cy="6" r="5"/>
11    <g stroke="#000" stroke-width="6">
12        <circle fill="red" stroke="red" stroke-width="0" stroke-dashoffset="5" cx="6" cy="6" r="5"/>
13        <circle fill="red" stroke-dashoffset="5" cx="6" cy="6" r="5"/>
14    </g>
15    <g stroke="#000">
16        <circle fill="red" stroke-width="0" stroke-dashoffset="5" cx="6" cy="6" r="5"/>
17        <circle fill="red" stroke="none" stroke-dashoffset="5" cx="6" cy="6" r="5"/>
18    </g>
19</svg>

Optimized SVG

 1<svg xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <g id="test">
 4            <rect stroke-dashoffset="5" width="10" height="10"/>
 5        </g>
 6    </defs>
 7    <circle fill="red" cx="6" cy="6" r="5"/>
 8    <circle fill="red" cx="6" cy="6" r="5"/>
 9    <circle fill="red" cx="6" cy="6" r="5"/>
10    <circle fill="red" stroke="#000" stroke-width="6" stroke-dashoffset="5" cx="6" cy="6" r="5"/>
11    <g stroke="#000" stroke-width="6">
12        <circle fill="red" cx="6" cy="6" r="5" stroke="none"/>
13        <circle fill="red" stroke-dashoffset="5" cx="6" cy="6" r="5"/>
14    </g>
15    <g stroke="#000">
16        <circle fill="red" cx="6" cy="6" r="5" stroke="none"/>
17        <circle fill="red" cx="6" cy="6" r="5" stroke="none"/>
18    </g>
19</svg>

CleanListOfValues: redondea a 3 decimales los valores numéricos de la lista en los atributos

Original SVG

1<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500.2132 500.213823642" enable-background="new 0 0 500.224551535 500.213262">
2    test
3</svg>

Optimized SVG

1<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500.213 500.214" enable-background="new 0 0 500.225 500.213">
2    test
3</svg>

RemoveIndentsAndLineBreaks: elimina sangrías y saltos de línea

Original SVG

1<svg xmlns="http://www.w3.org/2000/svg">
2    <g>
3        <ellipse rx="1"/>
4        <ellipse ry="1"/>
5    </g>
6</svg>

Optimized SVG

1<svg xmlns="http://www.w3.org/2000/svg"><g><ellipse rx="1"/><ellipse ry="1"/></g></svg>

Opciones de optimización de ruta

SVGOptimizationOptions contiene PathOptimizationOptions que admite las siguientes opciones de optimización:

ApplyTransforms: aplica transformaciones a los segmentos de ruta

Original path

1<path d="M32 4a4 4 0 0 0-4-4H8a4 4 0 0 1-4 4v28a4 4 0 0 1 4 4h20a4 4 0 0 0 4-4V4z" fill="#888" transform="matrix(1 0 0 -1 0 36)"/>

Optimized path

1<path d="M32 32a4 4 0 0 1-4 4H8a4 4 0 0 0-4-4V4a4 4 0 0 0 4-4h20a4 4 0 0 1 4 4v28z" fill="#888"/>

ArcBuildingThreshold: establece el error de umbral para reemplazar segmentos de Bézier con segmentos de arco

Original path

1<path d="M.49 8.8c-.3-.75-.44-1.55-.44-2.35 0-3.54 2.88-6.43 6.43-6.43 3.53 0 6.42 2.88 6.42 6.43 0 .8-.15 1.6-.43 2.35"/>

Optimized path

ArcBuildingThreshold = 1

1<path d="M.49 8.8C.19 8.05.05 7.25.05 6.45.05 2.91 2.93.02 6.48.02c3.53 0 6.42 2.88 6.42 6.43 0 .8-.15 1.6-.43 2.35"/>

ArcBuildingThreshold = 4

1<path d="M.49 8.8A6.438 6.438 0 0 1 6.48.02c3.53 0 6.42 2.88 6.42 6.43 0 .8-.15 1.6-.43 2.35"/>

ArcBuildingTolerance: establece el porcentaje de radio para reemplazar segmentos de Bézier con segmentos de arco

Original path

1<path d="M41.008 0.102c1.891 0.387 3.393 1.841 3.849 3.705"/>

Optimized path

ArcBuildingTolerance = 0

1<path d="M41.008.102c1.89.387 3.393 1.84 3.85 3.705"/>

ArcBuildingTolerance = 0.5f

1<path d="M41.008.102a5.006 5.006 0 0 1 3.85 3.705"/>

FloatPrecision: establece el valor de punto flotante de precisión flotante en un número específico de dígitos fraccionarios

Original path

1<p><path d="M33.02783,1.965459 C33.097408,2.035034 38.04136,6.978988 38.04136,6.978988 C38.04136,6.978988 38.00943,4.03467 38.00943,4.03467 L34,0.02523956 L34,0 L13,0 L13,2 L33.06237,2 Z"></path></p>

Optimized path

FloatPrecision = 2

1<path d="m33.03 1.97 5.01 5-.03-2.94-4.01-4V0H13v2h20.06z"/>

FloatPrecision = 3

1<path d="M33.028 1.965 38.04 6.98l-.03-2.945L34 .025V0H13v2h20.062z"/>

RemoveSpaceAfterFlags: elimina el espacio adicional después de las banderas del comando arcto

Original path

1<path d="m100 200 200 200H100V300c0-200 150-200 150-100s150 100 150 0q0-150 200 100t400 0a150 150 0 1 0 150-150z"/>

Optimized path

1<path d="m100 200 200 200H100V300c0-200 150-200 150-100s150 100 150 0q0-150 200 100t400 0a150 150 0 10150-150z"/>

Puede descargar los ejemplos completos y los archivos de datos desde GitHub.. Puede obtener información sobre cómo descargar desde GitHub y ejecutar ejemplos en la sección Cómo ejecutar los ejemplos.

Cómo fusionar archivos SVG Vectorización – descripción general básica