Гайди SVG Force

Останнє оновлення: Березень 2026

Корисні посібники та покрокові інструкції для ефективної роботи з SVG Force.

Нові записи (Березень 2026)

Новий гайд: керування прозорістю іконок через opacity
Новий гайд: робота з CLI для Team підписки

1. Швидкий старт: Перша конвертація

Цей гайд допоможе вам виконати вашу першу конвертацію SVG у компонент всього за 5 хвилин.

Крок 1: Підготовка SVG файлу

Переконайтеся, що ваш SVG файл:

Має валідну структуру XML
Містить атрибут viewBox для коректного масштабування
Не містить зайвих метаданих або коментарів (опціонально)

Крок 2: Завантаження файлу

Відкрийте генератор
Перетягніть SVG файл у робочу область або натисніть "Завантажити"
Почекайте, поки файл завантажиться

Крок 3: Вибір налаштувань

Оберіть фреймворк (React, Vue, Angular тощо)
Задайте назву компонента
Задайте назву іконки

Крок 4: Генерація та експорт

Натисніть кнопку "Генерувати"
Перегляньте згенерований код
Скопіюйте код або використайте скачаний файл як компонент

2. Робота SVG Force з градієнтами

SVG Force коректно обробляє SVG з лінійними та радіальними градієнтами і переносить їх у згенерований компонент без втрати структури.

2.1 Що SVG Force робить автоматично

Зберігає блок <defs> та всі gradient-елементи
Підтримує linearGradient і radialGradient під час конвертації
Переносить stop, offset і opacity у JSX/TSX-формат
Залишає градієнтні заливки через fill="url(#id)"
Після генерації ви можете керувати кольорами градієнта через props

2.2 Приклад налаштування градієнта в згенерованому компоненті

Нижче приклад використання згенерованого компонента з налаштуванням градієнта через props:

React TSX

<Icon
  name="heart"
  size={48}
  variant="gradient"
  gradientDirection="horizontal"
  colorFirst="#3B82F6"
  colorSecond="#9911ac"
/>

3. Автоматична оптимізація SVG у SVG Force

SVG Force автоматично оптимізує SVG під час обробки, тому ручна підготовка файлів перед завантаженням більше не потрібна.

3.1 Що SVG Force оптимізує автоматично

Видаляє метадані редакторів (Adobe Illustrator, Sketch тощо)
Очищає XML-коментарі та інший службовий шум
Прибирає невикористані definіції та зайві обгортки
Скорочує непотрібні групи, атрибути та трансформації
Готує код SVG до стабільної конвертації у компоненти

3.2 Чи потрібна ручна оптимізація

У більшості сценаріїв — ні. Достатньо завантажити SVG у SVG Force, і сервіс сам виконає необхідну оптимізацію без додаткових інструментів.

3.3 Приклад оптимізації

До оптимізації:

SVG

<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <g id="Layer_1">
    <path d="M10,10 L20,20" fill="none" stroke="black"/>
  </g>
</svg>

Після оптимізації:

SVG

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M10,10 L20,20" fill="none" stroke="#000"/>
</svg>

4. Робота з анімаціями

SVG Force дозволяє додавати анімації кольорів для SVG-картинок у згенерованих компонентах.

4.1 Анімація кольорів у SVG Force

Для іконок з градієнтами можна вмикати анімацію кольорів та задавати тривалість циклу, напрямок градієнта і набір кольорів для анімації.

4.2 Приклад налаштування анімації

Приклад використання компонента з параметрами анімації кольорів:

React TSX

<Icon
  name="logo"
  size={24}
  variant="gradient"
  gradientDirection="vertical"
  colorFirst="#3B82F6"
  colorSecond="#9911ac"
  animate={true}
  animationDuration={15}
  animationColors={['#3B82F6', '#9911ac', '#3B82F6', '#9911ac']}
/>

4.3 Що налаштовується

animate — вмикає/вимикає анімацію кольору
animationDuration — задає тривалість циклу в секундах
animationColors — визначає послідовність кольорів у переході

4.4 Порада

Щоб анімація виглядала плавно, використовуйте 3-5 кольорів уanimationColors та повторюйте перший колір наприкінці масиву.

5. Налаштування кольорів через props

Один з найбільш корисних патернів — можливість змінювати кольори іконки через props компонента.

5.1 React приклад

React TSX

interface IconProps {
  color?: string;
  size?: number;
}

export const Icon: React.FC<IconProps> = ({
  color = "currentColor",
  size = 24
}) => {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24">
      <path fill={color} d="M12,2 L22,12 L12,22 L2,12 Z" />
    </svg>
  );
};

5.2 Використання

React TSX

<Icon color="#f63bf2" size={32} />
<Icon color="blue" size={16} />
<Icon /> {/* використовує значення за замовчуванням */}

5.3 Прозорість через opacity prop

Кожен згенерований компонент автоматично містить prop opacity. За замовчуванням іконка повністю непрозора (значення 1). Прозорість активується тільки тоді, коли при використанні компонента явно передається потрібне значення.

React TSX

{/* Повністю видиме */}
<Icon name="my-icon" size={32} />

{/* Напівпрозоре */}
<Icon name="my-icon" size={32} opacity={0.5} />

{/* Практично невидиме */}
<Icon name="my-icon" size={32} opacity={0.1} />

5.4 Практичний гайд: opacity у UI-станах

Рекомендований діапазон значень opacity для типових сценаріїв:

1 — основна іконка у стандартному стані
0.7-0.85 — другорядні іконки та підказки
0.45-0.6 — disabled елементи
0.2-0.35 — декоративні або фонові SVG

React TSX

<Icon name="search" opacity={1} />
<Icon name="info" opacity={0.8} />
<Icon name="lock" opacity={0.5} />
<Icon name="pattern" opacity={0.25} />

5.5 Практичний гайд: CLI для Team підписки

CLI дозволяє ініціалізувати проєкт і запускати конвертацію SVG через термінал. Рекомендоване середовище: Node.js v20.19.4 і npm v10.8.2.

Встановіть CLI глобально
Увійдіть до свого Team-акаунту командою svgforce login
Запустіть svgforce init у корені проєкту і дотримуйтесь підказок майстра налаштування
Якщо під час init обрано опцію «Створити npm скрипти», надалі запускайте конвертацію через npm run icons

Bash

npm i -g @svgforce/cli
svgforce login
svgforce init
# якщо під час init обрано «Створити npm скрипти»:
npm run icons

6. Пакетна обробка файлів

6.1 Підготовка файлів

Організуйте SVG файли в одній папці
Дайте файлам змістовні імена (вони будуть потрібні для доступу до кожної картинки через props)
Переконайтеся, що всі файли мають однаковий формат

6.2 Процес пакетної обробки

Виберіть декілька файлів або папку
Налаштуйте спільні параметри для всіх файлів
Запустіть пакетну конвертацію
Завантажте результати як ZIP архів

6.3 Поради

Використовуйте однакові налаштування viewBox для всіх іконок
Дотримуйтесь єдиного стилю іменування
Групуйте схожі іконки разом

7. Інтеграція з дизайн системами

SVG Force повертає один універсальний файл index.tsx з усіма SVG-компонентами, тому не потрібно підключати кожну картинку окремо.

7.1 Як це працює

Усі згенеровані іконки об'єднані в одному файлі
Доступ до конкретної картинки відбувається через props
Для інтеграції достатньо імпортувати лише index.tsx

7.2 Приклад універсального файла index.tsx

React TSX

type IconName = 'arrow-left' | 'arrow-right' | 'check' | 'close';

const ICONS = {
  'arrow-left': ArrowLeftSvg,
  'arrow-right': ArrowRightSvg,
  check: CheckSvg,
  close: CloseSvg,
};

export const Icon = ({ name, ...props }) => {
  const SvgComponent = ICONS[name as IconName];
  return <SvgComponent {...props} />;
};

7.3 Використання

React TSX

import { Icon } from './index';

<Icon name="arrow-left" size={24} />
<Icon name="check" size={20} color="#22c55e" />

8. Робота з React Native

React Native вимагає спеціальної обробки SVG файлів через бібліотеку react-native-svg.

8.1 Встановлення залежностей

Bash

npm install react-native-svg

8.2 Особливості конвертації

SVG Force автоматично імпортує компоненти з react-native-svg
Всі SVG елементи конвертуються у відповідні RN компоненти
Підтримка градієнтів через LinearGradient та RadialGradient
Трансформації конвертуються у RN формат

8.3 Приклад згенерованого компонента

React Native TSX

import React from 'react';
import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg';

export const Icon = ({ size = 24, color = '#000' }) => {
  return (
    <Svg width={size} height={size} viewBox="0 0 24 24">
      <Defs>
        <LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
          <Stop offset="0" stopColor="#f63bf2" />
          <Stop offset="1" stopColor="#bacf6e" />
        </LinearGradient>
      </Defs>
      <Path fill="url(#grad)" d="M12,2 L22,12 L12,22 L2,12 Z" />
    </Svg>
  );
};

9. Усунення поширених проблем

9.1 Іконка не відображається

Можливі причини:

Відсутній viewBox атрибут
Неправильні розміри (width/height = 0)
Колір іконки збігається з фоном

Рішення:

Додайте viewBox до SVG
Встановіть явні розміри
Змініть fill або stroke колір

9.2 Градієнт не працює

Можливі причини:

ID градієнта не унікальний
Градієнт визначений поза <defs>
Неправильне посилання на градієнт

Рішення:

Використовуйте унікальні ID
Помістіть градієнт в <defs>
Перевірте синтаксис url(#gradientId)

9.3 Анімація не відтворюється

Можливі причини:

SMIL анімації не підтримуються браузером
Конфлікт з CSS стилями
Неправильна трансформація

Рішення:

Використовуйте CSS або JS анімації
Перевірте специфічність CSS
Використовуйте SVG Force для автоматичної конвертації

10. Продуктивність та оптимізація

10.1 Зменшення розміру компонентів

SVG Force автоматично зменшує розмір згенерованих компонентів: видаляє зайві атрибути, оптимізує SVG-структуру та підготовлює код до продуктивного використання.

10.2 Lazy loading іконок

SVG Force повертає універсальний index.tsx з усіма іконками, оптимізований для швидкої інтеграції. У більшості випадків додатково налаштовувати lazy loading вручну не потрібно.

10.3 Кешування компонентів

SVG Force генерує стабільний і чистий код компонентів, що добре працює з кешуванням на рівні застосунку. Ручне обгортання кожної іконки в мемоізацію зазвичай не є необхідним.

11. Додаткові ресурси

Маєте питання або пропозиції щодо гайдів? Зв'яжіться з нами через [email protected]