Что такое SVG

Оцените материал
(0 голосов)

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

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

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

Что такое SVG

 

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

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

  • x1 - Начальная x координата
  • x2 - Конечная x координата
  • y1 - Начальная y координата
  • y2 - Конечная y координата
  • stroke-width - Ширина линии
  • stroke - Цвет линии
<svg>
  <line x1="10" y1="10" x2="170" y2="170" stroke-width="1" stroke="#0f0">
</svg>

Просмотреть  пример

 

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

<svg>
  <polyline points="10,10 50,10 100,100 10, 100 10, 10" stroke-width="1" stroke="rgb(0,0,0)" fill="rgba(100,170,10,.3)">
</svg>

Просмотреть  пример

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

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

<svg>
  <rect width="300" height="100" fill="green" stroke-width="1" stroke="#000">
</svg>

Просмотреть  пример

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

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

<svg>
  <circle cx="100" cy="75" r="70" fill="rgba(10,70,10, .7)">
</svg>

Просмотреть  пример

 

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

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

<svg>
  <ellipse cx="100" cy="75" rx="50" ry="30" fill="rgba(10,70,10, .7)">
</svg>

Просмотреть  пример

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

<svg>
  <polygon points="50,50 100,100 150,100 100,50 150," fill="#ccc" stroke-width="1" stroke="rgb(0,0,0)">
</svg>

Просмотреть  пример

 

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

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

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

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

Прочитано 625 раз Последнее изменение Воскресенье, 19 февраля 2017 16:25
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Оставить комментарий

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

Поиск по сайту

Google+