Как правильно пользоваться SVG?

К примеру надо сделать кнопки :
Наверно на svg это будет лучше , или :

откуда берут вот эти цифры ?:
5,135 30,5 55,135 80,5, 105,135 130,5, 155,135 180,5, 205,135 230,5, 255,135
я не знаю как правильно задать вопрос, но откуда берутся эти данные в поле polyline points ?
Нарисовал кнопку в inscape и каким образом её сделать так как на скрине ?
Строго не судите , я в svg Ноль

Ответ

откуда берут вот эти цифры ?:
Случай с polyline points самый простой. Тут просто задаются точки x,y.
polyline points="x1,y1 x2,y2 x3,y3 x4,y4 ...."
Пример:
Пример 1: Пример 2:
Можно использовать path для этих целей.
path = "M x,y L x1,y1 z"
M — moveto, обозначает начало новой линии — точку, с которой мы начинаем рисовать.
Z — closepath — замкнуть фигуру, при этом рисуется линия от текущей точки до начальной. Действие этой команды не зависит от регистра, Z и z сработают одинаково.
L — lineto — рисование линии.
Больше информации у yoksel
Пример с path

И еще одна полезная статья на хабре.