ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
Графика. Уроки для начинающих

SVG Учебник

SVG - это масштабируемая векторная графика.

SVG определяет векторную графику в формате XML.


Примеры в каждой главе

С помощью онлайн-редактора "Попробуйте сами" на нашем сайте W3Schools на русском вы можете отредактировать SVG и нажать кнопку, чтобы просмотреть результат.

SVG Пример

<html>
<body>

<h1>Мой первый SVG</h1>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
Попробуйте сами »

Что вы уже должны знать

Прежде чем продолжить, вы должны иметь некоторое общее представление о следующих технологиях:

  • HTML
  • Основы XML

Если вы хотите сначала изучить эти предметы, найдите уроки на Главной странице нашего сайта.


Что такое SVG?

  • SVG - это масштабируемая векторная графика
  • SVG используется для определения векторной графики для Интернета
  • SVG определяет графику в формате XML
  • Каждый элемент и каждый атрибут в файлах SVG можно анимировать
  • SVG - это рекомендация W3C
  • SVG интегрируется с другими стандартами W3C, такими как DOM и XSL

SVG - это рекомендация W3C

SVG 1.0 стал Рекомендацией W3C 4 сентября 2001 г.

SVG 1.1 стал Рекомендацией W3C 14 января 2003 г.

SVG 1.1 (второе издание) стал рекомендацией W3C 16 августа 2011 г.


SVG Преимущества

Преимущества использования SVG перед другими форматами изображений (такими как JPEG и GIF):

  • Изображения SVG можно создавать и редактировать с помощью любого текстового редактора
  • Изображения SVG можно искать, индексировать, создавать сценарии и сжимать
  • Изображения SVG можно масштабировать
  • Изображения SVG можно печатать с высоким качеством при любом разрешении
  • Графика SVG НЕ теряет качества при увеличении или изменении размера
  • SVG - это открытый стандарт
  • Файлы SVG - это чистый XML

Создание SVG Изображений

Изображения SVG можно создавать с помощью любого текстового редактора, но часто удобнее создавать изображения SVG с помощью программы для рисования, например Inkscape.