Подтвердить что ты не робот

Минимизация размера файла SVG

Я сохраняю изображения карт, созданные в Adobe Illustrator, как документы .svg. Каковы некоторые советы и рекомендации для того, чтобы размер файла был как можно меньше?

Ответ 1

Отключите "Сохранять возможности редактирования иллюстратора", который включает в себя огромную прописную псевдо-двоичную blob в вашем файле.
GZIP ваш контент (либо явно, либо через настройки вашего веб-сервера), когда пользовательские агенты, которые вы намереваетесь просмотреть свою работу, поддерживаете это.
SVG - это XML и, следовательно, текст и, следовательно, весьма сжимаемый.
Уменьшить ненужную числовую точность. (Вы можете сделать это либо с настройкой "Десятичные места" при сохранении в Illustrator, либо путем последующей обработки вашего файла, чтобы уменьшить точность.)
Например, следующие два пути визуально неотличимы:
```
<path d="M102.6923828,391.6152344
 c56.8027344,115.9394531-3.8457031-246.1542969,105.3847656-217.6923828
 s218.4609375-53.0766602,243.8457031,40.7695313
 S541.9228516,411.6152344,435,527s-166.1538086,58.4609375-213.8461914-50
 C173.4614258,368.5385742,46.5385742,277,102.6923828,391.6152344z"

<path d="M102.7,391.6c56.8,115.9-3.8-246.2,105.4-217.7s218.5-53.1,243.8,40.8
 s90,196.9-16.9,312.3s-166.2,58.5-213.8-50C173.5,368.5,46.5,277,102.7,391.6z"
```

Измените повторяющиеся стили, основанные на атрибутах, в общие стили, основанные на CSS или сущности.
Например, вы можете заменить

<rect fill="red" stroke="black" stroke-width="10px"   ... />
<circle fill="red" stroke="black" stroke-width="10px" ... />

.bold { fill:red; stroke:black; stroke-width:10px }
<!-- ... -->
<rect class="bold"   ... />
<circle class="bold" ... />

Измените повторные преобразования в сгруппированные элементы.
Например, замените

<rect   transform="translate(102,-64) rotate(10.23)" ... />
<circle transform="translate(102,-64) rotate(10.23)" ... />

<g transform="translate(102,-64) rotate(10.23)">
  <rect ... />
  <circle ... />
</g>