Comment optimiser SVG – Exemples C#

Pourquoi optimiser SVG?

Le format SVG est très flexible, mais il présente également certains inconvénients. L’un d’eux est que le format n’est pas très efficace. Cela signifie que les images SVG peuvent être lentes à charger, tout comme leur rendu. C’est un problème pour les développeurs Web car cela peut affecter l’expérience utilisateur. Cela peut également affecter le référencement d’un site Web car les moteurs de recherche peuvent pénaliser les sites Web lents. L’optimisation des SVG pour des raisons de performances est une tâche très courante. Aspose.SVG pour l’API .NET fournit la classe SVGOptimizer pour vous aider dans cette tâche. Cet outil compresse le document SVG en appliquant diverses heuristiques pour optimiser les chemins et supprimer les éléments et attributs inutilisés ou inutiles.

Aspose.SVG propose gratuitement en ligne SVG Optimizer. Optimisez les fichiers SVG pour rendre votre site Web plus rapide et meilleur! Vous pouvez utiliser un ensemble d’options qui vous permettent de contrôler de manière flexible le niveau de compression et de simplification et d’obtenir le résultat souhaité. Avec SVG Optimizer, vous optimiserez facilement SVG en quelques minutes. Essayez notre application puissante gratuitement dès maintenant!

Optimiser SVG en C#

Pour optimiser les documents SVG, utilisez l’extrait de code suivant :

 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 section actuelle décrit les scénarios pris en charge pour l’optimisation des fichiers SVG. Examinons les étapes pour optimiser SVG.

Initialisez un document SVG à partir d’un fichier en utilisant l’un des constructeurs SVGDocument().
Créez un nouvel objet SVGOptimizationOptions. Utilisez le constructeur SVGOptimizationOptions().
Utilisez la propriété PathOptimizationOptions de la classe SVGOptimizationOptions pour optimiser les chemins SVG.
Appelez la méthode Optimize() pour optimiser le document SVG.
Enregistrez le document SVG optimisé dans un fichier.

Options d’optimisation SVG

Aspose.SVG pour l’API .NET propose un ensemble d’options d’optimisation qui permettent de réduire le code SVG en supprimant les éléments vides, les attributs avec des valeurs vides, les attributs de contour et de remplissage inutilisés, les éléments non visibles lors du rendu, les conteneurs vides, les éléments de texte vides, les retraits et les sauts de ligne, et bien plus encore.
La bibliothèque Aspose.SVG C# prend en charge les options d’optimisation des éléments SVG suivantes SVGOptimizationOptions:

La propriété CollapseGroups réduit les groupes en excès.

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 – Supprime uniquement le contenu des éditeurs ou les éléments vides

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 – Supprime les attributs avec des valeurs vides

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 – Supprime les conteneurs vides

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 – Supprime les éléments ‘Text’ vides

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 – Supprime les éléments qui ne sont pas visibles lors du rendu

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 – Supprime les métadonnées

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 – Supprime la déclaration des espaces de noms inutilisés de l’élément SVG qui ne sont pas utilisés dans les éléments ou les attributs

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 – Supprime le contenu des définitions qui ne sont pas affichées directement sans identifiants

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 – Supprime les attributs de trait et de remplissage inutilisés

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 – Arrondit à 3 décimales des valeurs numériques de la liste dans les attributs

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 – Supprime les retraits et les sauts de ligne

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>

Options d’optimisation du chemin

SVGOptimizationOptions contient PathOptimizationOptions qui prend en charge les options d’optimisation suivantes:

ApplyTransforms – Applique des transformations aux segments de chemin

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 – Définit l’erreur de seuil pour le remplacement des segments de Bézier par des segments d’arc

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 – Définit le pourcentage de rayon pour remplacer les segments de Bézier par des segments d’arc

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 – Définit la valeur à virgule flottante de précision flottante sur un nombre spécifié de chiffres fractionnaires

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 – Supprime l’espace supplémentaire après les indicateurs de commande ‘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"/>

Vous pouvez télécharger les exemples complets et les fichiers de données depuis GitHub.. Vous découvrirez le téléchargement depuis GitHub et l’exécution d’exemples dans la section Comment exécuter les exemples.

Comment fusionner des fichiers SVG Vectorisation – Aperçu de base