Попробуйте-это самостоятельно Примеры
Приведенные ниже примеры вставлять код SVG прямо в HTML-коде.
Это поддерживается Firefox, Internet Explorer 9, Google Chrome, Opera и Safari.
SVG Примеры
SVG Основные фигуры
Круг
Прямоугольник
Прямоугольник с непрозрачностью
Прямоугольник с непрозрачностью 2
Прямоугольник с закругленными углами
эллипс
Три эллипсы друг на друга
Два эллипсы
линия
Многоугольник с тремя сторонами
Многоугольник с четырех сторон
Звезда
Еще одна звезда
полилиния
Еще одна ломаная
Путь
Квадратичная кривая Безье
Написать текст
Поворот текста
Текст на нескольких строках
Текст как ссылку
Определяет цвет линии, текст или контур (stroke)
Определяет ширину линии, текст или контур (stroke-width)
Определяет различные типы окончаний к открытому пути (stroke-linecap)
Определяет пунктирные линии (stroke-dasharray)
SVG Фильтры
feGaussianBlur - эффект размытия
feOffset - офсет прямоугольник, а затем смешать оригинал на верхней части изображения смещения
feOffset - размыть изображение смещения
feOffset - сделать тень черный
feOffset - рассматривать тень как цвет
FeBlend фильтр
Фильтр 1
Фильтр 2
Фильтр 3
Фильтр 4
Фильтр 5
Фильтр 6
SVG Градиенты
Эллипсом с горизонтальным линейным градиентом от желтого до красного
Эллипсом с вертикальным линейным градиентом от желтого до красного
Эллипсом с горизонтальным линейным градиентом от желтого до красного, и текст
Эллипс с радиальным градиентом от белого до синего
Другой эллипс с радиальным градиентом от белого до синего
SVG Разное
Прямоугольник , который неоднократно исчезают в течение 5 секунд
Растущий прямоугольник , который изменит цвет
Три прямоугольниками , которые меняют цвет
Перемещение текста вдоль траектории движения
Переместить, вращать и масштабировать текст вдоль траектории движения
Переместить, вращать и масштабировать текст вдоль траектории движения + растущий прямоугольник , который будет менять цвет
Вращающийся эллипсы