Опишіть способи оптимізації SVG-файлів.

Повне пояснення

Що це і навіщо SVG‑оптимізація зменшує розмір файлів, що підвищує швидкість завантаження сторінок і знижує використання пропускної здатності. Це критично для мобільних пристроїв і SEO.

Ключові принципи, терміни, інваріанти

• Minification – видалення пробілів, коментарів і непотрібних атрибутів.
• Path simplification – зменшення кількості команд у d атрибуті шляхів.
• Color reduction – заміна довгих HEX‑кодів на короткі або використання currentColor.
• ViewBox normalization – встановлення однорідного viewBox, що дозволяє масштабувати SVG без втрати якості.
• Inlining – вставка SVG у HTML/JSX замість окремих файлів.

Як це працює (життєвий цикл, алгоритм)

1. Підготовка – збір усіх SVG‑ресурсів.
2. Автоматичний процес – запуск SVGO або подібного плагіна, що застосовує правила minification і path simplification.
3. Ручна перевірка – видалення метаданих (<metadata>, <!-- comments -->), зайвих стилів і атрибутів (id, class).
4. Вбудовування – вставка очищеного SVG у JSX: <svg {...props}>...</svg>.

Практика і реалізація (React/Next.js)

import { ReactComponent as Logo } from './logo.svg';
const Header = () => <header><Logo width={48} height={48} /></header>;

У Next.js можна використовувати next/image для статичних SVG, а також налаштувати svgr плагін у Vite/Webpack.

Тестування (Jest, Testing Library)

• Перевірка, що SVG рендериться без помилок: expect(screen.getByTestId('logo')).toBeInTheDocument();.
• Порівняння розміру файлу до/після оптимізації за допомогою file-size.

Оптимізація продуктивності

• Inlining зменшує кількість HTTP‑запитів.
• Symbol sprite (<symbol>/<use>) дозволяє повторно використовувати один SVG‑файл.
• Lazy loading через loading='lazy' для великих інлайн‑SVG.

Accessibility (ARIA)

• Додаємо role="img" і aria-label або title для опису.
• Уникаємо зайвих атрибутів, що збільшують DOM‑розмір.

Безпека та валідація

• Перевірка SVG на XSS‑загрози: видалення <script>, on* атрибутів.
• Використання CSP‑правил: img-src 'self' і script-src 'none'.

Типові помилки й edge cases

• Залишені id/class атрибути, що створюють колізії.
• Неоптимізовані path з великою кількістю точок.
• Відсутність viewBox, що призводить до некоректного масштабування.

Cheatsheet + можливі follow‑up питання

• SVGO plugins: removeViewBox, cleanupIDs, convertColors.
• React‑SVG: @svgr/webpack або vite-plugin-svgr.
• Follow‑up: «Як обрати між інлайн‑SVG і sprite?» – обговорити trade‑offs щодо кешування, розміру DOM та SEO.