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

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

SVG предлагает несколько преимуществ по сравнению с растровой графикой, вот некоторые из них:

Масштабируемость

Растровое изображение состоит из пикселей и при изменении масштаба теряет свое качество, в то время как векторная графика сохраняет свои пропорции независимо от масштаба.

Ускорение HTTP-запроса

SVG-файл может быть встроен непосредственно в HTML-документ при помощи тега svg, поэтому браузеру не нужно делать запрос. Это приводит к лучшей производительности и меньшей нагрузке на сайте.

Стилизация и сценарии

Вложения тега  svgнепосредственно в HTML-документ также позволяет нам легко установить графические стили при помощи  CSS . Мы можем изменить свойства объекта, такие как цвет фона, прозрачность границ, и т.д. Кроме того, мы также можем манипулировать графикой при помощи JavaScript .

Изображения могут быть анимированы и редактируемыми

SVG-объект может быть анимирован, если использовать анимацию элемента при помощи css или  JavaScript (JQuery).  SVG-объект может быть отредактирован любым текстовым редактором или графическим векторным редактором, например Inkscape  или Adobe Illustrator .

Меньший размер файла

SVG имеет меньший размер файла по сравнению с растровым изображением.

Создание простых фигур при помощи SVG

Согласно спецификации, мы можем создать некоторые базовые фигуры , такие как прямоугольники, круги, линии, эллипсы, ломаные линии и многоугольники при помощи SVG и для того, чтобы браузер для отображал SVG- графику, все эти графические элементы должны быть вставлены в тег <svg> ... </svg> <svg> ... </svg>тег. Давайте посмотрим на примеры ниже:

Линия

Чтобы нарисовать линию в SVG можно использовать  элемент <line>. Этот элемент используется для рисования одной прямой, поэтому она будет состоять только из двух точек, начало и конец.

<svg>
<line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

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

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

    style="stroke-width:1; stroke:rgb(0,0,0);"

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

Смотрите демо

Ломаная линия

Этот элемент похож на  <line>, но при помощи <polyline>элемента мы можем нарисовать несколько линий вместо одной. Вот пример:

<svg>
<polyline points="0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Смотрите демо

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

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

<svg>
<rect width="200" height="200" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Смотрите демо

Круг

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

<svg>
<circle cx="102" cy="102" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

В первых двух атрибутов, cxи  cyопределяют координаты центра круга. В приведенном выше примере, мы создали 102как для  xи  yкоординаты, если эти атрибуты не указаны, 0будет рассматриваться как значение по умолчанию.

Смотрите демо

Эллипс

Мы можем нарисовать эллипс при помощи тега <ellipse>. Принцип создания такой же, как с кругом, но на этот раз мы можем контролировать  x-радиус линии и y-радиус, а также  rxи ry атрибуты;

<svg>
<ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Смотрите демо

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

При помощи элемента <polygon>  мы можем сделать многосторонние формы, такие  как треугольник, шестиугольник и даже прямоугольник. Вот пример:

<svg>
<polygon points="70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Смотрите демо

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

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

К счастью, как мы уже упоминали выше, мы можем использовать векторный графический редактор, например Adobe Illustrator или Inkscape .

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

Вы можете вставлять .svg-файлы при помощи тегов embed, iframeи  object, например;

<object data="images/ipod.svg" type="image/svg+xml"></object>

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

*В этом примере мы используем изображение Apple iPod от OpenClipArt.org

Смотрите демо

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

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

Прежде всего, скачайте и подключите  Raphael.js-библиотеку к вашему HTML-документу. Затем загрузите .svgфайл на сайт, скопируйте и вставьте сгенерированный код в

window.onload=function() {
	//the Raphael code goes here
}

Внутри тега body, поместите следующие divс  ID-атрибутом rsr;

<div id="rsr"></div>

Вот и все, что вам нужно сделалать.

Смотрите демо

Заключительные мысли

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

Автор: hongkiat

Перевод: Дежурка

Возможно, вас также заинтересуют статьи:

• Полезные HTML5 онлайн-инструменты
• Бесплатные наборы веб-элементов
• Делаем адаптивный сайт при помощи Foundation
• Игры для дизайнеров
• Делаем регистрационную форму при помощи Jquery