Revision 946501 of SVG

<div class="callout-box"><strong><a href="/ru/docs/SVG/Tutorial">С чего начать</a></strong><br />
Этот урок поможет вам начать использовать SVG.</div>

<p><strong>Масштабируемая векторная графика (Scalable Vector Graphics&nbsp;— SVG)</strong> является {{Glossary("язык разметки", "языком разметки")}} расширенным из <a href="/ru/docs/XML">XML</a> для описания двухмерной {{Glossary("векторная графика", "векторной графики")}}. SVG по существу является графикой, так же, как {{Glossary("XHTML")}}&nbsp;— текстом.</p>

<p>SVG по своим возможностям приближается к запатентованной технологии Adobe Flash, но отличается от неё тем, что SVG является <a href="https://www.w3.org/Graphics/SVG/">рекомендацией W3C</a> (то есть, стандартом), и тем, что это формат, основанный на {{Glossary("XML")}}, в противовес закрытому двоичному формату Flash. Он явно спроектирован для работы с другими стандартами <a href="https://www.w3.org/">W3C</a>, такими, как <a href="/ru/docs/CSS">CSS</a>, <a href="/ru/docs/DOM">DOM</a> и <a href="https://www.w3.org/AudioVideo/">SMIL</a>.</p>

<div class="cleared row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Documentation" name="Documentation">Документация</h2>

<dl>
 <dt><a href="/ru/docs/Web/SVG/Element">Справочник по элементам SVG</a></dt>
 <dd>Подробная информация о каждом элементе SVG.</dd>
 <dt><a href="/ru/docs/Web/SVG/Attribute">Справочник по атрибутам SVG</a></dt>
 <dd>Подробная информация о каждом атрибуте SVG.</dd>
 <dt><a href="/ru/docs/DOM/DOM_Reference#SVG_interfaces">Справочник по интерфейсу SVG DOM</a></dt>
 <dd>Подробная информация по всему SVG DOM API.</dd>
 <dt>Улучшение содержимого HTML</dt>
 <dd>SVG работает вместе с {{Glossary("HTML")}}, {{Glossary("CSS")}} и {{Glossary("JavaScript")}}. Используйте SVG для улучшения обычной страницы HTML или веб-приложения.</dd>
 <dt>SVG в Mozilla</dt>
 <dd>Замечания и информация о том, как SVG реализован в Mozilla.
 <ul>
  <li><a href="/ru/docs/SVG_in_Firefox">Полнота реализации SVG в Firefox</a></li>
  <li><a href="/ru/docs/Web/SVG/Tutorial">Уроки по использованию SVG</a></li>
  <li><a href="/ru/docs/SVG_In_HTML_Introduction">SVG в XHTML</a></li>
 </ul>
 </dd>
</dl>

<p><span class="alllinks"><a href="/ru/docs/tag/SVG">Просмотреть всё…</a></span></p>

<h2 class="Community" id="Community" name="Community">Сообщество</h2>

<ul>
 <li>Обращайтесь на форумы Mozilla… {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li>
</ul>

<h2 class="Tools" id="Tools" name="Tools">Инструменты</h2>

<ul>
 <li><a href="https://www.w3.org/Graphics/SVG/Test/">Набор для тестирования SVG</a></li>
 <li><a href="https://jiggles.w3.org/svgvalidator/">Валидатор SVG</a> (уже не работает)</li>
 <li><a href="/ru/docs/tag/SVG:Tools">Больше инструментов…</a></li>
 <li>Другие ресурсы: <a href="/ru/docs/XML">XML</a>, <a href="/ru/docs/CSS">CSS</a>, <a href="/ru/docs/DOM">DOM</a>, <a href="/ru/docs/HTML/Canvas">Canvas</a></li>
</ul>
</div>

<div class="section">
<h2 class="Related_Topics" id="Examples" name="Examples">Примеры</h2>

<ul>
 <li><a href="https://maps.google.com">Карты Google</a> (маршруты поверх карты) и <a href="https://docs.google.com">Документы Google</a> (диаграммы в электронных таблицах)</li>
 <li><a href="https://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Меню из пузырьков на SVG</a></li>
 <li><a href="https://jwatt.org/svg/authoring/">Рекомендации по составлению SVG</a></li>
 <li>Обзор <a href="/ru/docs/Mozilla_SVG_Project">Проекта Mozilla SVG</a></li>
 <li><a href="/ru/docs/SVG/FAQ">Часто задаваемые вопросы</a>, касающиеся SVG и Mozilla</li>
 <li>Слайды и демонстрации с обсуждения <a href="https://jwatt.org/blog/2009/11/16/slides-and-demos-from-svg-open-2009">SVG и Mozilla</a>, проходившего на SVG Open 2009</li>
 <li><a href="/ru/docs/SVG/SVG_as_an_Image">Использование SVG в качестве изображения</a></li>
 <li><a href="/ru/docs/SVG/SVG_animation_with_SMIL">SVG анимация при помощи SMIL</a></li>
 <li><a href="https://plurib.us/1shot/2007/svg_gallery/">Художественная галерея SVG</a></li>
 <li>Больше примеров (примеры SVG с <a href="https://croczilla.com/bits_and_pieces/svg/samples">croczilla.com</a>, <a href="https://www.carto.net/papers/svg/samples/">carto.net</a>)</li>
</ul>

<h3 id="Animation_and_interactions" name="Animation_and_interactions">Анимация и взаимодействие</h3>

<p>Как и HTML, SVG имеет объектную модель документа (DOM) и события и всё это может быть доступно через JavaScript. Это позволяет разработчикам создавать роскошные анимации и интерактивные изображения.</p>

<ul>
 <li>Некоторые захватывающие работы с использованием SVG на <a href="https://svg-wow.org/">svg-wow.org</a></li>
 <li>Расширение Firefox (<a href="https://schepers.cc/grafox/">Grafox</a>) для добавления поддержки анимации с использованием {{Glossary("SMIL")}}</li>
 <li>Интерактивное управление <a href="https://people.mozilla.com/~vladimir/demos/photos.svg">фотографиями</a></li>
 <li>Использование <code>foreignObject</code> из SVG для <a href="https://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">изменения HTML</a></li>
</ul>

<h3 id="Mapping.2C_charting.2C_games_.26_3D_experiments" name="Mapping.2C_charting.2C_games_.26_3D_experiments">Карты, диаграммы, игры и эксперименты с 3D</h3>

<p>В то время, как маленькие документы SVG могут серьёзно улучшить веб-контент, здесь представлены некоторые примеры тяжёлого использования SVG.</p>

<ul>
 <li><a href="https://www.codedread.com/yastframe.php">Тетрис</a></li>
 <li><a href="https://web.archive.org/web/20131019072450/https://www.treebuilder.de/svg/connect4.svg" title="Archive link provided because source now requires authentication.">Connect 4</a></li>
 <li><a href="https://www.carto.net/papers/svg/us_population/index.html">Популяционная карта США</a></li>
 <li><a href="https://www.treebuilder.de/default.asp?file=441875.xml">3D-коробка</a> и <a href="https://www.treebuilder.de/default.asp?file=206524.xml">3D-коробки</a></li>
 <li><a href="https://jvectormap.com/">jVectorMap</a> (интерактивные карты для визуализации данных)</li>
</ul>
</div>
</div>

<p>&nbsp;</p>