w3schools.на русском
ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML
CSS
JAVASCRIPT
SQL
PYTHON
PHP
BOOTSTRAP
КАК СДЕЛАТЬ
W3.CSS
JQUERY
XML
БОЛЬШЕ
🔍
◑
КНИГИ
УПРАЖНЕНИЯ
СПРАВОЧНИКИ
×
HTML и CSS
Уроки HTML Уроки CSS Уроки Bootstrap Уроки W3.CSS Уроки Цвета Уроки Иконки Уроки Графика Уроки SVG Уроки Canvas Уроки Как сделать Уроки SassJavaScript
Уроки JavaScript Уроки jQuery Уроки React Уроки AngularJS Уроки JSON Уроки AJAX Уроки W3.JSПрограммирование
Уроки Python Уроки Java Уроки C++ Уроки C# Уроки Машинное обучениеСерверная сторона
Уроки SQL Уроки PHP Уроки ASP Уроки Node.js Уроки Raspberry PiВеб-строительство
Веб-шаблоны Веб-статистика Веб-сертификаты Веб-редактор Веб-разработка
×
HTML
HTML Справочник тегов HTML Справочник событий HTML Справочник цветов HTML Справочник атрибутов HTML Canvas Справочник HTML SVG Справочник HTML Наборы символов Google-карты СправочникCSS
CSS Справочник CSS Поддержка браузерами CSS Selector Справочник Bootstrap 3 Справочник Bootstrap 4 Справочник W3.CSS Справочник Иконки Справочник Sass СправочникJavaScript
JavaScript Справочник HTML DOM Справочник jQuery Справочник AngularJS Справочник W3.JS СправочникПрограммирование
Python Справочник Java СправочникСерверная сторона
SQL Справочник PHP Справочник ASP СправочникXML
XML Справочник XML Http Справочник XSLT Справочник XML Schema Справочник
×
Упражнения
HTML Упражнения CSS Упражнения JavaScript Упражнения SQL Упражнения PHP Упражнения Python Упражнения jQuery Упражнения Bootstrap Упражнения Java Упражнения C++ УпражненияHTML Справочник
HTML Теги по алфавиту HTML Теги по категории HTML Атрибуты HTML Глобальные атрибуты HTML Атрибуты событий HTML Цвета HTML Canvas HTML Аудио/Видео HTML Наборы символов HTML Doctype HTML URL кодирование HTML Коды языков HTML Коды стран HTTP Сообщения HTTP Методы PX в EM Конвертер Горячие клавишиHTML Теги
<!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>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 Учебник
×
Ваше предложение:
×
Спасибо за Вашу помощь!
Ваше сообщение было отправлено в W3Schools.
Этот сайт оптимизирован для обучения, тестирования и обучения. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политики конфиденциальности.
Copyright 1999-2019 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
Сайт работает на фреймворке W3.CSS.