skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180smsc banner 468x60smsc banner 728x90smsc banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180

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

В следующей таблице приведены некоторые основные различия между этими двумя элементами, которые помогут вам понять, как использовать эти элементы эффективно и надлежащим образом.

SVGCanvas
Векторный (состоит из фигур)Растровый (состоит из пикселей)
Несколько графических элементов, которые становятся частью дерева DOM страницыКаждый элемент похож на <img>. Диаграмму canvas можно сохранить в формате PNG или JPG
Можно модифицировать через CSS и JSМожно модифицировать только через JS
Хорошие возможности рендеринга текстаПлохие возможности рендеринга текста
Хорошая производительность при малом кол-ве объектов, но большой их поверхностьюХорошая производительность при большом кол-ве объектов, но малой их поверхностью
Хорошая масштабируемость. Может быть напечатан с высоким качеством в любом разрешении. Пикселизация не происходитПлохая масштабируемость. Не подходит для печати с более высоким разрешением. Может возникнуть пикселизация
etxt banner 480x320etxt banner 728x90etxt banner 120x600beget banner 480x320beget banner 728x90beget banner 120x600jivo banner 480x320jivo banner 728x90jivo banner 120x600

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

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

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

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

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…