Вы можете без труда рисовать любые простые автофигуры и даже поллинию. Но это далеко не все. Понять суть мне очень помог вот этот сайт. Советую вкратце ознакомиться, чтобы понимать как это работает.
Кроме рисования фигур и линий, можно еще заливать все это добро градиентом. А еще можно заливать даже саму линию или текст. Причем для этого не нужно писать горы кода. SVG сделает все сам. Вот интересный пример. Не буду показывать результат. Пускай будет сюрприз )) Создайте новый элемент на сцене с типом html и скопируйте в него код. Стоит обратить внимание, что имя element29gradient1 должно быть уникальным для всего html документа. То есть, в итоге, для всей страницы МД! Добиться уникальности не сложно. Впишите имя элемента а за ним имя или номер своего градиента.
Код: Выделить всё
<svg width="405" height="105">
<defs>
<linearGradient id="element29gradient1">
<stop offset="0%" stop-color="#ff0000" />
<stop offset="100%" stop-color="#0000ff" />
</linearGradient>
</defs>
<polyline points="5 20, 20 20, 25 10, 35 30, 45 10, 55 30, 65 10, 75 30, 80 20, 95 20" stroke="url(#element29gradient1)" stroke-width="7px" fill="none" />
</svg>
Я уже задумал добавить на элемент погоды значок направления ветра. 8 разных файлов с картинками для этого добавлять мне как то совсем не хотелось, а SVG позволит нарисовать все в коде самого элемента.