SVG учебник
Начало работы с SVG
Поиск…
замечания
Масштабируемая векторная графика (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:
- Текущей версией является SVG 1.1 (второе издание)
- В настоящее время W3C работает над проектом SVG 2
Версии
| Версия | Дата выхода |
|---|---|
| 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-файла в виде изображения в документе 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 должны находиться внутри самого файла изображения.