Что такое SVG? Основы.

Поздравляю всех с Днём Победы! А сегодня я пишу первую статью из серии, в которой мы узнаем, что такое SVG и как его использовать.

SVG(Scalable Vector Graphic) - это язык для описания двумерной графики, основанный на XML. Данная технология постепенно набирает обороты, а связано это вот с чем:

• При изменении масштаба svg фигуры всегда перерисовываются, благодаря чему вы всегда будете видеть гладкое и красивое изображение без пикселизации
• Браузеру не нужно запрашивать картинку у сервера, т.к. он сам её рисует, следовательно, производительность повышается
• Можно стилизовать объекты с помощью CSS, как обычные html элементы, или с помощью JavaScript
• Можно редактировать или анимировать с помощью CSS и JavaScript
• Меньший размер

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

Для начала стоит отметить, что все наши фигуры должны быть в теге svg, а теперь давайте нарисуем линию. Для отображения линии служит тег line, который имеет следующие атрибуты:

• x1 - Начальная x координата
• x2 - Конечная x координата
• y1 - Начальная y координата
• y2 - Конечная y координата
• stroke-width - Ширина линии
• stroke - Цвет линии

Но что, если нам нужно нарисовать сразу несколько линий? Использовать несколько тегов line было бы не очень красиво. Для этого существует тег polyline.

У тега polyline есть атрибут points, где мы указываем координаты x и y через запятую, затем делаем пробел и пишем координаты следующей точки и так далее. Заметьте, что тут есть атрибут fill, в котором мы можем указать цвет в любом из форматов css, которым будет залито пространство между линиями. Если же вы хотите, чтобы пространство между линиями было пустым, то укажите значение none.

Перейдём к более сложным фигурам и нарисуем прямоугольник.

Для того, чтобы нарисовать прямоугольник, нужно использовать тег rect, где в атрибутах width и height указать ширину и высоту соотвественно, а остальные атрибуты вам уже знакомы и выполняют абсолютно те же функции, что и с линиями.

Переходим дальше и попробуем нарисовать круг

Для отрисовки круга служит тег circle и атрибуты cx, cy и r для задания координат центра круга и его радиуса.

Другой элемент - эллипс рисуется точно так же, как и круг, но там мы можем сами задавать радиусы по оси x и по оси y. Для его отрисовки служит тег ellipse

Если вам нужно выводить многогранные фигуры, такие как пятиугольник, то воспользуйтесь тегом polygon

Атрибут points у тега polygon работает так же, как и атрибут points у тега polyline.

Если объект очень сложный, то вы можете воспользоваться любым редактором векторной графики и нарисовать его там, а затем просто вставить вот таким образом

SVG поддерживается IE c 9 версии, Mozilla Firefox с 1.5, Google Chrome с 3.0 и оперой с 8.0.

На этом статья подошла к концу. Получилась она большой, но простой. В следующей мы продолжим изучать эту интересную технологию, а на этом всё. Удачи!