Взгляд на масштабируемую векторную графику (SVG)

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

Язык для описания двумерной графики в 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.

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

в конце концов он делает то же самое.

Посмотреть демо “Линия”

Ломаная

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

элемент имеет точки атрибуты, которые хранят все координаты, которые образуют линии.

Посмотреть демо “Ломаная”

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

Рисование прямоугольника также просто с этим элемент. Нам нужно только указать ширину и высоту, вот так:

Посмотреть демо “Прямоугольник”

Круг

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

Первые два атрибута, сх а также су определяют координату центра круга. В приведенном выше примере мы установили 102 как для Икс а также Y координата, если эти атрибуты не указаны, 0 будет принято в качестве значения по умолчанию.

Посмотреть демо “Круг”

Эллипс

Мы можем нарисовать эллипс с . Это работает очень похоже на круг, но на этот раз мы можем контролировать конкретно Икс радиус линии и Y радиус линии с гх а также чень атрибутов;

Посмотреть демо “Эллипс”

многоугольник

С Элемент, мы можем нарисовать несколько сторон фигур, таких как треугольник, шестиугольник и даже прямоугольник. Вот пример:

Посмотреть демо “многоугольник”

Использование векторного графического редактора

Как видите, рисовать простые объекты с помощью SVG в HTML довольно просто. Однако, когда объект становится более сложным, эта практика перестает быть идеальной и вызывает головную боль..

К счастью, как мы упоминали выше, мы можем использовать редактор векторной графики, такой как Adobe Illustrator или же Inkscape сделать работу. Если вы знакомы с этим программным обеспечением, несомненно, гораздо проще рисовать объекты с помощью их графического интерфейса пользователя, чем самостоятельно кодировать графику в тег HTML..

Если вы работаете с Inkscape, Вы можете сохранить векторную графику как обычный SVG, а затем открыть ее в текстовом редакторе кода. Теперь вы должны найти SVG-коды в файле. Скопируйте все коды и вставьте их в ваш HTML-документ.

Или вы также можете вставить .SVG подать через один из этих элементов; встраивать, IFrame а также объект, например;

Результаты в конечном итоге будут такими же.

В этом примере я использую этот Apple iPod с OpenClipArt.org.

Посмотреть демо “IPOD”

Поддержка браузера

Что касается поддержки браузеров, SVG очень хорошо поддерживается во всех основных браузерах, кроме IE8 и более ранних. Но этот вопрос можно решить с помощью этой библиотеки JavaScript, которая называется Raphael.js. Чтобы упростить задачу, мы будем использовать этот инструмент ReadySetRaphael.com для преобразования нашего SVG-кода в формат, поддерживаемый Raphael. Вот как.

Прежде всего, скачайте и включите Raphaël.js библиотека в ваш HTML-документ. Затем загрузите .SVG файл на сайт, скопируйте и вставьте сгенерированный код в следующую загрузку функция;

 window.onload = function () // код Рафаэля идет сюда

Внутри тело тег, поставьте следующее ДИВ с RSR атрибут id;

Вот и все, вы сделали. Проверьте пример по ссылке ниже.

Посмотреть демо “Рафаэль”

Последние мысли

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

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

Введение в SVG - W3 Schools
Независимое разрешение с SVG - Smashing Magazine
Почему вы не используете SVG? - NetTuts

Спасибо за чтение, и мы надеемся, что вам понравился этот пост.

Посмотреть демо
Скачать исходный код