HTML Тег <svg>
Приклад
Намалюйте коло:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
Спробуйте самі »
Більше прикладів "Спробуйте самі" далі.
Визначення та використання
Тег <svg> визначає контейнер для графіки SVG.
SVG має кілька методів малювання шляхів, прямокутників, кіл, тексту та графічних зображень.
Щоб дізнатись більше про SVG, прочитайте SVG Підручник на нашому сайті W3Schools українською.
Підтримка браузерами
| Елемент | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
Більше прикладів
Приклад
Намалюйте прямокутник:
<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 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 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>
Спробуйте самі »
Пов’язані сторінки
HTML підручник: HTML SVG
SVG підручник: SVG Підручник
