Helpful resources ▼
  Download   Pricing   Buy

如何优化 SVG – C# 示例

为什么要优化 SVG？

SVG 格式非常灵活，但它也有一些缺点。其中之一是格式效率不高。这意味着 SVG 图像加载速度可能很慢，渲染速度也可能很慢。 这对于 Web 开发人员来说是一个问题，因为它会影响用户体验。它还会影响网站的搜索引擎优化，因为搜索引擎会惩罚缓慢的网站。 出于性能原因优化 SVG 是一项非常常见的任务。 Aspose.SVG for .NET API 提供了 SVGOptimizer 类来帮助完成该任务。该工具通过应用各种启发式方法来优化路径并删除未使用或无用的元素和属性来压缩 SVG 文档。

Aspose.SVG 提供免费在线 SVG 优化器。优化 SVG 文件，让您的网站更快更好！您可以使用一组选项来灵活控制压缩和简化级别并实现所需的结果。使用 SVG 优化器，您可以在几分钟内轻松优化 SVG。立即免费尝试我们强大的应用程序！

在 C# 中优化 SVG

要优化 SVG 文档，请使用以下代码片段：

 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    }

本节介绍 SVG 文件优化支持的场景。让我们看看优化 SVG 的步骤。

  1. 使用 SVGDocument() 构造函数之一从文件初始化 SVG 文档。
  2. 创建一个新的 SVGOptimizationOptions 对象。使用 SVGOptimizationOptions() 构造函数。
  3. 使用 SVGOptimizationOptions 类的 PathOptimizationOptions 属性来优化 SVG 路径。
  4. 调用 Optimize()方法优化SVG文档。
  5. 将优化后的 SVG 文档保存到文件中。

SVG 优化选项

Aspose.SVG for .NET API 提供了一组优化选项，允许通过删除空元素、具有空值的属性、未使用的描边和填充属性、渲染期间不可见的元素、空容器、空文本元素来减少 SVG 代码，行缩进和中断等等。
Aspose.SVG C# 库支持以下 SVG 元素优化选项 SVGOptimizationOptions：

CollapseGroups 属性可折叠多余的组。

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 – 仅删除编辑器内容或空元素

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 – 删除具有空值的属性

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 – 删除空容器

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 – 删除空的“文本”元素

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 – 删除渲染期间不可见的元素

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 – 删除元数据

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 – 从 SVG 元素中删除元素或属性中未使用的未使用命名空间的声明

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 – 删除不带标识符直接显示的 def 内容

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 – 删除未使用的描边和填充属性

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 – 属性中的列表数值四舍五入到小数点后 3 位

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 – 删除行缩进和换行

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>

路径优化选项

SVGOptimizationOptions 包含 PathOptimizationOptions，它支持下一个优化选项：

ApplyTransforms – 将变换应用于路径段

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 – 设置用圆弧段替换贝塞尔曲线段的阈值误差

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 – 设置用圆弧段替换贝塞尔曲线段的半径百分比

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 – 将浮点精度浮点值设置为指定的小数位数

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 – 删除 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"/>

您可以从 GitHub. 下载完整的示例和数据文件。关于从 GitHub 下载并运行示例，您可以从 如何运行示例 部分了解。

如何合并 SVG 文件 矢量化 – 基本概述
Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.

© Aspose Pty Ltd 2001-2024. All Rights Reserved.