Что такое SVG

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

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

SVG - это  специальный язык для описания 2-ой графики, в основе которого лежит  XML. Эта технология очень быстро набирает обороты, и связано это вот с такими факторами:

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

Что такое SVG

 

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

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

  • x1 - Исходная  координата по оси х
  • x2 - Конечная  координата по оси х
  • y1 - Исходная   координата по оси по оси y
  • y2 - Конечная  координата по оси y
  • stroke-width - Ширина линии
  • stroke - Цвет линии
<svg>
  <line x1="20" y1="10" x2="150" y2="150" stroke-width="5" stroke="#000">
</svg>

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

 

А что, если вам надо  вдруг рисовать сразу не одну линию, а много  линий? Применять много тегов line одновременно как то  не очень разумно что ли. Вот как раз для этого и служит тег polyline.

<svg>
  <polyline points="20,20 50,10 150,200 10, 100 10, 10" stroke-width="5" stroke="rgb(0,0,0)" fill="rgba(100,180,20,.3)">
</svg>

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

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

Вот как можно нарисовать прямоугольник.

<svg>
  <rect width="500" height="300" fill="red" stroke-width="2" stroke="#fff">
</svg>

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

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

На очереди круг

<svg>
  <circle cx="200" cy="105" r="50" fill="rgba(10,70,10, .7)">
</svg>

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

 

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

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

<svg>
  <ellipse cx="150" cy="85" rx="60" ry="20" fill="rgba(10,90,10, .7)">
</svg>

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

Для многогранных фигур используется  тег polygon

<svg>
  <polygon points="60,60 150,100 150,120 100,50 150," fill="#555" stroke-width="2" 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 и Opera с 8.0. Итак в этом уроке мы свами разобрались что такое svg и разобрали как с помощью svg можно рисовать простые фигуры.

Прочитано 1142 раз Последнее изменение Четверг, 27 июля 2017 18:08
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

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

Google+