Модуль 29

Ікони, SVG та web-графіка

Ось готовий урок, створений спеціально за твоїм запитом у стилі CS50.

🎓 Тема уроку: Ікони, SVG та web-графіка

(або: Чому ваші логотипи мають виглядати ідеально навіть на Місяці)

1. 🔥 Вступ: Проблема та мотивація

Привіт усім! Радий вас бачити.

Давайте почнемо з простої ситуації. Уявіть, що ви розробляєте сайт для крутого стартапу. Дизайнер надсилає вам логотип компанії — це файл logo.jpg. Ви вставляєте його на сайт. На вашому ноутбуці все виглядає чудово.

Але тут заходить ваш бос, відкриває сайт на новенькому iPhone з екраном Retina, наближає логотип і... О жах! Замість чітких ліній він бачить "квадратики", розмиті краї та бруд. Логотип виглядає дешево.

Питання до вас: Чому так сталося? І що робити, якщо цей логотип завтра треба буде роздрукувати на банері розміром з дев'ятиповерхівку?

Якщо ми використовуємо звичайні картинки (JPEG, PNG), ми обмежені пікселями. Це як мозаїка: якщо підійти надто близько, магія зникає, і ви бачите лише окремі камінці.

Але у веб-розробці нам потрібна графіка, яка виглядає гострою як лезо, незалежно від того, чи дивитесь ви на неї з годинника, чи з величезного телевізора. Нам потрібен формат, який не залежить від пікселів.

Нам потрібен SVG. Сьогодні ми розберемося, як малювати кодом. Поїхали!

2. 🧠 Теоретична база (без нудних лекцій)

Давайте зазирнемо "під капот". У світі комп'ютерної графіки є два табори:

1. Растрова графіка (JPEG, PNG, GIF)

Це мапа пікселів. Уявіть аркуш у клітинку, де для кожної клітинки записано: "тут червоний", "тут білий". * Плюс: Ідеально для фотографій (багато деталей, відтінків). * Мінус: Не можна збільшувати без втрати якості.

2. Векторна графіка (SVG)

Це інструкція. Замість того, щоб запам'ятовувати кожну крапку, комп'ютер запам'ятовує математичну формулу. SVG (Scalable Vector Graphics) буквально каже браузеру: "Намалюй коло в центрі радіусом 50 пікселів і залий його синім".

Аналогія з життя: * Растр — це роздрукована фотографія будинку. Якщо ви подивитесь на неї через лупу, побачите зерно. * Вектор (SVG) — це креслення архітектора. Маючи креслення, ви можете побудувати і іграшковий будиночок, і справжній хмарочос — пропорції будуть ідеальними.

Що таке SVG технічно?

Це просто текст! Це XML-код (дуже схожий на HTML). Це означає, що ви можете відкрити картинку в текстовому редакторі, змінити цифру, і картинка зміниться.

Що треба запам’ятати залізно: * SVG — це код. * SVG можна стилізувати через CSS (міняти колір при наведенні!). * SVG важить дуже мало (бо це просто текст інструкції, а не масив пікселів).

3. 🧪 Приклади (від простого до реального)

Приклад 1: "Hello World" у світі графіки

Чого ви очікуєте, якщо ми напишемо тег <circle>? Правильно, коло. Давайте напишемо найпростіший SVG прямо в HTML:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Що тут відбувається: * <svg> — контейнер (наше полотно). * cx, cy — координати центру (50 пікселів зліва, 50 зверху). * r — радіус. * fill — заливка кольором.

Результат: Ідеально кругле червоне коло. Збільшуйте сторінку хоч до 500% — краї залишаться гладкими.

Приклад 2: Реальна іконка "Меню" (Гамбургер)

На сайтах ви постійно бачите іконку з трьох смужок. Як це зроблено? Зазвичай це не картинка, це вектор.

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M4 6H20M4 12H20M4 18H20" stroke="black" stroke-width="2" stroke-linecap="round"/>
</svg>

Стоп, що це за d="M4 6H20..."? Це координати "пера". * M (Move) — перемістити руку в точку. * L (Line) або H (Horizontal) — провести лінію.

Вам не треба писати ці координати вручну! Дизайнери малюють це у Figma, а ви просто копіюєте код. Головне — розуміти, що stroke="black" можна замінити на stroke="currentColor", і іконка буде приймати колір тексту!

Приклад 3: Магія CSS (Інтерактивність)

Оскільки SVG — це частина DOM-дерева (як <div> чи <span>), ми можемо керувати нею через CSS.

HTML:

<svg class="heart-icon" width="50" height="50" 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" />
</svg>

CSS:

.heart-icon {
  fill: grey;
  transition: fill 0.3s;
  cursor: pointer;
}

.heart-icon:hover {
  fill: red;
  transform: scale(1.1);
}

Результат: Сіре серце, яке при наведенні стає червоним і трохи збільшується. Спробуйте зробити це з JPG — у вас нічого не вийде без заміни файлу картинки!

4. 🛠 Практична частина

Час забруднити руки кодом! Виконайте ці завдання:

  1. 🔹 Копіпаст-майстер: Скопіюйте приклад з червоним колом (Приклад 1) у свій редактор. Змініть його колір на blue і радіус на 20.
  2. 🔹 Квадрат Малевича: Замініть тег <circle> на <rect>. Вам знадобляться атрибути width та height замість r. Зробіть чорний квадрат.
  3. 🔹 Лагодження: Ось код зламаної іконки. Вона не відображається або обрізана. Виправте її (підказка: подивіться на viewBox або розміри): html <svg width="24" height="24"> <circle cx="50" cy="50" r="40" fill="green" /> </svg> (Питання: чи поміститься коло з центром 50 у коробку розміром 24?)
  4. 🔹 Реальний світ: Зайдіть на сайт Heroicons або Phosphor Icons. Знайдіть іконку "User" (користувач). Скопіюйте її SVG-код (Copy SVG) і вставте на свою сторінку.
  5. 🔹 Міні-кейс: Створіть кнопку "Купити". Всередині має бути текст "Купити" і іконка кошика (з попереднього завдання). При наведенні на кнопку колір іконки має змінюватися на білий.

5. 💡 Мислення як у розробника

Як відрізнити новачка від профі в роботі з графікою?

❌ Новачок: * Експортує іконки як PNG. (Це гріх у сучасному вебі). * Вставляє SVG картинкою <img src="icon.svg">, коли треба міняти колір при ховері (через img CSS не має доступу до "нутрощів" SVG). * Копіює з Figma купу сміття в коді (зайві атрибути, коментарі, дивні ID).

✅ Досвідчений розробник: * Оптимізує SVG. Використовує інструменти типу OMGIMG або SVGOMG, щоб зменшити розмір файлу, викинувши все зайве. * Думає про доступність. Додає aria-label="Налаштування", щоб незрячі користувачі розуміли, що це за іконка, а не чули "зображення, група, шлях". * Використовує класи. Замість того, щоб хардкодити fill="red" всередині SVG, він пише class="icon" і керує кольором через CSS. Це робить код гнучким.

Золоте правило: Якщо це фото — JPG/WebP. Якщо це логотип, іконка чи проста схема — тільки SVG.

6. 🧩 Підсумок

Отже, що ми маємо?

  1. Ви зрозуміли, що SVG — це не картинка, а код.
  2. Ви знаєте, що векторна графіка масштабується нескінченно без втрати якості.
  3. Ви вмієте вставляти іконки прямо в HTML і фарбувати їх через CSS.

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

🤔 Що далі? Ви помітили, що в SVG є координати? А що, якщо ми почнемо змінювати їх за часом? На наступному уроці ми поговоримо про Анімації. Ми змусимо це серце битися, а кнопку — "стрибати".

А поки що — це був CS50... тобто, наш урок з SVG. До зустрічі! 🖥️

← До списку уроків Наступний урок →