Экспорт шрифтовых иконок из Photoshop в svg

Очень часто в макетах сайтов используются шрифтовые иконки. Некоторые иконочные шрифты, такие, как fontawesome.io применяются особенно часто. Но, если на сайте используются всего несколько иконок, то подключать целый шрифт не имеет смысла, т.к это будет неоправданно увеличивать нагрузку на сервер.

Выйти из этой ситуации можно, как минимум, двумя путями:

1. Воспользоваться сервисом создания иконочных шрифтов, например fontello.com, куда собрать только нужные иконки, что существенно уменьшит размер подключаемого шрифта

2. Конвертировать иконки в формат svg. Этот вариант предпочтительнее хотя бы потому, что svg изображение можно вставить непосредственно в разметку и избежать лишнего запроса на сервер для подключения шрифта, а так же гибко взаимодействовать с элементами svg c помощью css.

Конвертировать иконку достаточно просто при помощи photoshop. Для этого необходимо выполнить несколько шагов:

1. Установить шрифт fontawesome в систему, если он ещё не установлен

2. Зайти на страницу fontawesome.io/cheatsheet, выделить нужную иконку и скопировать её

3. Открыть Photoshop, выбрать инструмент текст и шрифт fontawesome

4. Вставить иконку на холст

5. Выбрать инструмент «Текст -> Преобразовать в блочный текст», после чего «Текст -> Преобразовать в кривые»

6. Выбрать убедиться, что нужный слой выбран в палитре слоев и щелчком правой кнопки мыши вызвать контекстное меню, в котором выбрать пункт «Экспортировать как»

7. В открывшемся диалоговом окне выбрать формат svg

Теперь можно открыть сохранённый svg файл в редакторе кода и использовать этот код в разметке.

Leave a Reply

Ваш e-mail не будет опубликован. Обязательные поля помечены *