В чем разница между графикой векторной и растовой?

Разница между векторной и растровой графикой

Это фундаментальное различие в том, как хранится и отображается изображение на экране. Оба подхода используются в web разработке, но для разных целей. Разберемся подробно.

1. Основная концепция

Растровая графика (Raster Graphics): Изображение состоит из пикселей (точек цвета) в сетке. Каждый пиксель имеет цвет.

Растровое изображение (100x100 пиксель):

┌─┬─┬─┬─┬─┐
│█│█│░│░│█│
├─┼─┼─┼─┼─┤
│█│░│░│░│█│
├─┼─┼─┼─┼─┤
│░│░│░│░│░│
├─┼─┼─┼─┼─┤
│░│░│░│░│░│
├─┼─┼─┼─┼─┤
│█│░│░│░│█│
└─┴─┴─┴─┴─┘

Пиксели хранят RGB(A) значения

Векторная графика (Vector Graphics): Изображение состоит из математических объектов: линий, кривых, фигур, которые описываются координатами и параметрами.

Векторное изображение (формулы):

Круг: circle(cx=50, cy=50, r=40, fill="red")
Линия: line(x1=10, y1=10, x2=90, y2=90, stroke="blue")
Прямоугольник: rect(x=20, y=20, width=60, height=60)

2. Форматы файлов

Растровые форматы:

.jpg (JPEG)  — сжатие с потерями, фото
.png         — без потерь, прозрачность, скриншоты
.gif         — анимация, прозрачность
.webp        — современное сжатие, лучше чем JPG/PNG
.bmp         — без сжатия, большие файлы
.tiff        — профессиональная печать

Векторные форматы:

.svg         — Scalable Vector Graphics (главный для web)
.ai          — Adobe Illustrator
.eps         — Encapsulated PostScript
.pdf         — может содержать векторные элементы

3. Масштабируемость

ЭтО ГЛАВНОЕ различие для web разработки!

Растровая: теряет качество при увеличении

Оригинал (100x100):      Увеличено 2x (200x200):    Увеличено 3x (300x300):
█ █ █                    █░█░█░                     █░░█░░█░░
█ ░ █         -->        █░░░█░         -->         █░░░░░█░░
█ █ █                    █░█░█░                     █░░█░░█░░

Пиксели становятся видны (пиксельное размытие)

Векторная: сохраняет качество при любом размере

<!-- SVG скалируется математически -->
<svg viewBox="0 0 100 100" width="100" height="100">
  <circle cx="50" cy="50" r="40" />
</svg>

<!-- При увеличении до 1000x1000 формула остается той же -->
<!-- Круг остается идеально гладким (anti-aliasing на уровне браузера) -->

4. Размер файла

Растровая: зависит от разрешения

Приблизительные размеры PNG изображения:

100x100 пиксель:   ~ 5 KB
1000x1000 пиксель: ~ 500 KB
10000x10000 пиксель: ~ 50 MB

Размер растет как O(width * height)

Векторная: зависит от сложности

Приблизительные размеры SVG файла:

Простой логотип:      ~ 2 KB (несколько фигур)
Сложный логотип:      ~ 50 KB (множество деталей)
Иконка:               ~ 0.5 KB (одна-две фигуры)

Размер растет как O(количество объектов)

5. Редактирование

Растровая: нужно менять пиксели

// Canvas API (растровая графика)
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Рисуем
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

// Редактируем: нужно перерисовать
ctx.clearRect(10, 10, 100, 100);  // Стираем
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);   // Перерисовываем

Векторная: нужно менять параметры объекта

<!-- SVG (векторная графика) -->
<svg viewBox="0 0 200 200" width="200" height="200">
  <rect id="myRect" x="10" y="10" width="100" height="100" fill="red" />
</svg>

<script>
// Редактируем: меняем атрибуты
const rect = document.getElementById('myRect');
rect.setAttribute('fill', 'blue');  // Меняем цвет
rect.setAttribute('x', '50');        // Двигаем
rect.setAttribute('width', '150');   // Масштабируем
</script>

6. Производительность рендеринга

Растровая (Canvas): быстрая для динамики

// Canvas: пиксели рисуются напрямую
// Очень быстро даже для 1000x1000
function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < 10000; i++) {
    ctx.fillRect(Math.random() * 500, Math.random() * 500, 10, 10);
  }
}

requestAnimationFrame(render);  // 60 FPS

Векторная (SVG): медленнее при большом количестве элементов

<!-- SVG: каждый элемент отдельный -->
<svg id="mySvg" width="500" height="500">
  <!-- 10000 элементов = медленно -->
  <rect x="10" y="10" width="10" height="10" />
  <rect x="25" y="15" width="10" height="10" />
  <!-- ... 9998 больше ... -->
</svg>

<script>
// Меняя 10000 элементов в SVG медленно
for (let i = 0; i < 10000; i++) {
  const rect = document.querySelectorAll('rect')[i];
  rect.setAttribute('x', Math.random() * 500);
}
</script>

7. Практические примеры в web

Используй РАСТРОВУЮ для:

<!-- Фотографии -->
<img src="photo.jpg" alt="Photo" />

<!-- Скриншоты -->
<img src="screenshot.png" alt="Screenshot" />

<!-- Сложные текстуры -->
<div style="background-image: url('texture.png');"></div>

<!-- Canvas анимация (игры, графики) -->
<canvas id="gameCanvas"></canvas>
<script>
  const ctx = gameCanvas.getContext('2d');
  // Рисуем игровую графику
</script>

Используй ВЕКТОРНУЮ для:

<!-- Логотипы и иконки -->
<svg viewBox="0 0 100 100" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

<!-- Или как файл -->
<img src="logo.svg" alt="Logo" />

<!-- Интерактивная графика -->
<svg id="interactive" width="300" height="300">
  <circle cx="150" cy="150" r="50" fill="red" />
</svg>
<script>
  const circle = document.querySelector('circle');
  circle.addEventListener('click', () => {
    circle.setAttribute('fill', 'blue');
  });
</script>

<!-- Диаграммы и графики -->
<svg viewBox="0 0 400 300" width="400" height="300">
  <polyline points="0,250 50,200 100,180 150,200 200,100" />
</svg>

<!-- Анимированная SVG -->
<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="blue">
    <animate attributeName="r" from="50" to="100" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

8. Интерактивность

Растровая (Canvas): нужно вычислять клики вручную

canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  // Проверяем, попал ли клик в нарисованный прямоугольник
  if (x > 10 && x < 110 && y > 10 && y < 110) {
    console.log('Нажал на прямоугольник');
  }
});

Векторная (SVG): встроенная поддержка событий

<svg width="200" height="200">
  <rect id="myRect" x="10" y="10" width="100" height="100" fill="red" />
</svg>

<script>
// Просто добавляем обработчик
document.getElementById('myRect').addEventListener('click', () => {
  console.log('Нажал на прямоугольник');
});
</script>

9. Сравнительная таблица

┌──────────────────────┬──────────────────┬──────────────────────┐
│ Характеристика       │ Растровая (JPG)  │ Векторная (SVG)      │
├──────────────────────┼──────────────────┼──────────────────────┤
│ Масштабируемость     │ Плохо (теряет)   │ Отлично (любой размер)│
│ Размер файла         │ Большой          │ Маленький             │
│ Разрешение           │ Привязано к px   │ Независимо от экрана  │
│ Редактирование       │ Сложно           │ Легко                 │
│ Производительность   │ Быстрая          │ Медленнее при много   │
│ Интерактивность      │ Сложная          │ Встроенная            │
│ Печать               │ Хорошо           │ Отлично               │
│ Фото/Фотореализм     │ Да               │ Нет                   │
│ Логотипы/Иконки      │ Нет              │ Да                    │
│ Браузерная поддержка  │ 100%             │ 99%                   │
└──────────────────────┴──────────────────┴──────────────────────┘

10. Оптимизация для web

Оптимизация растровых изображений:

<!-- Используй правильный формат -->
<img src="photo.webp" alt="Photo" />
<!-- Fallback для старых браузеров -->
<img src="photo.jpg" alt="Photo" />

<!-- Responsive изображения -->
<picture>
  <source srcset="image-mobile.jpg" media="(max-width: 640px)">
  <source srcset="image-desktop.jpg" media="(min-width: 640px)">
  <img src="image.jpg" alt="Image" />
</picture>

<!-- Lazy loading -->
<img src="image.jpg" loading="lazy" alt="Image" />

Оптимизация векторных изображений:

<!-- Inline SVG (нет дополнительного запроса) -->
<svg viewBox="0 0 100 100" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

<!-- SVG как файл с оптимизацией -->
<img src="optimized-logo.svg" alt="Logo" />

<!-- Font icons (очень эффективно) -->
<i class="icon-heart"></i>  <!-- Один символ из шрифта -->

Итог

Растровая графика (JPG, PNG) — пиксельная сетка, хороша для фотографий и сложных текстур, но теряет качество при масштабировании. Векторная графика (SVG) — математические объекты, идеальна для логотипов, иконок, диаграмм, масштабируется без потерь и имеет меньший размер файла. Для web фронтенда: используй JPG/PNG для фото, SVG для иконок и логотипов, Canvas для динамической графики и игр.