Масштабируемая векторная графика (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 |
Хорошие возможности рендеринга текста | Плохие возможности рендеринга текста |
Хорошая производительность при малом кол-ве объектов, но большой их поверхностью | Хорошая производительность при большом кол-ве объектов, но малой их поверхностью |
Хорошая масштабируемость. Может быть напечатан с высоким качеством в любом разрешении. Пикселизация не происходит | Плохая масштабируемость. Не подходит для печати с более высоким разрешением. Может возникнуть пикселизация |