Revision 666315 of SVG

<div class="callout-box">
 <strong><a href="/ru/docs/SVG/Tutorial">С чего начать</a></strong><br />
 Этот урок поможет вам начать использовать SVG.
</div>
<p><strong>Масштабируемая векторная графика (Scalable Vector Graphics — SVG)</strong> является {{Glossary("язык разметки", "языком разметки")}} <a href="/ru/docs/XML">XML</a> для описания двумерной {{Glossary("векторная графика", "векторной графики")}}. SVG, по существу является графикой, так же, как  {{Glossary("XHTML")}} — текстом.</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">Справочник по интерфейсу DOM SVG</a></dt>
   <dd>Подробная информация по всему DOM API SVG.</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">Карты</a> (оверлей с маршрутом) и <a href="https://docs.google.com">Документы</a> (диаграммы в электронных таблицах) Google</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>