Генератор бегущей строки SVG

x-init="restore()" >

Создайте простой движущийся текстовый баннер как самостоятельный SVG-файл. Инструмент создаёт его локально в браузере, повторяет ваш текст дважды и перемещает его справа налево. Поддерживается только текст: без логотипов, изображений, пользовательских шрифтов и прозрачного фона.

Создание анимированного текстового баннера SVG

  1. 1

    Введите текст баннера

    Введите сообщение для прокрутки. Созданный SVG повторит этот текст дважды.

  2. 2

    Настройте длительность

    Выберите от 3 до 40 секунд. Текст всегда движется справа налево.

  3. 3

    Настройте холст

    Выберите ширину от 300 до 1 600 px, высоту от 40 до 200 px и размер шрифта от 14 до 80 px.

  4. 4

    Выберите цвета и экспортируйте

    Выберите цвета текста и фона, затем скопируйте SVG-код или скачайте marquee.svg.

Что содержит экспортированный SVG

Скачивание представляет собой один SVG-файл. В нём есть жирный текст со стеком Inter, Arial, sans-serif, две соседние копии вашего текста, прямоугольник сплошного фона и элемент SVG <animate>. Анимация перемещает текст от правого края влево и повторяется бесконечно. В файле нет JavaScript и внешних ресурсов.

Совместимость и ограничения

Просмотрщики SVG и платформы по-разному обрабатывают анимацию. Браузер может воспроизводить баннер, а почтовый клиент, редактор документа или фильтр содержимого может показать статический текст, удалить SVG или его анимацию. Проверьте файл там, где собираетесь его использовать.

У редактора фиксированное движение справа налево, фиксированный жирный стек шрифтов и выбор сплошных цветов. Он не добавляет изображения или логотипы, не выбирает семейство или начертание шрифта, не добавляет метаданные доступности и не гарантирует бесшовный цикл для любой длины текста.

Конфиденциальность

Текст и настройки создаются локально в браузере. Во время двухшагового редактора они хранятся только в session storage этой вкладки, чтобы перейти к следующему шагу; они не отправляются на наши серверы и не попадают в URL. Нажмите Начать заново или закройте вкладку, чтобы удалить их.

Часто задаваемые вопросы

Нет. В файле есть элемент анимации SVG, а не JavaScript. Воспроизведение зависит от просмотрщика или платформы.

Нет, в этом редакторе текст всегда движется справа налево.

Нет. Предпросмотр, копирование и скачивание создаются в браузере. Между шагами во вкладке остаются только настройки сеанса.

Сопутствующие инструменты

Сжать GIF

Уменьшайте анимированные GIF прямо в браузере: снижайте размеры, оставляйте меньше кадров и настраивайте качество кодирования. Проверьте петлю перед скачиванием.

Палитра цветов Material Design

Просмотрите палитру цветов Material Design. Копируйте любой оттенок (от 50 до A700) в форматах HEX, RGB или HSL одним нажатием.

Конструктор тир-листов

Создайте приватный тир-лист из текста и локальных изображений. Настройте уровни, распределите элементы мышью или клавиатурой и экспортируйте в JSON, PNG или SVG.

Конвертер JPG в Word

Конвертируйте JPG-фото или скриншот текста в редактируемый документ Word. Инструмент считывает слова с помощью OCR и раскладывает их, чтобы вы могли переписать, отформатировать и переиспользовать их.

Генератор надписей граффити

Создавайте надписи в стилях тег, баббл, блок, трафарет, неон и вайлд. Настраивайте цвета и экспортируйте PNG или SVG прямо в браузере.

Конструктор флагов

Создайте в браузере простой собственный флаг 3:2 с шестью компоновками, цветами, текстом и символом. Скачайте SVG или PNG либо откройте диалог печати браузера.

Инструмент доступен на других языках