Связаться с нами
Техническая документация

Руководство
по SVG

Архитектура визуальных смыслов в коде. Гайд для разработчиков по внедрению масштабируемой иконографии.

// IconPak System

<svg viewBox="0 0 24 24"

xmlns="http://www.w3.org/2000/svg"

fill="none"

stroke="currentColor"

stroke-width="2"

stroke-linecap="round"

stroke-linejoin="round"

>

<path d="M12 2L2 7l10 5 10-5-10-5z"/>

</svg>

Почему вектор важнее растра

В эпоху ретины и 4K-мониторов растра (PNG/JPG) становятся главным узким местом производительности.

SVG — это не просто формат, это декларативное описание формы. Для иконографических систем это критически важно. В отличие от растровых изображений, которые требуют подготовки нескольких версий (@1x, @2x, @3x) для разных устройств, один SVG-файл масштабируется бесконечно без потери качества.

Ключевые преимущества:

  • Вес: Иконка "Search" в SVG весит 200 байт против 15Кб в PNG.
  • Стили: Цвет иконки управляется через CSS (currentColor), а не через ре-рендер ассетов.
  • Доступность: SVG поддерживает aria-labels и title нативно.
Raster (PNG) Vector (SVG)
Визуальное сравнение при 400% масштабировании

Оптимизация кода иконок

Код, экспортируемый из Illustrator или Figma, часто содержит избыточные данные.

BEFORE
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1" class="icon">
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Dribbble-Light-Preview" transform="translate(-120.000000, -3120.000000)" fill="#000000">
      <path d="M120,3120 L144,3120 L144,3144 L120,3144 L120,3120 Z" id="Rectangle"></path>
    </g>
  </g>
</svg>

Проблемы: Лишние группы <g>, мета-теги редактора, абсолютные координаты, отсутствие семантики. Вес: 340 байт.

AFTER (IconPak)
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="24" height="24"/>
</svg>

Результат: Удален мусор, нормализована сетка (0,0), добавлен fill-rule. Вес: 95 байт.

Используем SVGO для автоматизации

Использование в React и Vue

Как интегрировать иконографическую систему ИконПак в современные SPA-фреймворки.

⚛

React Component

Используем SVGR для трансформации иконок в компоненты. Это позволяет управлять цветом через props.

import

Icon from './IconPak';

const

Header = () => (
  <div>
    <Icon name="arrow-right" color="accent" />
  </div>
);
V

Vue SFC

Для Vue мы рекомендуем использование Vite plugin для SVG. Иконки остаются легковесными.

import

Icon from '~/assets/icon.svg?component';

<template>


  <Icon style="width: 24px" />

</template>

Нужна помощь с внедрением?

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

Связаться с тех. отделом