Створення масштабованих векторних зображень (SVG) за допомогою HTML та CSS

Добре, підготуйтесь, кодери-бджоли! Ми знову збираємось поглибитися у барвистий світ веб-розробки. Сьогодні ми надягаємо наші фантастичні творчі капелюхи і малюємо цифрове полотно з масштабованими векторними графічними зображеннями (SVG) за допомогою HTML та CSS. Якщо ви думаєте: “Чому SVG? Чи недостатньо кітових мемів для прикраси веб-сайту?” Ну, SVG – це супергерої графіки. Вони легкі, адаптивні та масштабуються без втрати якості, що означає, що вони виглядають так само гостро на моніторі з роздільною здатністю 4k, як і на екрані вашого смартфона. Давайте перейдемо до справи!

Основи: SVG в HTML

Час почати малювати нашу цифрову творчість. SVG, як і інші елементи HTML, мають теги та атрибути. Базовий SVG, скажімо, коло, виглядатиме приблизно так у HTML:

html
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Тут <svg> – це наш контейнерний тег, який містить всі наші елементи SVG. width і height визначають розмір SVG. У цьому тезі ми маємо тег <circle> з атрибутами cx і cy, що позначають центр кола, r – його радіус, stroke визначає колір лінії, stroke-width визначає товщину, а fill – зафарбовує внутрішність кола. Вітання, ви тільки що створили міні-цифрове сонечко!

Поглиблення: SVG з CSS

Тепер давайте надягнемо свій CSS-капелюх і подивимося, як ми можемо використовувати його для стилізації наших SVG. Так само, як будь-який інший елемент HTML, ми можемо використовувати CSS для стилізації наших SVG. Ми можемо змінювати кольори, розмір, додавати ефекти, переходи, анімації та багато іншого. Давайте додамо клас наше сонечко і перетворимо його на щось крутіше, можливо, на ковзаючий м’яч або миготливий неоновий світлофор.

css
svg {
  width: 150px;
  height: 150px;
}
circle {
  stroke: red;
  fill: blue;
  animation: bounce 1s infinite;
}
@keyframes bounce {
  0% { transform: translateY(0);}
  50% { transform: translateY(-30px);}
  100% { transform: translateY(0);}
}

У CSS вище ми змінили розмір SVG, змінили кольори лінії та заливки кола, а також додали анімацію ковзання.

Обійміть красу: Складні форми SVG

Наш ковзаючий неоновий м’яч досить крутий, чи не так? Але SVG можуть бути набагато складнішими та витонченішими, ніж просте коло. Ви можете створювати прямокутники, багатокутники, лінії, полілінії та шляхи, і групувати їх разом, щоб створити більш складні форми.

html
<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

У коді вище ми створили прямокутник з закругленими кутами. Атрибути ‘rx’ та ‘ry’ визначають радіус закруглення кутів, ‘x’ та ‘y’ – це позиція форми на ‘холсті’ SVG, а ‘style’ містить властивості CSS.
Розуміння SVG може здатися розшифруванням коду для мови іншої цивілізації на початку, але з практикою, терпінням та ще більше практики ви скоро станете майстрами малювання. Пам’ятайте, що навіть Пікассо починав з кола. Насолоджуйтеся кодуванням та залишайтеся крутими!