Створення масштабованих векторних зображень (SVG) за допомогою HTML та CSS
Добре, підготуйтесь, кодери-бджоли! Ми знову збираємось поглибитися у барвистий світ веб-розробки. Сьогодні ми надягаємо наші фантастичні творчі капелюхи і малюємо цифрове полотно з масштабованими векторними графічними зображеннями (SVG) за допомогою HTML та CSS. Якщо ви думаєте: “Чому SVG? Чи недостатньо кітових мемів для прикраси веб-сайту?” Ну, SVG – це супергерої графіки. Вони легкі, адаптивні та масштабуються без втрати якості, що означає, що вони виглядають так само гостро на моніторі з роздільною здатністю 4k, як і на екрані вашого смартфона. Давайте перейдемо до справи!
Основи: SVG в HTML
Час почати малювати нашу цифрову творчість. SVG, як і інші елементи HTML, мають теги та атрибути. Базовий SVG, скажімо, коло, виглядатиме приблизно так у HTML:
Тут <svg> – це наш контейнерний тег, який містить всі наші елементи SVG. width і height визначають розмір SVG. У цьому тезі ми маємо тег <circle> з атрибутами cx і cy, що позначають центр кола, r – його радіус, stroke визначає колір лінії, stroke-width визначає товщину, а fill – зафарбовує внутрішність кола. Вітання, ви тільки що створили міні-цифрове сонечко!
Поглиблення: SVG з CSS
Тепер давайте надягнемо свій CSS-капелюх і подивимося, як ми можемо використовувати його для стилізації наших SVG. Так само, як будь-який інший елемент HTML, ми можемо використовувати CSS для стилізації наших SVG. Ми можемо змінювати кольори, розмір, додавати ефекти, переходи, анімації та багато іншого. Давайте додамо клас наше сонечко і перетворимо його на щось крутіше, можливо, на ковзаючий м’яч або миготливий неоновий світлофор.
У CSS вище ми змінили розмір SVG, змінили кольори лінії та заливки кола, а також додали анімацію ковзання.
Обійміть красу: Складні форми SVG
Наш ковзаючий неоновий м’яч досить крутий, чи не так? Але SVG можуть бути набагато складнішими та витонченішими, ніж просте коло. Ви можете створювати прямокутники, багатокутники, лінії, полілінії та шляхи, і групувати їх разом, щоб створити більш складні форми.
У коді вище ми створили прямокутник з закругленими кутами. Атрибути ‘rx’ та ‘ry’ визначають радіус закруглення кутів, ‘x’ та ‘y’ – це позиція форми на ‘холсті’ SVG, а ‘style’ містить властивості CSS.
Розуміння SVG може здатися розшифруванням коду для мови іншої цивілізації на початку, але з практикою, терпінням та ще більше практики ви скоро станете майстрами малювання. Пам’ятайте, що навіть Пікассо починав з кола. Насолоджуйтеся кодуванням та залишайтеся крутими!
