Каковы некоторые варианты оптимизации SVG?

У меня есть несколько SVG, некоторые из них довольно большие (11 МБ), и они созданы из PDF с помощью pdf2svg.

Проблема заключается в том, что SVG слишком велик, требуется много времени для открытия и излишне сложный. Он содержит в основном текст и некоторые изображения (думаю, газета), и текст делится на маленькие фрагменты символов, даже слов.

Мне нужно оптимизировать его, сначала уменьшить размер, а также уменьшить количество элементов, чтобы ускорить загрузку. Единственное, о чем я думал до сих пор, - это смотреть на символы, которые находятся в одной строке, и присоединяться к ним в одном <tspan>.

Это должно значительно уменьшить количество текстовых элементов, так как оно выглядит в основном группами из 1-5 букв.

Но я ищу еще несколько вещей, которые я могу сделать для SVG, чтобы уменьшить размер. Там также основной шрифт, который используется примерно для 95% текста, но, как и сейчас, весь текст определяется как глифы (визуализированные фигуры).

Можно ли просто вставлять шрифт, поэтому текст отображается как текст, а не как фигуры?

Также, если вы знаете какую-либо лучшую библиотеку для преобразования PDF файлов в SVG, я был бы признателен за любой ввод. Единственное требование заключается в том, что он должен выглядеть так же, как в формате PDF.

Я также хотел бы отметить, что скорость не очень важна. Не имеет значения, сколько времени занимает преобразование, если оно дает требуемый результат.

Ответ 1

SVG-Cleaner, кажется, работает отлично: намного быстрее, чем другие, лучшее сжатие, надежность в моих тестах, обработка папок для пакетов и эй! установщик окон для нас ленивые люди!

Моя попытка: Исходный размер файла: 241 КБ, после удаления InkScape ссылки: 149 КБ, очистка с помощью инструмента: 38 КБ, очистка и сжатие: 5 КБ (расширение файла .sgvz).

Я пытался открыть последний, ожидая пустой рисунок... Но моя графика все еще была там!

Загрузите его здесь (Windows, Ubuntu или Source)

Ответ 2

Недавно я начал создавать программу Python для оптимизации SVG, которую вы можете найти по адресу: https://github.com/petercollingridge/SVG-Optimiser

Там очень предварительная онлайн-версия: http://petercollingridge.appspot.com/

С дополнительной информацией: http://www.petercollingridge.co.uk/blog/svg-optimiser

Это далеко не полный и, вероятно, очень глючный, но он касается некоторых проблем, о которых упоминал Chasbeen, таких как удаление ненужной точности и атрибутов стиля по умолчанию. Он также может выделять ненужные атрибуты и пространства имен, если вы знаете, что ищете, и преобразуете стили в CSS, что упростит просмотр того, как они могут быть улучшены.

Я не совсем понимаю, что вы имеете в виду для встраивания шрифтов. Если вы вставляете примерный фрагмент SVG, показывающий гифы и несколько символов, я мог бы включить метод для их объединения.

Ответ 3

Я могу порекомендовать Scour, поскольку я использовал его очень много, когда убирал ненужный рывок из SVG файлы, которые являются чем-то вроде моего хобби.

Пример командной строки scour, которая может служить вам хорошо (и с которой я начинаю начинать):

scour --enable-viewboxing --create-groups --shorten-ids --enable-id-stripping --enable-comment-stripping --disable-embed-rasters --remove-metadata --strip-xml-prolog -p 9 < old.svg > new.svg

Обязательно сравните старое с новым, чтобы убедиться, что он ничего не разрушил и попробуйте снизить десятичную точность -p (по умолчанию это 5, если вы не даете); на каком-то уровне он, вероятно, начинает искажать вещи довольно плохо, но один или два десятичных знака выше должны хорошо выглядеть.

Если вы хотите использовать более ручной подход, есть много трюков в торговле, собранных в Kilobyte SVG Challenge changesets, которые подразумеваются как своего рода комбинированное учебное и учебное место для такого рода вещей.

Да, вы можете вставлять шрифт в SVG файл или связывать внешний, как показал Майк Босток, на Логотип WebPlatform.org (не-html-завернутая версия здесь).

Конечно, это намного проще сделать, если у вас есть подробное знание о том, какие шрифты используются, чем если вы выберете произвольный pdf файл и преобразуете его; Я не знаю каких-либо инструментов, которые создают шрифт без имени из любых глифов, которые вставляются в оригинальную pdf-версию, без того, что вы делаете большую часть (или все) этой работы самостоятельно.

Кроме того, существует расширенный список инструментов оптимизации SVG в разделе Kilobyte SVG Challenge README.

Ответ 4

https://github.com/svg/svgo

sudo npm install -g svgo

для оптимизации всех svgs в текущем каталоге:

svgo -f .

Если у вас нет npm, вы можете установить его на Ubuntu так:

sudo apt-get update && sudo apt-get install nodejs-legacy npm

Ответ 5

Я думаю, что ваш преобразованный SVG, вероятно, очень вздут от того, что он может быть. Я не уверен, возьмет ли Inkscape! Существуют опции меню, такие как "Преобразовать в текст", но они не обязательно работают.

Вы можете выполнять поиск и замену в своем файле, чтобы удалить ссылки на значения атрибутов SVG по умолчанию, такие как.. ход: # 000000; штрих-ширина: 1px; штрих-linecap: встык; штрих-linejoin: митры; Ход-Непрозрачность: 1; Многие из них по умолчанию в любом случае, так что поиск и замена им ничего не дают.

Также удивительно, как можно уменьшить ненужную точность. При конвертации для этого конкретного файла вы можете найти десятичное окончание .0000001 или .99999675, все эти повторения также могут быть удалены/уменьшены

Ответ 6

Используя библиотеку python feedparser, которая включает санитацию SVG, я написал эту функцию, которая досадно обертывает svg в одном элементе RSS для упорядочения для его анализа.

import feedparser
def sanitize_svg(svg):
    feed = """<?xml version="1.0" encoding="UTF-8" ?><rss><channel><item><description>""" + svg + """</description></item></channel></rss>"""
    parsed = feedparser.parse(feed)
    return parsed.entries[0].description.encode('utf-8')

Несмотря на то, что для элементов с белым списком с учетом безопасности, он также уменьшает размер svg на честный бит.

Ответ 7

Может быть, вы можете использовать бесплатный веб-сервис для этого.

Попробуйте этот сайт: https://online-converting.com/svg-optimizer/