Как качественно конвертировать PDF в SVG
Чтобы получить чистый SVG из PDF, нужно выбрать стратегию обработки текста (оставить живым или перевести в кривые) и проверить корректность переноса прозрачности. Идеального автоматического конвертера не существует: результат зависит от сложности исходного макета. Для простых иллюстраций подходят онлайн-конвертеры, для сложных документов с типографикой лучше использовать векторные редакторы вроде Inkscape или профессиональные SDK.
Когда нужна конвертация PDF в SVG
Перевод в SVG оправдан, если вам требуется векторный формат для веб-разработки, создания адаптивных иконок, интерактивных схем или дальнейшего редактирования графики. SVG масштабируется без потери качества и поддерживает анимацию через CSS/JS, чего лишен PDF.
Однако, если документ содержит сложные эффекты наложения, многостраничную верстку или специфические печатные метки, прямая конвертация может исказить макет. В таких случаях проще экспортировать исходник напрямую из графического редактора (Illustrator, CorelDRAW) в SVG, минуя этап PDF.
Проблема шрифтов: текст или кривые?
Главный конфликт при конвертации — сохранение редактируемости против визуальной точности. PDF хранит информацию о шрифтах иначе, чем SVG, что приводит к двум основным сценариям.
Сценарий 1: Текст остается текстом (<text>)
Конвертер пытается сопоставить шрифты из PDF с системными шрифтами или внедряет их в SVG.
- Плюсы: Файл весит мало, текст можно редактировать, индексировать поисковиками и копировать.
- Минусы: Риск «поехавшей» верстки, если шрифт не найден или отличается кернинг. Браузер может отобразить текст иначе, чем в оригинале.
Сценарий 2: Текст превращается в кривые (Paths)
Каждая буква становится набором векторных контуров.
- Плюсы: Гарантия того, что дизайн останется неизменным на любом устройстве. Не зависит от установленных шрифтов.
- Минусы: Резкий рост веса файла, невозможность редактирования текста, ухудшение доступности (accessibility).
Золотая середина: Оставьте живым основной массив текста (статьи, описания), а заголовки и логотипы со сложной типографикой переведите в кривые. Это сохранит легкость файла и защитит дизайн от искажений.
Работа с прозрачностью и эффектами
SVG поддерживает прозрачность (opacity, fill-opacity), маски (mask) и обрезку (clipPath), но реализация этих функций отличается от PDF.
- Простая прозрачность: Обычно переносится корректно через атрибуты opacity.
- Сложные маски и градиенты: Конвертеры часто заменяют их растровыми подложками или упрощенными векторными группами. Это может привести к появлению белого фона там, где должна быть прозрачность, или к потере мягких теней.
- Режимы наложения (Blend Modes): Поддержка в SVG ограничена. Эффекты вроде «Multiply» или «Screen» могут отображаться по-разному в разных браузерах.
Как проверить результат
Откройте полученный SVG в браузере (Chrome/Firefox) и в векторном редакторе (Inkscape/Illustrator). Если вы видите белые артефакты вместо прозрачных областей или смещение слоев, значит, конвертер не смог корректно интерпретировать группы прозрачности PDF.
Выбор инструмента для конвертации
| Инструмент | Лучшее применение | Нюансы |
|---|---|---|
| Inkscape | Ручная доработка, сложные макеты | Импорт PDF позволяет выбрать, какие страницы и слои загружать. Лучше всего сохраняет структуру, но требует ручной правки. |
| Adobe Illustrator | Профессиональный дизайн | Открывает PDF напрямую. Экспорт в SVG дает максимальный контроль над шрифтами и кодом. Платный. |
| Онлайн-сервисы (CloudConvert, PDF24) | Быстрая пакетная обработка простых файлов | Часто превращают весь текст в кривые или растризуют сложные эффекты. Не подходит для редактируемых макетов. |
| Ghostscript / CLI | Автоматизация на сервере | Требует настройки параметров. Может давать «грязный» код, который нужно оптимизировать (например, через SVGO). |
Избегайте конвертации сканированных документов (растровых PDF) в SVG в надежде получить вектор. Без предварительного трассирования (vectorization) вы получите SVG с встроенной картинкой, что бессмысленно увеличивает вес файла.
Пошаговый алгоритм качественной конвертации
- Подготовка PDF: Убедитесь, что шрифты внедрены в PDF. Если файл создан из изображений, сначала выполните автотрассировку.
- Импорт: Откройте файл в Inkscape или Illustrator. При импорте выберите опцию «Внутренний импорт» (Internal Import) для лучшей совместимости.
- Аудит текста: Проверьте, не заменились ли шрифты на стандартные (Arial/Times). Если критично — выделите текстовые блоки и переведите их в кривые (Shift+Ctrl+C в Inkscape).
- Чистка прозрачности: Удалите невидимые слои и пустые группы. Проверьте наличие маскирующих объектов.
- Экспорт: Сохраните как SVG. В настройках выберите «Optimized SVG» (если доступно) для удаления мусора.
- Оптимизация кода: Прогоните файл через утилиту SVGO или онлайн-оптимизатор для уменьшения размера без потери качества.
Частые ошибки
- Конвертация многостраничных PDF в один SVG. SVG не имеет нативной поддержки страниц. Каждая страница превратится в длинный холст или отдельный файл. Разбивайте PDF на страницы перед конвертацией.
- Игнорирование цветового профиля. PDF может использовать CMYK, а SVG работает только с RGB. Яркие неоновые цвета могут стать тусклыми. Конвертируйте цвета в RGB до экспорта.
- Оставление мета-данных. PDF часто содержит скрытые слои, комментарии и метаданные, которые попадают в SVG и раздувают его код. Очищайте файл перед сохранением.
FAQ
Почему SVG весит больше, чем исходный PDF? Если текст был переведен в кривые, каждая буква описывается сложными математическими путями. Также SVG может содержать избыточный код стилей, который не был очищен при экспорте.
Можно ли сделать текст в SVG редактируемым после конвертации из PDF? Да, если использовать редакторы вроде Illustrator или Inkscape и не применять функцию «Создать outlines». Однако шрифт должен быть установлен в вашей системе или внедрен в файл.
Как убрать белый фон в SVG, полученном из PDF?
Часто белый фон — это прямоугольный объект на заднем плане. Откройте SVG в редакторе, выделите этот объект и удалите его. Либо добавьте атрибут background-color: transparent в CSS, если фон задан стилями.