HTML + CSS
  • 🧑‍💻Full-Stack Web Developer
  • ‼️Список корисних ресурсів
  • 📚Теорія
    • 1️⃣HTML
      • Введення в веб-розробку
      • Теги та атрибути
      • Скелет документа HTML
      • Семантика
      • Розмітка тексту
      • Розмітка тексту (2 частина)
      • Зображення
      • Структура HTML-документа
      • Таблиці
      • Символьні підстановки
      • Таблиця кодів символів
      • Відео та аудіо
      • Інструменти розробника
      • Валідація
    • 2️⃣CSS та селектори
      • CSS
      • Селектори
      • Псевдокласи стану
      • Колір
      • Каскад стилів
      • CSS-змінні
      • Одиниці вимірювання
      • Стилізація тексту
      • Властивості шрифту
      • Псевдоелементи тексту
      • Підключення сторонніх шрифтів
    • 3️⃣Блокова модель
      • Основи блокової моделі
      • Геометрія елемента
      • Типи елементів
      • Структурні псевдокласи
    • 4️⃣Flexbox
      • Концепції
      • Властивості контейнера
      • Властивості елемента
    • 5️⃣Grid
    • 6️⃣Зображення і декор
      • Типи зображень
      • Фон елемента
      • Властивості object-fit і object-position
      • Псевдоелементи
      • Градієнт
      • Тінь елемента
    • 7️⃣Векторна графіка
      • Що таке векторна графіка
      • SVG-елементи
      • SVG-документ
      • Використання векторної графіки
      • Зміна властивостей в SVG
    • 8️⃣Позиціонування
      • Позиційовані елементи
      • Властивість z-index
      • Властивість overflow
    • 9️⃣Переходи і анімація
      • CSS-переходи
      • CSS-анімація
      • 2D-трансформації
      • Перспектива
    • 🔟Форми
      • Для чого потрібні форми
      • Елемент <form>
      • Елемент <label>
      • Елемент <input>
      • Елемент <textarea>
      • Елемент <select>
      • Елемент <datalist>
      • Групування полів
      • Валідація форм
      • Валідація на клієнті
      • Псевдокласи стану
    • 🐭Адаптивна верстка
      • Медіа-запити
      • Метатег viewport
      • Інструменти розробника для адаптивної та респонсивної верстки
      • Типи верстки
      • Стратегія Mobile First
      • Вендорні префікси
      • Налаштування теми
    • 🐹Адаптивна графіка
      • Щільність пікселів
      • Респонсивні зображення
      • Респонсивні фонові зображення
      • Респонсивний елемент <img>
      • Елемент <picture>
    • 🦁Методологія ВЕМ
    • 🐶Препроцесор SASS
    • 🐰CSS фреймворки
      • Що таке CSS фреймворки
  • 👷‍♂️Практика
    • 👷Практика
  • Про мене
    • Про мене
Powered by GitBook
On this page
  1. Теорія
  2. Векторна графіка

Що таке векторна графіка

PreviousВекторна графікаNextSVG-елементи

Last updated 1 year ago

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

Деякі основні характеристики векторної графіки:

  1. Масштабованість: Векторні зображення можуть бути легко масштабовані без втрати якості або роздільної здатності. Це означає, що вони можуть бути збільшені або зменшені без розмиття або втрати чіткості.

  2. Редагованість: Елементи векторних зображень можна редагувати окремо. Наприклад, ви можете змінювати розміри, форму, кольори і положення окремих об'єктів на векторному зображенні.

  3. Компактність: Векторні файли зазвичай менше за розміром, оскільки вони зберігають тільки математичні рівняння та інструкції для відображення графіки.

  4. Якість: Векторні зображення мають високу якість, оскільки вони можуть бути роздруковані з високою роздільною здатністю без втрати якості.

  5. Анімація: Векторна графіка може використовуватися для створення анімацій та інтерактивних візуальних ефектів на веб-сторінках.

Приклади форматів векторної графіки включають SVG (Scalable Vector Graphics), AI (Adobe Illustrator), EPS (Encapsulated PostScript), PDF (Portable Document Format) та інші. Векторна графіка широко використовується в дизайні веб-сайтів, логотипах, ілюстраціях, векторних малюнках та інших графічних застосунках.

У веб-розробці найчастіше використовують формат SVG. Всередині файл не бінарний, а звичайний текст (XML), що описує об'єкти, їх ефекти та поведінку.

📚
7️⃣