Helpful resources ▼
  Download   Pricing   Buy

Как оптимизировать SVG – примеры C#

Зачем оптимизировать SVG?

Формат SVG очень гибок, но имеет и некоторые недостатки. Один из них заключается в том, что формат не очень эффективен. Это означает, что изображения SVG могут медленно загружаться, а также медленно рендериться. Это проблема для веб-разработчиков, поскольку она может повлиять на взаимодействие с пользователем. Это также может повлиять на SEO веб-сайта, поскольку поисковые системы могут наказывать медленные веб-сайты. Оптимизация SVG для повышения производительности – очень распространенная задача. Aspose.SVG for .NET API предоставляет класс SVGOptimizer, который помогает справиться с этой задачей. Этот инструмент сжимает документ SVG, применяя различные эвристики для оптимизации путей и удаления неиспользуемых или бесполезных элементов и атрибутов.

Aspose.SVG предлагает бесплатное онлайн-приложение SVG Optimizer. Оптимизируйте SVG файлы, чтобы сделать ваш сайт быстрее и лучше! Вы можете использовать набор опций, которые позволяют гибко управлять уровнем сжатия и упрощения и добиваться желаемого результата. С помощью SVG Optimizer вы легко оптимизируете SVG за считанные секунды. Попробуйте наше мощное приложение бесплатно прямо сейчас!

Оптимизация SVG на C#

Чтобы оптимизировать документы 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. Инициализируйте документ SVG из файла, используя один из конструкторов SVGDocument().
  2. Создайте новый объект SVGOptimizationOptions. Используйте конструктор SVGOptimizationOptions().
  3. Используйте свойство PathOptimizationOptions класса SVGOptimizationOptions для оптимизации путей SVG.
  4. Вызовите метод Optimize(), чтобы оптимизировать документ SVG.
  5. Сохраните оптимизированный документ SVG в файл.

Варианты оптимизации SVG

Aspose.SVG для .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 – удаляет содержимое определений, которые не отображаются напрямую без идентификаторов.

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.