Для чего используешь SVG?

Использование SVG в веб-разработке

SVG (Scalable Vector Graphics) — это формат векторной графики на основе XML, который я активно использую в современной веб-разработке. Это один из ключевых инструментов для создания адаптивной и производительной графики.

Основные причины использования SVG

1. Масштабируемость без потери качества — в отличие от растровых изображений (PNG, JPG), SVG основан на математических формулах и масштабируется идеально на любом разрешении. Один файл работает на всех устройствах, от мобильного экрана до 4K монитора.

2. Малый размер файла — для простых иконок и логотипов SVG часто меньше PNG эквивалента, что улучшает производительность загрузки страницы.

3. Интерактивность и анимация — SVG полностью интегрируется с CSS и JavaScript. Я могу добавлять анимации, обработчики событий, динамически менять цвета и свойства элементов.

Практические применения

Иконки и логотипы:

// Простая SVG иконка как React компонент
export function CheckIcon({ size = 24, color = "currentColor" }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth="2"
    >
      <polyline points="20 6 9 17 4 12" />
    </svg>
  );
}

Анимированные графики:

// SVG анимация с CSS
const animatedSVG = `
<svg viewBox="0 0 100 100" className="animated-circle">
  <circle cx="50" cy="50" r="40" />
</svg>
`;

// CSS
const styles = `
  .animated-circle circle {
    animation: rotate 2s linear infinite;
    transform-origin: 50% 50%;
  }
  
  @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
`;

Интерактивные диаграммы:

// Динамическая диаграмма с D3.js или Visx
<svg width="500" height="300">
  <g>
    {data.map((item, index) => (
      <rect
        key={index}
        x={index * 50}
        y={300 - item.value * 2}
        width="40"
        height={item.value * 2}
        fill="#3b82f6"
        onMouseEnter={(e) => e.target.setAttribute("fill", "#1e40af")}
        onMouseLeave={(e) => e.target.setAttribute("fill", "#3b82f6")}
      />
    ))}
  </g>
</svg>

Преимущества для производительности

• Уменьшение HTTP запросов — могу встраивать SVG прямо в HTML или CSS (inline SVG), избегая дополнительных запросов.
• Кэширование — SVG файлы кэшируются браузером как обычные ресурсы.
• Responsive дизайн — с атрибутом viewBox SVG адаптируется к любому контейнеру без потери качества.

Интеграция с современными инструментами

В React/Next.js я использую:

// Импорт SVG как компонента
import { ReactComponent as Logo } from './logo.svg';

// Или через next-svg-components
import Logo from './logo.svg?react';

// Внутри компонента
export function Header() {
  return <Logo className="w-8 h-8" />;
}

Когда избегаю SVG

• Сложные фотографии — для фотореалистичных изображений PNG/WebP эффективнее.
• Очень большие наборы данных — при отрисовке тысяч элементов SVG может быть медленнее canvas.

В целом, SVG — идеальный выбор для иконок, логотипов, анимаций и диаграмм, обеспечивая качество, производительность и гибкость в современной веб-разработке.