Векторные иконки для сайта: от выбора формата до генерации в SVG

Знакомая картина: верстаешь макет, на мониторе всё выглядит аккуратно, а открываешь страницу с телефона — иконки поплыли мутным мылом. В этот момент хочется закрыть ноутбук и пойти пить чай.

Не переживайте: через это проходил буквально каждый дизайнер и верстальщик. В этом гайде мы спокойно и по-человечески разберем, как устроен веб-вектор, как убрать лишний мусор из кода и как раз и навсегда собирать гармоничные наборы иконок без головной боли.

SVG, PNG или шрифты: какой формат выбрать для современного веба 🔗

Еще недавно в вебе использовали два привычных способа: ставили обычные картинки PNG или подключали иконочные шрифты (когда значки упаковывали внутрь шрифтовых файлов). Сегодня оба этих метода ушли в прошлое — их полностью вытеснил векторный формат SVG.

Давайте наглядно сравним три формата, чтобы раз и навсегда закрыть сомнения:

Почему обычные картинки PNG больше не подходят? 🔗

Картинка PNG — это сетка из цветных точек, похожая на бумажную фотографию.

Если посетитель откроет сайт со смартфона с четким экраном или просто приблизит страницу пальцами — значок мгновенно расплывается мутным мылом.

К тому же цвет картинки нельзя изменить кодом: если вы захотите сделать серую иконку синей при наведении мыши, вам придется вручную сохранять второй отдельный файл.

Почему провалилась идея с иконочными шрифтами? 🔗

Чтобы победить размытие, разработчики придумали хитрость — превратить значки в шрифт (самый известный пример — FontAwesome). Буквы в шрифтах ведь векторные и не мылятся!

Но эта идея породила две новые проблемы: * «Эффект дыры на первом экране»: пока файл шрифта скачивается через мобильный интернет, на месте корзины или меню 2–3 секунды зияют пустые места. Посетитель не понимает, куда жать. * Невидимость для незрячих пользователей: программы чтения экрана для слабовидящих людей читают такой шрифт как бессмысленный набор служебных знаков вроде «символ F-ноль-два». Человек просто не понимает, что это кнопка заказа.

Почему победил чистый векторный код SVG? 🔗

Векторный SVG — это точный чертеж архитектора.

Браузер не загружает тяжелые пиксели, а читает математические координаты линий. Поэтому сколько ни приближай иконку — она всегда остается бритвенно-острой на любом экране.

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

С форматом определились — берем SVG. Но как сделать так, чтобы графика на сайте выглядела как единая аккуратная система, а не как случайный набор значков?

3 правила идеальных иконок в интерфейсе 🔗

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

Чтобы иконки выглядели профессионально и приятно, достаточно соблюдать три простых правила.

1. Единая толщина линий и одинаковые углы 🔗

Главный враг аккуратного сайта — разная масса графики.

Если в блоке преимуществ корзина нарисована тонкой изящной линией, а соседний значок доставки — толстым жирным штрихом с круглыми углами, макет распадается. Глаз мгновенно считывает неряшливость.

Держите простое правило: либо все значки контурные с одинаковой толщиной обводки, либо все сплошные и залитые, с одинаковым радиусом скруглений.

Подробный разбор оформления блока УТП с готовыми примерами смотрите в нашем руководстве: Иконки преимуществ для сайта: доставка, оплата и гарантия ↗.

2. Оптический баланс: почему круг кажется меньше квадрата 🔗

Наш мозг устроен любопытно: геометрически равные фигуры кажутся нам разного размера.

Круг размером 24 на 24 пикселя визуально выглядит заметно меньше, чем плотный квадрат того же размера, потому что квадрат занимает больше фактической площади.

Чтобы компенсировать этот оптический обман, дизайнеры всегда оставляют вокруг иконки невидимый воздух в 1–2 пикселя. Круглые элементы делают чуть шире, а массивные квадратные — чуть компактнее. Тогда в строке меню они стоят как влитые.

3. Удобный размер для пальца на смартфонах 🔗

Пользователи не любят целиться.

На компьютере с мышкой иконке достаточно размера 16 на 16 или 24 на 24 пикселя. Но на сенсорном экране смартфона зона нажатия обязана быть не меньше 44 на 44 пикселей. Сам значок внутри кнопки может быть компактным, но область вокруг него должна легко ловить даже неточный палец.

Визуальные правила понятны. Теперь давайте заглянем под капот файла и посмотрим, как сделать его код невесомым.

Как уменьшить вес SVG-иконок на 60% без потери качества 🔗

Когда вы экспортируете иконку из Figma или Illustrator, программа из вежливости записывает туда массу лишнего: название слоев, версию редактора, скрытые технические теги и координаты с дикой точностью до 12 знаков после запятой.

Взгляните, как выглядит код сразу после выгрузки из редактора:

📋 Скопировать<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
     x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#231F20;}
</style>
<g id="XMLID_1_">
    <path class="st0" d="M250.2341919,12.3948123 C118.8923481,12.3948123..."/>
</g>
</svg>

А вот тот же самый значок после минутной чистки:

📋 Скопировать<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 14h-2v-2h2zm0-4h-2V7h2z"/>
</svg>

Он весит на 75% меньше, а на экране выглядит ровно так же.

Как быстро навести порядок в файле: 🔗

• Округлите координаты: редактор часто сохраняет точки вроде 14.89428519px. Человеческий глаз никогда не отличит эту дробь от аккуратных 14.9px, но удаление хвостов сразу срезает треть веса.
• Объедините разрозненные линии в одну фигуру: если значок стрелки собран из трех палочек, редактор создаст три строки кода. Выделите их в Figma и нажмите Ctrl + E — редактор превратит их в единую линию, а код станет вдвое короче.
• Воспользуйтесь бесплатным чистильщиком: вручную код чистить не нужно. Есть замечательный бесплатный сервис SVGOMG. Просто перетаскиваете туда скачанный файл мышкой — и через секунду забираете чистый оптимизированный вектор.

Код чист и летает. Остается главный вопрос: а где вообще брать эти иконки, если не хочется часами рисовать каждую черточку с нуля?

Где брать вектор: стоки, Figma или генерация нейросетью? 🔗

Перед каждым создателем сайта встают три понятные дороги:

Путь 1. Бесплатные стоки (Flaticon, Freepik, Noun Project) 🔗

Стоки выручают, когда нужен один-два стандартных значка.

Но если требуется собрать пак из 15 предметов под нестандартную тему — начинается мучение. У одного автора линии толще, у другого скругления острее. Кроме того, бесплатные стоки требуют обязательно указывать авторов в подвале сайта, а оплатить зарубежные премиум-планы российскими картами сейчас непросто.

Путь 2. Отрисовать всё самому в Figma 🔗

Это путь максимального контроля: вы сами строите сетку и выверяете каждый пиксель под стиль бренда.

Минус ровно один — время. На отрисовку аккуратного набора из 20 нестандартных пиктограмм у опытного дизайнера уходит от 6 до 10 рабочих часов, которые часто хочется потратить на более важные задачи.

Путь 3. Сгенерировать вектор нейросетью 🔗

Современные нейросети научились создавать не просто картинки, а сразу чистый векторный SVG-код.

Вы просто описываете задачу словами: например, «контурная минималистичная иконка облачного хранилища, толщина линии 2 пикселя, скругленные углы». Алгоритм создает уникальный значок с нуля, выдерживая заданную стилистику.

Главное удобство генерации — масштабируемость. Если через полгода проекту понадобятся новые значки, вам не придется судорожно вспоминать настройки кисти в редакторе: нейросеть выдаст графику в той же геометрии.

Иконки у вас на руках. Давайте посмотрим, как вставить их на сайт так, чтобы они легко меняли цвет и никогда не ломались.

Как правильно вставить SVG на сайт без ошибок 🔗

Подключить вектор к сайту можно двумя основными способами.

1. Вставка кодом напрямую (Самый удобный метод) 🔗

Вместо того чтобы сохранять отдельный файл, вы просто копируете кусочек кода <svg>...</svg> и вставляете его прямо в разметку страницы:

📋 Скопировать<a href="/cart" class="cart-btn">
  <svg class="cart-icon" viewBox="0 0 24 24">
    <path d="M7 18c-1.1 0-1.99.9-1.99 2..."/>
  </svg>
  <span>Корзина</span>
</a>

Секрет с цветом: что делать, если SVG остается черным 🔗

Если значок упорно отображается черным цветом и не хочет меняться под цвет кнопки — найдите в коде строчку fill="#000000" и замените её на свойство fill="currentColor".

После этого иконка начнет автоматически перекрашиваться под цвет шрифта ссылки и красиво менять оттенок при наведении мыши.

2. Подключение как обычной картинки 🔗

📋 Скопировать<img src="/icons/star.svg" alt="Рейтинг товара" width="24" height="24">

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

3. Вставка в конструкторы (Tilda, WordPress) 🔗

В Тильде используйте блок T123 для вставки кода напрямую либо загружайте оптимизированный файл в Zero Block через меню фигур. Перед загрузкой удалите из шапки файла строчки с жесткими размерами width и height — тогда значок будет свободно растягиваться под любой контейнер.

Часто задаваемые вопросы (FAQ) 🔗