Как вставить SVG картинку?

Способы вставки SVG картинок в веб-приложение

SVG (Scalable Vector Graphics) можно вставить несколькими способами, каждый имеет свои плюсы и минусы. Выбор зависит от требований к функциональности и производительности.

Способ 1: img элемент (самый простой)

<img src="icon.svg" alt="Иконка" width="24" height="24">

Плюсы:

• Простая синтаксис
• Работает везде
• SVG кэшируется браузером

Минусы:

• Нельзя изменять стили SVG (цвет, обводку)
• Нельзя использовать CSS или JavaScript для манипуляций

<!-- С классом для адаптивности -->
<img src="logo.svg" alt="Logo" className="logo">

<style>
  .logo {
    width: 100%;
    max-width: 200px;
    height: auto;
  }
</style>

Способ 2: CSS background-image

div {
  background-image: url('icon.svg');
  background-size: 24px 24px;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}

Плюсы:

• Можно использовать спрайты
• Гибкий контроль размера и позиции

Минусы:

• Нельзя изменять содержимое SVG
• Требует отдельного запроса

Способ 3: inline SVG (прямо в HTML)

<svg width="24" height="24" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="blue" />
  <rect x="5" y="5" width="14" height="14" stroke="red" stroke-width="2" />
</svg>

Плюсы:

• Полный контроль над элементами
• Можно менять стили CSS и JavaScript
• Нет отдельных запросов

Минусы:

• Увеличивает HTML
• Дублирование кода если используется много раз

<!-- С классом для стилизации -->
<svg className="icon icon-large" viewBox="0 0 24 24">
  <path d="M12 2L15 10H23L17 15L19 23L12 18L5 23L7 15L1 10H9Z" fill="currentColor"/>
</svg>

<style>
  .icon {
    width: 24px;
    height: 24px;
    fill: #333;
  }
  
  .icon-large {
    width: 48px;
    height: 48px;
  }
  
  .icon:hover {
    fill: #007bff;
  }
</style>

Способ 4: SVG как компонент в React (рекомендуется)

// Icon.tsx
import React from 'react';

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

export function StarIcon({ size = 24, color = 'currentColor', className }: IconProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth="2"
      className={className}
    >
      <polygon points="12 2 15 10 23 10 17 15 19 23 12 18 5 23 7 15 1 10 9 10" />
    </svg>
  );
}

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

import { StarIcon } from './Icon';

export function Rating() {
  return (
    <div>
      <StarIcon size={32} color="#ffd700" />
      <StarIcon size={32} color="gray" />
    </div>
  );
}

Способ 5: SVG через object или embed

<!-- object -->
<object data="image.svg" type="image/svg+xml" width="100" height="100"></object>

<!-- embed -->
<embed src="image.svg" type="image/svg+xml" width="100" height="100">

Плюсы:

• Работает на старых браузерах
• Можно использовать JavaScript

Минусы:

• Устарело
• Медленнее чем img

Способ 6: SVG как data URL

// Компонент с встроенным SVG
export function CheckmarkIcon() {
  return (
    <img 
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='%23000'/%3E%3C/svg%3E"
      alt="Checkmark"
    />
  );
}

Плюсы:

• Нет отдельного файла
• Инлайнирование в HTML

Минусы:

• Сложно читается
• Нельзя переиспользовать

Способ 7: SVG символы (sprite)

<!-- definitions.svg или прямо в HTML -->
<svg style="display: none;">
  <defs>
    <symbol id="icon-star" viewBox="0 0 24 24">
      <path d="M12 2L15 10H23L17 15L19 23L12 18L5 23L7 15L1 10H9Z"/>
    </symbol>
    <symbol id="icon-heart" viewBox="0 0 24 24">
      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
    </symbol>
  </defs>
</svg>

<!-- Использование -->
<svg width="24" height="24" className="icon">
  <use href="#icon-star"/>
</svg>

<svg width="24" height="24" className="icon">
  <use href="#icon-heart"/>
</svg>

<style>
  .icon {
    fill: currentColor;
  }
</style>

Плюсы:

• Переиспользуемые иконки
• Один запрос для всех иконок

Практические примеры в React

1. Компонент Button с иконкой

interface ButtonProps {
  icon?: React.ReactNode;
  children: React.ReactNode;
  onClick?: () => void;
}

export function Button({ icon, children, onClick }: ButtonProps) {
  return (
    <button onClick={onClick} className="button">
      {icon && <span className="button-icon">{icon}</span>}
      {children}
    </button>
  );
}

// Использование
<Button icon={<StarIcon size={20} />}>Rate</Button>

2. Динамическая смена цвета иконки

export function ColoredIcon({ color }: { color: string }) {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill={color}>
      <circle cx="12" cy="12" r="10"/>
    </svg>
  );
}

3. Анимированный SVG

export function LoadingIcon() {
  return (
    <svg className="spinner" viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeWidth="2"/>
    </svg>
  );
}

// CSS с анимацией
<style>
  .spinner {
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
</style>

Сравнение способов

Best Practices

1. Используй viewBox для масштабирования

<svg viewBox="0 0 24 24" width="100" height="100">...</svg>

1. Оптимизируй SVG (убирай метаданные, упрощай пути)

svgo icon.svg --output icon.min.svg

1. Кэшируй файлы с правильными заголовками
2. Используй currentColor для наследования цвета

<svg fill="currentColor">...</svg>

1. Доступность — добавляй aria-label

<svg aria-label="Star icon">...</svg>

Итог

Для современных проектов на React:

• Используй React компоненты для иконок (способ 4)
• Для статичных изображений — img элемент (способ 1)
• Для больших систем иконок — SVG sprite (способ 7)

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