W3docs
ru
Войти

Введение в SVG

On this page, you can find useful information about SVG. Particularly, you can learn what SVG is, what its advantages are, and how you create SVG images.

SVG (Scalable Vector Graphics) определяет векторную графику в формате XML. Для работы с ней необходимо базовое понимание HTML и XML.

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

Преимущества использования SVG

Использование SVG вместо других форматов изображений, таких как JPEG и GIF, имеет множество преимуществ. В частности:

  • SVG-изображения можно создавать и редактировать в любом текстовом редакторе.
  • SVG-изображения можно скриптовать, индексировать, искать и сжимать.
  • SVG-изображения можно печатать в высоком качестве при любом разрешении.
  • SVG-изображения можно масштабировать и увеличивать.
  • SVG-графика не теряет качество при увеличении или изменении размера.
  • SVG является открытым стандартом.

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

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

Встраивание SVG в HTML

Файлы SVG используют расширение .svg и поддерживаются всеми современными браузерами. Вы можете встроить их в HTML с помощью тега `<img>` или инлайн-разметки. Базовая структура SVG выглядит следующим образом:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Практика

Практика

Что вы знаете о SVG в HTML?