SVG в HTML. Введение - SVG

Эта страница была переведена с английского языка силами сообщества. Вы тоже можете внести свой вклад, присоединившись к русскоязычному сообществу MDN Web Docs.

Примечание

В примере представлен обычный XHTML, CSS и JavaScript-код. Здесь есть лишь одна особенность, это наличие SVG элемента. Этот элемент объявлен в специальном пространстве имён SVG, содержит градиент и две фигуры заполненные градиентом. По замыслу, когда пользователь введёт что-нибудь неправильное, то скрипт установит для BODY класс .invalid, где правила стиля изменяют цвет градиента и делают видимым сообщение об ошибке.

Такой способ имеет следующие пункты в свою пользу:

Мы использовали штатную XHTML форму, которая уже может присутствовать на веб-сайте, и добавили привлекательный, интерактивный фон
Подход имеет обратную совместимость с браузерами, которые не поддерживают SVG; Элемент SVG просто не отобразится, не повлияв на текущую вёрстку.
Это очень просто сделать.
Изображение масштабируемое и может растягиваться до нужного размера
Мы можем применять декларированные стили как для HTML так и для SVG
С помощью JavaScript можно управлять как HTML так и SVG
Это полностью валидный документ, основанный на стандартах.

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

var img = document.createElementNS("http://www.w3.org/2000/svg", "image");

img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");

Дополнительно

Значение атрибута viewBox определяет область в пространстве пользователя, относительно внешним границам просмотра.

viewBox="x y w h" - где: x- левый верхний угол по оси x, y- левый верхний угол по оси y, w- ширина в пользовательской единице измерения, h- высота (соответственно). В данном примере использовалось значение:

html

viewBox="0 0 100 100"

Размер изображения svg (заданный атрибутами width и height), может отличаться от области просмотра. Для регулирования отрисовки такого изображения используется атрибут preserveAspectRatio. С его помощью могут быть заданы правила выравнивания и поведения при переполнении (overflow) области просмотра, края svg могут быть обрезаны или вписаны.

html

preserveAspectRatio="alignment [meet | slice]"

alignment - одно из значений xMinYMin, xMinYMid, xMinYMax, xMidYMin, xMidYMid, xMidYMax, xMaxYMin, xMaxYMid или xMaxYMax.

meet - сохраняет пропорции, умещая svg в область просмотра

slice - тоже сохраняет пропорции, но масштабирует по максимальной границе области просмотра, обрезая часть изображения, которая не поместилась в область

Также есть спецификатор none который означает, что изображение заполнит область путём масштабирования сторон, не сохраняя пропорции (растянет).

html

preserveAspectRatio="none"

Атрибут style применяется для определения стиля элемента.

Ссылки по теме

Сохранение пропорций ссылка
Масштабирование и сдвиг msdn.microsoft
Ещё SVG в XHTML: пример

\n \n \n \n\n \n \n \n \n \n \n \n \n \n\n"}},{"type":"prose","value":{"id":"примечание","title":"Примечание","isH3":false,"content":"

Такой способ имеет следующие пункты в свою пользу:\n

Мы использовали штатную XHTML форму, которая уже может присутствовать на веб-сайте, и добавили привлекательный, интерактивный фон\n
Подход имеет обратную совместимость с браузерами, которые не поддерживают SVG; Элемент SVG просто не отобразится, не повлияв на текущую вёрстку.\n
Это очень просто сделать.\n
Изображение масштабируемое и может растягиваться до нужного размера\n
Мы можем применять декларированные стили как для HTML так и для SVG\n
С помощью JavaScript можно управлять как HTML так и SVG\n

Это полностью валидный документ, основанный на стандартах.\n\n

Примечание:\nЧтобы к изображению с DOM добавить связь встроенного SVG, необходимо использовать setAttributeNS, установив href как показано в следующем примере:\n

js
var img = document.createElementNS(\"http://www.w3.org/2000/svg\", \"image\");\n\nimg.setAttributeNS(\"http://www.w3.org/1999/xlink\", \"xlink:href\", \"move.png\");\n\n"}},{"type":"prose","value":{"id":"дополнительно","title":"Дополнительно","isH3":false,"content":"Значение атрибута viewBox определяет область в пространстве пользователя, относительно внешним границам просмотра.\n viewBox=\"x y w h\" - где: x- левый верхний угол по оси x, y- левый верхний угол по оси y, w- ширина в пользовательской единице измерения, h- высота (соответственно). В данном примере использовалось значение:\n htmlviewBox=\"0 0 100 100\"\n\nРазмер изображения svg (заданный атрибутами width и height), может отличаться от области просмотра. Для регулирования отрисовки такого изображения используется атрибут preserveAspectRatio. С его помощью могут быть заданы правила выравнивания и поведения при переполнении (overflow) области просмотра, края svg могут быть обрезаны или вписаны.\n htmlpreserveAspectRatio=\"alignment [meet | slice]\"\n\nalignment - одно из значений xMinYMin, xMinYMid, xMinYMax, xMidYMin, xMidYMid, xMidYMax, xMaxYMin, xMaxYMid или xMaxYMax.\n meet - сохраняет пропорции, умещая svg в область просмотра\n slice - тоже сохраняет пропорции, но масштабирует по максимальной границе области просмотра, обрезая часть изображения, которая не поместилась в область\n Также есть спецификатор none который означает, что изображение заполнит область путём масштабирования сторон, не сохраняя пропорции (растянет).\n htmlpreserveAspectRatio=\"none\"\n\nАтрибут style применяется для определения стиля элемента."}},{"type":"prose","value":{"id":"ссылки_по_теме","title":"Ссылки по теме","isH3":false,"content":" \nСохранение пропорций ссылка\n Масштабирование и сдвиг msdn.microsoft\n Ещё SVG в XHTML: пример\n"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"ru","mdn_url":"/ru/docs/Web/SVG/Guides/SVG_in_HTML","modified":"2025-03-19T10:41:54.000Z","native":"Русский","noIndexing":false,"other_translations":[{"locale":"en-US","title":"SVG in HTML introduction","native":"English (US)"},{"locale":"de","title":"Einführung in SVG in HTML","native":"Deutsch"},{"locale":"fr","title":"Introduction à SVG dans HTML","native":"Français"},{"locale":"ja","title":"HTML 内の SVG 入門","native":"日本語"},{"locale":"ko","title":"SVG In HTML Introduction","native":"한국어"},{"locale":"zh-CN","title":"SVG In HTML Introduction","native":"中文 (简体)"}],"pageTitle":"SVG в HTML. Введение - SVG | MDN","parents":[{"uri":"/ru/docs/Web","title":"Веб-технологии для разработчиков"},{"uri":"/ru/docs/Web/SVG","title":"SVG"},{"uri":"/en-US/docs/Web/SVG/Guides","title":"Guides"},{"uri":"/ru/docs/Web/SVG/Guides/SVG_in_HTML","title":"SVG в HTML. Введение"}],"popularity":null,"short_title":"SVG в HTML. Введение","sidebarHTML":"SVG Уроки Introducing SVG from scratchВведение Начало работы Расположение (позиции) Основные Фигуры Пути (paths) Заливка и обводка Градиенты Шаблоны Текст Базовые трансформации Обрезка и маска Другое содержание в SVG Фильтры SVG шрифты SVG image element Работа с SVG SVG и CSS Путеводитель Content type Linking Namespaces crash course Scripting SVG animation with SMIL SVG как изображение Применение эффектов SVG к содержимому HTML SVG filters SVG в HTML. Введение Справочники Элементыa