SVG в ICO не работает? Распространённые причины (шрифты, внешние изображения, ViewBox)

SVG — один из лучших исходных форматов для создания ICO-файлов. Поскольку SVG является векторным форматом, он масштабируется до любого размера без потери качества, что делает его идеальным для создания слоёв с различными размерами (от 16 до 256 пикселей), необходимых для качественного ICO-файла. Теоретически вы загружаете SVG в Any2ICO и мгновенно получаете чёткий многоразмерный ICO-файл.

На практике файлы SVG могут быть капризными. Спецификация SVG обширна и сложна, а различные инструменты создают SVG с разными предположениями о том, как файл будет отображаться. SVG, который идеально выглядит в Adobe Illustrator или Figma, может отображаться некорректно, частично или вообще не отображаться при открытии через Canvas API браузера — механизм рендеринга, который используют браузерные конвертеры. Результатом может быть пустая иконка, иконка с отсутствующим текстом, иконка в неправильном масштабе или иконка с недостающими элементами.

Хорошая новость заключается в том, что эти проблемы хорошо изучены, а их решения просты. В этой статье рассматриваются наиболее распространённые причины, по которым конвертация SVG в ICO завершается ошибкой или даёт неожиданные результаты, и предлагается чёткое решение для каждой из них. Если вы хотите получить результат максимально быстро, начните с контрольного списка в следующем разделе.

Краткий контрольный список: подготовьте SVG перед конвертацией

Прежде чем переходить к подробным объяснениям, ознакомьтесь с контрольным списком, который решает большинство проблем при конвертации SVG в ICO. Пройдите по этим пунктам; если ваша проблема решена, дальше читать не нужно.

1. Добавьте или исправьте атрибут viewBox. Откройте SVG в текстовом редакторе и проверьте корневой элемент <svg>. Он должен содержать атрибут viewBox, например viewBox="0 0 100 100", определяющий систему координат. Если он отсутствует, добавьте его со значениями, соответствующими размерам вашего дизайна.

2. Преобразуйте весь текст в контуры (пути). Выделите все текстовые элементы в вашем векторном редакторе и преобразуйте их в контуры или пути. В Illustrator это Type > Create Outlines. В Figma щёлкните правой кнопкой мыши и выберите Flatten. В Inkscape используйте Path > Object to Path. Это полностью устраняет зависимость от шрифтов.

3. Удалите или встройте внешние ссылки. Найдите в SVG-файле ссылки href, xlink:href и url(), указывающие на внешние файлы (изображения, шрифты, CSS). Либо встройте эти ресурсы непосредственно в SVG, либо удалите их, если они не являются необходимыми.

4. Замените внешний CSS на встроенные стили. Если ваш SVG ссылается на внешнюю таблицу стилей, скопируйте соответствующие CSS-правила непосредственно в блок <style> внутри SVG или преобразуйте их во встроенные атрибуты style для каждого элемента.

5. Укажите явные ширину и высоту. Хотя это не всегда обязательно, добавление атрибутов width и height к корневому элементу <svg> помогает Canvas API определить правильный размер рендеринга. Используйте значения не менее 256 пикселей для лучших результатов.

Шрифты и отображение текста

Текст — это главный источник проблем при конвертации SVG. Когда SVG содержит элементы <text>, рендереру необходим доступ к указанному шрифту для корректного отображения текста. В дизайнерских приложениях, таких как Illustrator или Figma, шрифт установлен на вашем компьютере, поэтому всё выглядит правильно. Но когда SVG отображается через Canvas API браузера для конвертации в ICO, ситуация совершенно иная.

Canvas API может использовать только шрифты, доступные браузеру в момент рендеринга. Если ваш SVG указывает font-family: "Proxima Nova", а этот шрифт не установлен в системе пользователя и не загружен как веб-шрифт, браузер подставляет шрифт по умолчанию (обычно generic sans-serif или serif). Это меняет внешний вид текста: межбуквенные интервалы сдвигаются, символы могут быть шире или уже, а общая компоновка может нарушиться. В некоторых случаях текст может вообще не отобразиться, если SVG использует расширенные шрифтовые функции или лигатуры, которые не поддерживает подставленный шрифт.

Надёжное решение — преобразовать весь текст в контуры (также называется «преобразование в пути» или «сведение текста»). При этом каждый текстовый символ заменяется векторным путём, описывающим его точную форму. Полученный SVG больше не ссылается ни на один шрифт, поскольку формы букв представлены как геометрические пути. SVG-файл будет немного больше, но он будет отображаться одинаково в любой системе, в любом браузере и через любой Canvas API, независимо от установленных шрифтов.

В Illustrator: выделите весь текст, затем перейдите в Type > Create Outlines. В Figma: выделите текстовые слои, щёлкните правой кнопкой мыши и выберите Flatten. В Inkscape: выделите текст, затем используйте Path > Object to Path. Всегда сохраняйте оригинальный редактируемый SVG отдельно перед преобразованием в контуры, так как контурный текст больше нельзя редактировать как текст.

Внешние изображения и ссылки

SVG-файлы могут ссылаться на внешние ресурсы: изображения, загружаемые через <image href="/ru/logo.png">, шрифты, подключаемые через @font-face с URL, CSS-файлы, подключённые через <?xml-stylesheet?>, а также паттерны или градиенты, ссылающиеся на другие SVG-файлы. Когда SVG открывается как отдельный файл в браузерном конвертере, эти внешние ссылки почти всегда не загружаются.

Canvas API отображает SVG в изолированном контексте, где кросс-доменные запросы блокируются по соображениям безопасности. Элемент <image>, указывающий на https://example.com/logo.png, не загрузится, поскольку браузер блокирует кросс-доменный запрос. В результате на месте изображения остаётся пустое пространство. То же самое относится к внешним шрифтам, таблицам стилей и любым ресурсам, на которые указывает URL.

Даже относительные пути, такие как href="/ru/logo.png", не сработают, поскольку SVG обрабатывается в памяти через Canvas API, а не загружается из каталога, в котором относительные пути могли бы разрешаться. У SVG нет контекста файловой системы для обращения к внешним ресурсам.

Решение — встроить все внешние ресурсы непосредственно в SVG. Для изображений преобразуйте их в URI с данными в формате base64: <image href="data:image/png;base64,iVBOR...">. Для шрифтов используйте объявление @font-face в кодировке base64 внутри блока <style> в SVG (хотя преобразование текста в контуры обычно проще и надёжнее). Для CSS скопируйте все правила во встроенный элемент <style> внутри тега <svg>.

Проблемы с viewBox, шириной и высотой

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

Отсутствует viewBox: Если SVG имеет width и height, но не имеет viewBox, некоторые рендереры определят viewBox на основе размеров, но Canvas API может этого не сделать. Самый надёжный подход — всегда включать явный viewBox. Если ваш SVG создан в координатах 100x100, добавьте viewBox="0 0 100 100" к корневому элементу.

viewBox не соответствует содержимому: Если координаты viewBox не охватывают всё содержимое SVG, часть дизайна будет обрезана. Например, если элементы вашей иконки простираются до x=120, а viewBox охватывает только от 0 до 100, правые 20 единиц будут невидимы. Откройте SVG в текстовом редакторе, проверьте значения viewBox и скорректируйте их, чтобы охватить все видимые элементы.

Ширина/высота установлены в 0 или очень малые значения: Некоторые инструменты экспорта SVG устанавливают ширину и высоту в очень малые значения, такие как 1px или 0, полагаясь на CSS для масштабирования SVG при отображении на веб-странице. Когда Canvas API считывает эти размеры, он может отрендерить SVG в 1x1 пиксель, а затем масштабировать его вверх, что даст полностью пустой или сильно размытый результат. Установите ширину и высоту не менее 256 пикселей, чтобы обеспечить Canvas API разумный размер рендеринга.

Размеры в процентах: SVG с width="100%" height="100%" не имеет собственного размера. Canvas API необходимы абсолютные значения в пикселях для создания поверхности рендеринга. Замените процентные размеры абсолютными значениями, такими как width="512" height="512".