Масштабируемая векторная графика (SVG) – руководство для начинающих

Векторная графика широко применяется в печатных СМИ. На веб-сайте мы также можем добавить векторную графику с помощью SVG или Scalable Vector Graphic. Ссылаясь на официальная спецификация на W3.orgSVG описывается как:

Язык для описания двумерной графики в XML. SVG допускает три типа графических объектов: векторные графические фигуры (например, пути, состоящие из прямых линий и кривых), изображения и текст.

Это было на самом деле с 1999 года и с 16 августа 2011 года он стал рекомендацией W3C, Тем не менее, SVG все еще значительно недоиспользуется, в то время как есть много преимуществ в использовании Vector, а не Bitmap для отображения графики или изображений на веб-сайте.

Преимущества SVG

С точки зрения предоставления графики на веб-сайтах, SVG предлагает несколько преимуществ по сравнению с Bitmap, некоторые из которых включают в себя:
Независимое разрешение
Растровая / растровая графика зависит от разрешения – он построен на пикселях. Графика будет выглядеть пиксельной, когда она изменяется с определенным уровнем масштабирования. Этого не происходит с векторной графикой, которая независимое разрешение в природе, поскольку изображение выражается математическим уравнением, которое делает его масштабируемым при любом уровне масштабирования при сохранении качества даже на Retina Display.
Сокращение HTTP-запроса
SVG может быть встроен непосредственно в HTML-документ с тегом svg, поэтому браузеру не нужно делать запрос для обслуживания графики. Это также приводит к повышению производительности загрузки сайта.
Стилизация и скриптинг
Встраивание непосредственно с тегом svg также позволит нам легко стилизовать графику с помощью CSS. Мы можем изменить свойства объекта, такие как цвет фона, прозрачность, границы и т. Д., Так же, как мы делаем с обычным тегом HTML. Точно так же мы можем также манипулировать графикой через JavaScript.
Может быть анимирован и отредактирован
Объект SVG можно анимировать, когда он использует элемент анимации или через библиотеку JavaScript, например, jQuery. Объект SVG также можно редактировать с помощью любого текстового редактора кода или графического программного обеспечения, такого как Inkscape (что бесплатно) или Adobe Illustrator,
Меньший размер файла
SVG имеет меньший размер файла по сравнению с Bitmap, который имеет похожее графическое представление.

Рисование основных фигур с помощью SVG

Согласно спецификации, мы можем нарисовать некоторые основные формы как прямоугольник, круг, линия, эллипс, полилиния и многоугольник с SVG, и чтобы браузер отображал графику SVG, все эти графические элементы должны быть вставлены в тег. Давайте посмотрим на примеры ниже для более подробной информации:
Линия
Чтобы нарисовать линию в SVG, мы можем использовать элемент. Этот элемент используется для рисования одной прямой линии, поэтому он будет состоять только из двух точек, начала и конца.

Как вы можете видеть выше, координата начальной точки линии выражается с помощью первых двух атрибутов x1 и x2, а координата конечной точки линии выражается с помощью y1 и y2.

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

style = “штрих-ширина: 1; штрих: rgb (0,0,0);”

в конечном итоге он делает то же самое.

Ломаная
Это почти похоже на , но с Элемент мы можем нарисовать несколько линий вместо одной. Вот пример: