SVG Приклади

Спробуйте самі приклади

Наведені нижче приклади вбудовують код SVG безпосередньо в код HTML.

Це підтримується Firefox, Internet Explorer 9, Google Chrome, Opera та Safari.

SVG Приклади

SVG Основні фігури

Коло
Прямокутник
Прямокутник із непрозорістю
Прямокутник із непрозорістю 2
Прямокутник із закругленими кутами
Еліпс
Три еліпси один на одному
Два еліпси
Рядок
Багатокутник з трьома сторонами
Багатокутник з чотирма сторонами
Зірка
Інша зірка
Крива лінія
Інша крива лінія polyline
Шлях
Квадратична крива Безьє
Написати текст
Повернути текст
Текст на кількох рядках
Текст як посилання
Визначає колір лінії, тексту чи контуру (обведення)
Визначає ширину лінії, тексту чи контуру (stroke-width)
Визначає різні типи закінчень відкритого шляху (stroke-linecap)
Визначає пунктирні лінії (stroke-dasharray)

SVG Фільтри

feGaussianBlur - ефект розмиття
feOffset - зміщення прямокутника, а потім змішування оригіналу поверх зміщеного зображення
feOffset - розмити зміщене зображення
feOffset - зробити тінь чорною
feOffset - розглядайте тінь як колір
feBlend фільтр
Фільтр 1
Фільтр 2
Фільтр 3
Фільтр 4
Фільтр 5
Фільтр 6

SVG Градієнти

Еліпс із горизонтальним лінійним градієнтом від жовтого до червоного
Еліпс із вертикальним лінійним градієнтом від жовтого до червоного
Еліпс із горизонтальним лінійним градієнтом від жовтого до червоного та текст
Еліпс із радіальним градієнтом від білого до синього
Ще один еліпс із радіальним градієнтом від білого до синього

SVG Різне

Прямокутник, який постійно зникає протягом 5 секунд
Зростаючий прямокутник, який змінюватиме колір
Три прямокутники, які змінюють колір
Переміщення тексту вздовж шляху руху
Переміщення, обертання та масштабування тексту вздовж шляху руху
Переміщення, обертання та масштабування тексту вздовж шляху руху + зростаючий прямокутник, який змінюватиме колір
Обертові еліпси