Тег SVG

  Парный тег SVG предназначен для вставки на Web-страницу поля для загрузки и(или) отображения графического контента в формате SVG.
  Такой контент может быть загружен в поле элемента тега SVG извне.
  Но, поскольку файл в формате SVG представляет собой набор элементов XML-тегов, то, с помощью этих же тегов, можно закодировать рисунок непосредственно в HTML-коде документа.
  Для этого надо поместить элементы этих тегов в элемент тега SVG.
  Описание XML-тегов не входит в рамки этого справочника, однако, у каждого такого тега есть свои атрибуты, которые содержат параметры SVG-рисунка соответствующего этому тегу.
  DOM предоставляет стандартный интерфейс к элементам этих тегов и их атрибутам дополненный их собственными свойствами и методами, который позволяет динамически изменять рисунок.
  Вне элемента тега SVG XML-теги SVG-рисунка никак не интерпретируются браузерами.
  DOM также предоставляет интерфейс SVGSVGElement, расширяя возможности динамического изменения рисунка в поле элемента тега SVG.
  Cобственный внутренний контент тега SVG, прописанный в HTML-коде, никак не будет отображаться на Web-странице.
  Разрешается вложенность элементов тега SVG друг в друга, однако все "дочерние" элементы никак не будут мешать рисунку, который находится в поле самого первого "родительского" элемента тега SVG.
  Например, их рамки всегда будут прозрачными.
  Атрибуты:
  CONTENTSCRIPTTYPE - Устанавливает стандарт языка сценариев и формат программных файлов.

  • Значение:

    • Формат/Стандарт

  • Значение по умолчанию - text/ecmascript.
      ecmascript - это и JavaScript.
  • Атрибут не обязательный.
  CONTENTSTYLETYPE - Устанавливает стандарт таблиц стилей и формат файлов.

  • Значение:

    • Формат/Стандарт

  • Значение по умолчанию - text/css.
  • Атрибут не обязательный.
  HEIGHT - Устанавливает высоту поля для размещения SVG контента.
  Значение атрибута может быть перекрыто атрибутом стиля height.
  • Значение:

    • Целое положительное число - высота в пикселях.

  • Значение по умолчанию - Нет.
  • Атрибут не обязательный.
  PRESERVEASPECTRATIO - Устанавливает режим применения браузером атрибута VIEWBOX (с сохранением пропорций или нет).

  • Значение:

    • "Пропорция [Режим]" где:
        Пропорция - одно из значений:
      • xMinYMin - Симметричная пропорция по минимуму горизонтали и вертикали.
      • xMidYMin - Пропорция по среднему значению горизонтали и минимуму вертикали.
      • xMaxYMin - Пропорция по максимуму горизонтали и минимуму вертикали.
      • xMinYMid - Пропорция по минимуму горизонтали и по среднему значению вертикали.
      • xMidYMid - Симметричная пропорция по среднему значению горизонтали и вертикали.
      • xMaxYMid - Пропорция по максимуму горизонтали и по среднему значению вертикали.
      • xMinYMax - Пропорция по минимуму горизонтали и по максимуму вертикали.
      • xMidYMax - Пропорция по среднему значению горизонтали и максимуму вертикали.
      • xMaxYMax - Симметричная пропорция по максимуму горизонтали и вертикали.
      • none - Пропорция не сохраняется.
        Режим - одно из значений:
      • meet - Пропорция сохраняется, если все поле элемента все же помещается в поле элемента родительского тега.
      • slice - Пропорция сохраняется в любом случае (возможно с появлением соответствующей полосы скроллинга).

  • Значение по умолчанию - none.
  • Атрибут не обязательный.
  X - Устанавливает горизонтальное смещение поля для размещения SVG контента в поле элемента "родительского" тега SVG.

  • Значение:

    • Целое положительное число - смещение в пикселях.

  • Значение по умолчанию - 0.
  • Атрибут не обязательный.
  Y - Устанавливает вертикальное смещение поля для размещения SVG контента в поле элемента "родительского" тега SVG.

  • Значение:

    • Целое положительное число - смещение в пикселях.

  • Значение по умолчанию - 0.
  • Атрибут не обязательный.
  ZOOMANDPAN - Устанавливает разрешения для zoom пользователем поля элемента тега SVG.

  • Значения:

    • magnify - zoom разрешён.
    • disable - zoom не разрешён.

  • Значение по умолчанию - magnify.
  • Атрибут не обязательный.
  XMLNS - Устанавливает адрес файла с загружаемым SVG контентом.

  • Значение:


  • Значение по умолчанию - Нет.
  • Атрибут не обязательный.
  VERSION - Устанавливает версию языка SVG контента.

  • Значения:

    1. 1.0
    2. 1.1

  • Значение по умолчанию - 1.1.
  • Атрибут не обязательный.
  VIEWBOX - Устанавливает минимально возможные числовые характеристики поля для размещения SVG контента.
  Эти величины используются браузером, если поле элемента тега SVG не входит в окно браузера, для включения скроллинга в этом окне.
  • Значение:

    • Список из четырех чисел, которые определяют минимальные горизонтальное и вертикальное смещения, минимальные ширину и высоту поля.
        Значения в списке разделяются пробелом или запятой.

  • Значение по умолчанию - Нет.
  • Атрибут не обязательный.
  WIDTH - Устанавливает ширину поля для размещения SVG контента.
  Значение атрибута может быть перекрыто атрибутом стиля width.
  • Значение:

    • Целое положительное число - ширина в пикселях.

  • Значение по умолчанию - Нет.
  • Атрибут не обязательный.


Пример:
<SVG HEIGHT="200" WIDTH="200" STYLE="border: solid black">
  <rect id="rect1 "width="100" height="100" fill="black" />
  <SVG X="10" Y="10" HEIGHT="120" WIDTH="120" STYLE="border: solid blue">
    <rect id="rect2" width="50" height="50" fill="red" />
  </SVG>
</SVG>
Результат:
Видно что, рамка внутреннего элемента тега SVG никак не отображается в поле внешнего элемента тега SVG.