Масштабируемая векторная графика (SVG) — это формат изображения на основе XML, который используется для определения двухмерной векторной графики для интернета. В отличие от растрового изображения (например, .jpg, .gif, .png и т. д.), векторное изображение может быть масштабировано в любой степени без потери качества изображения.
SVG-изображение выводится с использованием ряда операторов, которые следуют схеме XML — это означает, что изображения SVG можно создавать и редактировать с помощью любого текстового редактора, такого как блокнот. Есть несколько других преимуществ использования SVG перед другими форматами изображений, такими как .jpeg, .gif, .png и т. д.
- SVG-изображения можно искать, индексировать, создавать сценарии и сжимать.
- SVG-изображения могут быть созданы и изменены с использованием JavaScript в режиме реального времени.
- SVG-изображения могут быть напечатаны с высоким качеством при любом разрешении.
- SVG-изображения можно анимировать, используя встроенные элементы анимации.
- SVG-изображения могут содержать гиперссылки на другие документы.
Векторные изображения состоят из фиксированного набора форм, определенных математикой, а растровые изображения состоят из фиксированного набора точек, называемых пикселями.
Встраивание SVG в HTML-страницы
Вы можете встраивать SVG-графику непосредственно в документ, используя HTML5-элемент <svg>.
Давайте посмотрим на следующий пример, чтобы понять, как это работает:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Embedding SVG in HTML</title>
</head>
<body>
<svg width="300" height="200">
<text x="10" y="20" style="font-size:14px;">
Your browser support SVG.
</text>
Sorry, your browser does not support SVG.
</svg>
</body>
</html>Все современные веб-браузеры, такие как Chrome, Firefox, Safari и Opera, а также Internet Explorer 9 и выше, поддерживают встроенный рендеринг SVG.
Рисование контуров и фигур с помощью SVG
В следующем разделе объясняется, как рисовать базовые векторные контуры и фигуры на веб-страницах, используя элемент <svg>.
Рисование линии
Самая простая фигура, которую вы можете нарисовать с помощью SVG — это прямая линия. В следующем примере показано, как создать прямую линию с помощью SVG-элемента <line>:
<svg width="300" height="200">
<line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3;" />
</svg>Атрибуты x1, x2, y1 и y2 элемента <line> рисуют линию от (x1,y1) до (x2,y2).
Рисование прямоугольника
Вы можете создавать простые прямоугольники и квадратные формы, используя SVG-элемент <rect>. В следующем примере показано, как создать и стилизовать прямоугольную форму с помощью SVG:
<svg width="300" height="200">
<rect x="50" y="50" width="200" height="100" style="fill:orange; stroke:black; stroke-width:3;" />
</svg>Атрибуты x и y элемента <rect> определяют координаты верхнего левого угла прямоугольника. Атрибуты width и height определяют ширину и высоту фигуры.
Рисование круга
Вы также можете создавать формы круга, используя SVG-элемент <circle>. В следующем примере показано, как создать и оформить круглую форму с помощью SVG:
<svg width="300" height="200">
<circle cx="150" cy="100" r="70" style="fill:lime; stroke:black; stroke-width:3;" />
</svg>Атрибуты cx и cy элемента <circle> определяют координаты центра круга, а атрибут r задает его радиус. Однако, если атрибуты cx и cy опущены или не указаны, центр круга устанавливается на (0,0).
Рисование текста с помощью SVG
Вы также можете рисовать текст на веб-страницах с помощью SVG. Текст в SVG отображается в виде графики, поэтому вы можете применить к нему все графические преобразования, но он по-прежнему рендерится как текст — это означает, что он может быть выбран и скопирован пользователем как текст. Давайте посмотрим пример, чтобы увидеть, как это работает:
<svg width="300" height="200">
<text x="20" y="30" style="fill:purple; font-size:22px;">
Welcome to Our Website!
</text>
<text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;">
Here you will find lots of useful information.
</text>
</svg>Атрибуты x и y элемента <text> определяют местоположение левого верхнего угла в абсолютном выражении, тогда как атрибуты dx и dy определяют относительное местоположение.
Вы даже можете использовать элемент <tspan> для переформатирования или изменения положения текста, содержащегося в элементе <text>. Текст, содержащийся в отдельных окнах, но внутри одного и того же текстового элемента, может быть выделен сразу — при нажатии и перетаскивании для выбора текста. Однако текст в отдельных текстовых элементах не может быть выделен одновременно. Давайте посмотрим на пример:
<svg width="300" height="200">
<text x="30" y="15" style="fill:purple; font-size:22px; transform:rotate(30deg);">
<tspan style="fill:purple; font-size:22px;">
Welcome to Our Website!
</tspan>
<tspan dx="-230" dy="20" style="fill:navy; font-size:14px;">
Here you will find lots of useful information.
</tspan>
</text>
</svg>Различия между SVG и Canvas
В HTML5 есть два графических элемента <canvas> и <svg> для удобного создания графики в сети, но они принципиально отличаются.
В следующей таблице приведены некоторые основные различия между этими двумя элементами, которые помогут вам понять, как использовать эти элементы эффективно и надлежащим образом.
| SVG | Canvas |
|---|---|
| Векторный (состоит из фигур) | Растровый (состоит из пикселей) |
| Несколько графических элементов, которые становятся частью дерева DOM страницы | Каждый элемент похож на <img>. Диаграмму canvas можно сохранить в формате PNG или JPG |
| Можно модифицировать через CSS и JS | Можно модифицировать только через JS |
| Хорошие возможности рендеринга текста | Плохие возможности рендеринга текста |
| Хорошая производительность при малом кол-ве объектов, но большой их поверхностью | Хорошая производительность при большом кол-ве объектов, но малой их поверхностью |
| Хорошая масштабируемость. Может быть напечатан с высоким качеством в любом разрешении. Пикселизация не происходит | Плохая масштабируемость. Не подходит для печати с более высоким разрешением. Может возникнуть пикселизация |
