Поиск…


замечания

Масштабируемая векторная графика (SVG) является стандартом W3C для рисования векторных изображений.

Вот простой автономный файл SVG:

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="25" fill="blue"/>
</svg>

SVG также может быть встроен в HTML, и в этом случае атрибут xmlns не требуется.

Другие графические элементы:

  • <line>
  • <ellipse>
  • <path>
  • <polygon> и <polyline>
  • <text> включая дочерние элементы, такие как <tspan> и <textPath>

CSS используется для стилизации, хотя не все свойства CSS применяются к SVG, и сам SVG определяет некоторые конкретные свойства, такие как fill и stroke , которые не используются в других местах.

Формы могут быть заполнены градиентами или узорами, а дополнительные растровые эффекты могут быть достигнуты с использованием фильтров.

Обрезание доступно с использованием вышеуказанных графических элементов в качестве путей клипов.

Что касается версий стандарта W3C SVG:

Версии

Версия Дата выхода
1,0 2001-09-04
1.1 Первое издание 2003-01-14
1.2 Крошечный 2008-12-22
1.1 Второе издание 2011-08-16

Встроенный SVG

Inline SVG позволяет разметку SVG, написанную внутри HTML, генерировать графику в браузере.

При использовании SVG inline DOCTYPE строго не требуется. Вместо этого достаточно всего лишь тегов открытия и закрытия <svg> вместе с атрибутами viewBox или width и height:

<svg width="100%" height="100%">
    <!-- SVG elements go here -->
</svg>

Фрагмент <svg> действует как контейнер и структурный элемент. Этот фрагмент устанавливает собственную систему координат.

Ниже приведен пример рендеринга фрагмента SVG с некоторым контентом. Он создаст прямоугольник с «Hello World!». текст внутри него.

<svg width="50%" viewBox="0 0 10 10">
    <rect x="1" y="1" width="5" height="3" fill="teal" />
    <text x="2" y="2" font-family="Palatino, Georgia, serif" font-size="3%" font-weight="bold" fill="white">Hello World!</text>
</svg>

Результат:

Простой пример SVG

SVG как

Вы можете отобразить содержимое SVG-файла в виде изображения в документе HTML с помощью <img> . Например:

<img src="my_svg_file.svg" alt="Image description">

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

Стоит отметить различные ограничения, присущие этому подходу:

  • Поддержка браузера, хотя и хорошая, не включает Internet Explorer 8 и более ранние версии, а также Android 2.3 и более ранние версии.
  • Вы не можете стилизовать отдельные элементы, содержащиеся в SVG-файле, используя CSS, который является внешним по отношению к SVG-файлу. Все CSS должны находиться внутри самого файла изображения.
  • JavaScript не запускается.
  • Изображение должно быть заполнено в одном файле. Например, если файл SVG содержит растровые изображения, то эти внутренние изображения должны быть закодированы как URL-адреса данных.

SVG в качестве фонового изображения

Вы можете отобразить SVG-файл в HTML-документе, указав его как фоновое изображение в CSS. Например:

.element {
    background-size: 100px 100px;
    background: url(my_svg_file.svg);
    height: 100px;
    width: 100px;
}

Если размеры, указанные в вашем SVG-файле, больше размеров вашего HTML-элемента, может быть желательно указать свойство background-size , чтобы масштабировать SVG, чтобы соответствовать его элементу.

Как и при использовании SVG в качестве <img> , стоит отметить некоторые ограничения этого подхода:

  • Поддержка браузера не включает Internet Explorer 8 и более ранние версии, а также Android 2.3 и более ранние версии.
  • Вы не можете стилизовать отдельные элементы, содержащиеся в SVG-файле, используя CSS, который является внешним по отношению к SVG-файлу. Все CSS должны находиться внутри самого файла изображения.


Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow