Масштабируемая векторная графика (SVG): основы рисования

Масштабируемая векторная графика Изучение

В этой статье вы познакомитесь с основными концепциями, структурой документа и элементами рисования, используемыми в изображениях SVG.

Координатная сетка SVG

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

viewBoxАтрибут SVG определяет координаты, которые использует изображение. Следующие SVG-файлы будут выглядеть одинаково при масштабировании до одинакового размера:

  • viewBoxиз 0,0к 200,100строчке из 0,0к100,50
  • viewBoxиз 0,0к 300,150строчке из 0,0к150,75
  • А также viewBoxиз, 0,0чтобы 30,15с линией от 0,0до 15,7.5(доли единицы разрешено)

В отличие от математических графиков

В отличие от математических графиков, система координат SVG начинается в верхнем левом углу (обычно 0,0) с осью X, направленной вправо, и осью Y, направленной вниз. Таким образом, точка 100,200представляет 100 единиц справа от левого края и 200 единиц вниз от верхнего края.

Когда SVG оказывается, оно может быть дано widthи heightатрибуты или назначены размеры в CSS. Изображение будет растянуто или сжато в обоих направлениях, чтобы заполнить выделенное пространство. Однако SVG может заявить, что его соотношение сторон может быть сохранено, чтобы обеспечить единообразное масштабирование размеров.

XML-документ SVG

Изображение SVG — это XML-документ, который следует строгим соглашениям (закрывающие теги, атрибуты в кавычках и т. Д.). Когда в 1999 году были впервые разработаны SVG, файлы требовали объявления XML и DOCTYPE в верхней части документа над корневым элементом:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="https://www.w3.org/2000/svg">

  <!-- image data -->

</svg>

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

<svg xmlns="https://www.w3.org/2000/svg">

  <!-- image data -->

</svg>

xmlns Атрибут обязателен. Большинство браузеров позволяют опускать его, когда SVG встроен непосредственно в HTML, хотя это может привести к проблемам, если вы захотите позже манипулировать изображением:

<svg>

  <!-- image data -->

</svg>

К корневому элементу можно применить множество необязательных атрибутов, но наиболее часто используются следующие:

  • viewBox, чтобы установить размеры.

Прямоугольная область координат указывается как «minX minY width height». например, viewBox=»0 0 600 400″это поле 600по 400ширине с координатами в верхнем левом углу 0,0. Помните, что это абстрактное пространство; это не относится к пикселям, и ваши элементы чертежа не ограничиваются этими координатами.

  • preserveAspectRatio определяет, как масштабируется окно просмотра.

Есть много вариантов. Например, preserveAspectRatio=»xMidYMid meet»обеспечивает выравнивание середины окна просмотра SVG с серединой окна просмотра (окно браузера или HTML-элемент, содержащий SVG), а изображение соответствует доступному пространству при сохранении соотношения сторон.

  • heightиwidth установите внутренний размер изображения.
Читайте также:  Как добавить изображение или логотип на свой сайт

Например, при настройке width=»300″ height=»200″будет использоваться изображение 300по умолчанию в 200пикселях, если его размер не был задан с помощью CSS. Если ширина и высота заданы без установки a viewBox, предполагается, что количество единиц SVG соответствует этому размеру, то есть viewBox=»0 0 300 200″.

Корневой элемент может сопровождаться дополнительным заголовком и описание определяются с использованием titleи descэлементов. Базовый документ:

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
  <title>My First Scalable Vector Graphic</title>
  <desc>An experimental SVG from SitePoint.com</desc>

  <!-- drawing elements to go here -->

</svg>

Группировка элементов

Любой набор элементов (линии, круги, прямоугольники, текст и т. Д.) Можно сгруппировать с помощью …тегов. По сути, это похоже на группировку графических объектов в графическом пакете, чтобы ими можно было манипулировать как одним элементом.

Например, вы можете определить узел корневой группы, чтобы можно было управлять всем изображением с помощью JavaScript или CSS:

<g id="main">
  <!-- drawing elements to go here -->
</g>

Одна группа может иметь любое количество внутренних групп с вложенностью по мере необходимости.

Линии

Одиночная линия между двумя точками рисуется с помощью lineэлемента :

<line x1="10" y1="10" x2="100" y2="200"
stroke="#999" stroke-width="5" stroke-linecap="round" />

stroke-linecap Атрибут определяет линейный конечный эффект и принимает значения butt(по умолчанию), round, squareили inherit:

stroke-linecap Атрибут определяет линейный конечный

Полилинии

Полилинии определяют набор соединенных отрезков прямых линий:

<polyline points="580,10 560,390 540,200 520,390 400,390"
stroke="#c00" stroke-width="5" stroke-linecap="round"
stroke-linejoin="round" fill="none" />

stroke-linejoin Атрибут определяет строку-эффект присоединения и принимает значения miter(по умолчанию), round, bevelили inherit:

troke-linejoin Атрибут определяет строку-эффект

Полигоны

Полигоны похожи на полилинии, за исключением того, что полученная форма всегда будет закрытой:

<polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161"
stroke="#ff0" stroke-width="10" fill="#ff6" />

Прямоугольники

Квадратные или закругленные прямоугольники определяются с помощью rectэлемента :

<rect x="100" y="10" width="150" height="100" rx="10" ry="20"
stroke="#060" stroke-width="8" fill="#0f0" />

xИ yатрибуты определяют верхний левый угол. rxи ryукажите скругление углов по горизонтали и вертикали.

Круги

Круги определяются с помощью центральной точки и радиуса:

<circle cx="100" cy="300" r="80"
stroke="#909" stroke-width="10" fill="#f6f" />

Эллипсы

Эллипсы определяются с помощью центральной точки и двух значений радиуса:

<ellipse cx="450" cy="50" rx="80" ry="30"
stroke="#0cc" stroke-width="10" fill="#0ff" />

Текст

Базовый текст можно добавить с помощью textэлемента :

<text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text>

x и y атрибуты определяют нижнюю левую координату первого символа в строке, хотя text-anchorи dominant-baselineатрибуты предлагают больший контроль над размещением.

Читайте также:  Что такое обработка естественного языка? Последние достижения в этой области

Пути

Наконец, есть pathэлемент, который может имитировать любой из перечисленных выше базовых элементов. Обратитесь к разделу » Как создавать сложные пути в SVG » для получения более подробной информации.

Результат

Наш последний документ SVG содержит следующие элементы:

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
  <title>My First Scalable Vector Graphic</title>
  <desc>An experimental SVG from SitePoint.com</desc>
  <g id="main">
    <line x1="10" y1="10" x2="100" y2="200" stroke="#00c" stroke-width="5" stroke-linecap="round" />

    <polyline points="580,10 560,390 540,200 520,390 400,390" stroke="#c00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none" />

    <polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" stroke="#ff0" stroke-width="10" fill="#ffc" />

    <rect x="100" y="10" width="150" height="100" rx="10" ry="20" stroke="#060" stroke-width="8" fill="#0f0" />

    <circle cx="100" cy="300" r="80" stroke="#909" stroke-width="10" fill="#f6f" />

    <ellipse cx="450" cy="50" rx="80" ry="30" stroke="#0cc" stroke-width="10" fill="#0ff" />

    <text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text>
  </g>
</svg>

Приведенный выше код выглядит так:

Приведенный выше код выглядит так

Это простой пример, но размер файла меньше одного килобайта до оптимизации, минификации и сжатия. Эквивалентный сжатый PNG выше почти в пять раз больше, и не может быть масштабируются выше его родным 407по 274разрешению без потери качества.

Вам редко нужно рисовать SVG вручную, поскольку проще использовать графический пакет, такой как Illustrator, Inkscape, SVG-edit или Method Draw. Однако понимание того, как работают основные элементы SVG, может помочь вам оптимизировать изображения или создавать потрясающие изображения на сервере или в JavaScript.

Оцените статью
bestprogrammer.ru
Добавить комментарий