Блог

Такий собі міський круизер, виконаний за допомогою SVG. Ніякого ДжаваСкрипт, тільки HTML (SVG) і CSS, втім, кого на даний момент їм ще можна здивувати 🙂

SVG є граматикою мови XML, розшифровується як – масштабуєма векторна графіка і використовуєма для опису графічних зображень. Особливо потрібно підкреслити, що це саме векторна графіка, що вказує на фундаментальна відмінність від растрової графіки і таких її форматів як: JPEG, PNG або GIF. СВГ є точним, не залежним від дозволу (на що вказує термін «масштабуєма») описом кроків, які потрібно виконати, для того щоб створити необхідний малюнок.

Для початку давайте розглянемо код простого прикладу:

…

Як видно з прикладу, ми визначаємо початок малюнка і задаємо простір імен. Слідом за цим вказуємо систему координат малюнка, задаємо кольоровий градієнт з ім’ям «fade» і починаючи заливку з темно-синього кольору, закінчуємо її світло-синім. Наступним кроком, ми даємо вказівку намалювати трикутник з тонкою чорною рамкою і заповнити його зазначеним раніше градієнтом.

Графічне представлення того, що у нас вийшло:

…

Приклад простого зображення, виконаного за допомогою SVG

Масштабна векторна графіка – являє собою досить велику граматику з помірною складністю її застосування на практиці. Крім примітивних малюнків з її допомогою можна відтворювати малюнки будь-якої складності, створювати довільні криві і додавати анімацію. Так само, малюнки, виконані за допомогою SVG, можуть містити в собі JavaScript сценарії і CSS стилі.

Нижче представлений приклад коду для створення велосипеда, розміщеного в шапці статті. Я якщо у вас виникнуть запитання, прошу – ставте їх у коментарях, описувати кожен крок, в цьому красивому, але досить простому прикладі, просто не бачу сенсу.

Реалізація велосипеда: