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

Question

К примеру надо сделать кнопки :

Наверно на svg это будет лучше , или :

<svg width="260" height="140">
<polyline points="5,135 30,5 55,135 80,5, 105,135 130,5, 155,135 180,5, 205,135 230,5, 255,135"
          fill="none" stroke="orangered" stroke-width="5" />

откуда берут вот эти цифры ?:

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 Ноль

В фотошопе можно сделать при нарезке и "Сохранить как web" или dreamweaver...обводите детали и сохраняете http://ru.stackoverflow.com/questions/513333 — Алексей Шиманский, Jun 12 '16 at 05:39
Алексей это же табле получится , не это не вариант , надо вообще в корне изучить svg , очень часто заказывают на этой технологии — , Jun 12 '16 at 05:42
Что? кто такой "Табле"? ......вот онлайн маппинг кстати http://www.image-maps.com/ — Алексей Шиманский, Jun 12 '16 at 05:46
при нарезке в фотошопе и при сохранение для web вёрстка сохранится в виде таблицы — , Jun 12 '16 at 07:13
Алексей а есть способы без он лайн ресурсов ? Ну к примеру самому ловить эти точки (в вопросе) и так далее — , Jun 12 '16 at 07:15
Вы пример смотрели выше? Там мячи с произвольной линией. Какая таблица? Это набор координат.... Произвольный набор. можете хоть каля-маля сделать и вензеля... Вы их можете спокойно взять из сохраненного файла....или по-вашему вот это http://ru.crazysquirrel.ru/tools/generators/map-area/ всё таблица?))) ......... Способы есть....они как минимум в том самом примере..если нужно что-то обвести по произвольной ломанной линии.........Плюс векторные программы CorelDRAW, Adobe Illustrator CS2, SVG-Edit и рисуете в них и сохраняете как svg — Алексей Шиманский, Jun 12 '16 at 07:24
Давайте продолжим обсуждение в чате. — , Jun 12 '16 at 07:26
Откуда берут цифры? Ну, вы же их откуда-то взяли. Полагаю, из Inkscape. Вот в нём и подобных редакторах обычно и берут. Знать о внутреннем устройстве разметки надо разве что для анимации. — , Jun 12 '16 at 07:51
ну я лично для примера взял из сети , а в инскапе у меня всё в base64 , не знаю почему так - но ... зделайте ответом _отмечу лучшим и решением — , Jun 12 '16 at 07:57
Base64? Вы в него растровую картинку запихнули, видимо? — , Jun 13 '16 at 15:12
нет , я нарисовал сразу в inscape и потом сохранил и открыл notepad++ а там не пойми что , потому я собственно и задал этот вопрос — , Jun 13 '16 at 21:06

score 13 · Accepted Answer · answered Sep 15 '16 at 06:16

откуда берут вот эти цифры ?:

Случай с polyline points самый простой. Тут просто задаются точки x,y.

polyline points="x1,y1  x2,y2  x3,y3   x4,y4 ...."

Пример:

Пример 1:
<svg width="500" height="200" >
  <polyline points="10,10 180,10 120,100 10,100 10,10"
          fill="none" stroke="orangered" stroke-width="5" />
</svg>
Пример 2:
<svg width="500" height="200" >
  <polyline points="10,10 180,10 120,100 10,100 10,10"
          fill="#018846" stroke-width="0" />
<polyline points="210,10 340,10 340,100 150,100 210,10"
          fill="#018846" stroke-width="0" />
</svg>

Можно использовать path для этих целей.

path = "M x,y  L x1,y1 z"

M — moveto, обозначает начало новой линии — точку, с которой мы начинаем рисовать.

Z — closepath — замкнуть фигуру, при этом рисуется линия от текущей точки до начальной. Действие этой команды не зависит от регистра, Z и z сработают одинаково.

L — lineto — рисование линии.

Больше информации у yoksel

Пример с path:

<svg width="500" height="200">
  <path stroke="orange" fill="#018846" stroke-width="0"
        d="M 10,10 L 180,10 L 120,100 L 10,100 z"/>
<path stroke="orange" fill="#018846" stroke-width="0"
        d="M 210,10 L 340,10 L 340,100 L 150,100 z"/>
</svg>

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

спасибо Леночка, я уже досконально изучил SVG с момента как задал этот вопрос , вы по прежнему Лучшая в моих глазах — , Sep 15 '16 at 14:54
Будет на случай, если кому-то понадобиться) Спасибо! — SVE, Sep 15 '16 at 15:31
читаю свои старые вопросы иногда с моего старого акка и аж ужасаюсь - — Резидент Казахстана, Apr 20 '20 at 02:57

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

1 Answers1