HTML5 SVG - Scalable Vector Graphics / Масштабована векторна графіка
Що таке SVG?
- SVG розшифровується як Scalable Vector Graphics - Масштабована векторна графіка
- SVG використовується для визначення Web-графіки
- SVG рекомендується W3C (Консорціумом всесвітньої павутини)
HTML елемент <svg>
HTML елемент <svg> є контейнером для SVG-графіки.
SVG має кілька методів для малювання контурів, боксів, кіл, тексту та графічних зображень.
Підтримка браузерами
Цифри в таблиці визначають першу версію браузера, яка повністю підтримує елемент <svg>.
| Елемент | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
SVG Коло
Приклад
<!DOCTYPE html>
<html>
<body>
<svg
width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="orange" />
</svg>
</body>
</html>
Спробуйте самі »
SVG Прямокутник
Приклад
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"/>
</svg>
Спробуйте самі »
SVG Закруглений прямокутник
Приклад
<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>
Спробуйте самі »
SVG Зірка
Приклад
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Спробуйте самі »
SVG Лого
Приклад
<svg height='130' width='500'>
<defs>
<linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'>
<stop offset='0%' style='stop-color:rgb(255,255,0);stop-opacity:1' />
<stop offset='100%' style='stop-color:rgb(255,0,0);stop-opacity:1' />
</linearGradient>
</defs>
<ellipse cx='100' cy='70' rx='85' ry='55' fill='url(#grad1)' />
<text fill='#ffffff' font-size='45' font-family='Verdana' x='50' y='86'>SVG</text>
На жаль, ваш браузер не підтримує вбудований SVG.
</svg>
Спробуйте самі »
Відмінності між SVG та Canvas
SVG - це мова для опису 2D-графіки в XML.
Canvas малює 2D графіку на льоту (за допомогою JavaScript).
SVG базується на XML, що означає, що кожен елемент доступний у SVG DOM. Ви можете приєднати обробники JavaScript для елемента.
У SVG кожна намальована форма запам’ятовується як об’єкт. Якщо атрибути об’єкта SVG змінені, браузер може автоматично відтворити форму.
Canvas візуалізується піксель за пікселем. У canvas, коли малюється малюнок, він забувається браузером. Якщо його позицію треба змінити, необхідно перемалювати всю сцену, включаючи будь-які об’єкти, які могли бути покриті графікою.
Порівняння Canvas та SVG
У таблиці нижче показані деякі важливі відмінності між Canvas та SVG:
| Canvas | SVG |
|---|---|
|
|
SVG Підручник
Дізнатись більше про SVG можна, відвідавши SVG Підручник на нашому сайті W3Schools українською.
