So optimieren Sie SVG – C#-Beispiele

Warum SVG optimieren?

Das SVG-Format ist sehr flexibel, hat aber auch einige Nachteile. Einer davon ist, dass das Format nicht sehr effizient ist. Das bedeutet, dass SVG-Bilder langsam geladen und auch langsam gerendert werden können. Dies ist ein Problem für Webentwickler, da es die Benutzererfahrung beeinträchtigen kann. Es kann sich auch auf die SEO einer Website auswirken, da Suchmaschinen langsame Websites bestrafen können. Die Optimierung von SVGs aus Leistungsgründen ist eine sehr häufige Aufgabe. Aspose.SVG für .NET API stellt die Klasse SVGOptimizer zur Verfügung, um bei dieser Aufgabe zu helfen. Dieses Tool komprimiert das SVG-Dokument, indem es verschiedene Heuristiken anwendet, um Pfade zu optimieren und ungenutzte oder nutzlose Elemente und Attribute zu entfernen.

Aspose.SVG bietet kostenlosen Online- SVG-Optimierer. Optimieren Sie SVG-Dateien, um Ihre Website schneller und besser zu machen! Sie können eine Reihe von Optionen verwenden, mit denen Sie den Grad der Komprimierung und Vereinfachung flexibel steuern und das gewünschte Ergebnis erzielen können. Mit dem SVG Optimizer optimieren Sie SVG ganz einfach innerhalb von Minuten. Testen Sie unsere kraftvolle Anwendung jetzt kostenlos!

SVG in C# optimieren

Um SVG-Dokumente zu optimieren, verwenden Sie den folgenden Codeausschnitt:

 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    }

Im aktuellen Abschnitt werden unterstützte Szenarien der SVG-Dateioptimierung beschrieben. Schauen wir uns die Schritte zur Optimierung von SVG an.

Initialisieren Sie ein SVG-Dokument aus einer Datei mit einem der SVGDocument()-Konstruktoren.
Erstellen Sie ein neues SVGOptimizationOptions-Objekt. Verwenden Sie den Konstruktor SVGOptimizationOptions().
Verwenden Sie die Eigenschaft PathOptimizationOptions der SVGOptimizationOptions-Klasse, um SVG-Pfade zu optimieren.
Rufen Sie die Methode Optimize() auf, um das SVG-Dokument zu optimieren.
Speichern Sie das optimierte SVG-Dokument in einer Datei.

SVG-Optimierungsoptionen

Aspose.SVG für .NET API bietet eine Reihe von Optimierungsoptionen, die es ermöglichen, SVG-Code zu reduzieren, indem leere Elemente, Attribute mit leeren Werten, nicht verwendete Strich- und Füllattribute, Elemente, die beim Rendern nicht sichtbar sind, leere Container, leere Textelemente usw. entfernt werden. Zeileneinzüge und -umbrüche und mehr.
Die C#-Bibliothek Aspose.SVG unterstützt die folgenden Optimierungsoptionen für SVG-Elemente SVGOptimizationOptions:

Die Eigenschaft CollapseGroups reduziert überschüssige Gruppen.

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 – Entfernt nur Editorinhalte oder leere Elemente

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 – Entfernt Attribute mit leeren Werten

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 – Entfernt leere Container

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 – Entfernt leere „Text“-Elemente

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 – Entfernt Elemente, die beim Rendern nicht sichtbar sind

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 – Entfernt Metadaten

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 – Entfernt die Deklaration nicht verwendeter Namespaces aus dem SVG-Element, die nicht in Elementen oder Attributen verwendet werden

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 – Entfernt den Inhalt von Defs, die nicht direkt ohne Bezeichner angezeigt werden

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 – Entfernt nicht verwendete Strich- und Füllattribute

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 – Rundet numerische Listenwerte in Attributen auf 3 Dezimalstellen

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 – Entfernt Zeileneinzüge und Umbrüche

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>

Optionen zur Pfadoptimierung

SVGOptimizationOptions enthält PathOptimizationOptions, das die nächsten Optimierungsoptionen unterstützt:

ApplyTransforms – Wendet Transformationen auf die Pfadsegmente an

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 – Legt den Schwellenwertfehler für das Ersetzen von Bezier-Segmenten durch Bogensegmente fest

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 – Legt den Prozentsatz des Radius für das Ersetzen von Bezier-Segmenten durch Bogensegmente fest

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 – Setzt den Gleitkommawert mit Float-Genauigkeit auf eine angegebene Anzahl von Nachkommastellen

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 – Entfernt zusätzlichen Platz nach „arcto“-Befehlsflags

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"/>

Sie können die vollständigen Beispiele und Datendateien von GitHub. herunterladen. Informationen zum Herunterladen von GitHub und zum Ausführen von Beispielen finden Sie im Abschnitt So führen Sie die Beispiele aus.

So führen Sie SVG-Dateien zusammen Vektorisierung – Grundlegende Übersicht