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

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.