Изображения

Генератор SVG-заглушек

Создайте SVG заданного размера с фоном, подписью и текстовым представлением Base64.

  • Быстро и бесплатно
  • Данные остаются у вас
  • Без регистрации
01

Исходные данные

На вашем устройстве

Обновляется при вводе

Данные и параметры инструмента
02

Результат

Здесь появится результат

Введите данные, результат появится автоматически

О генераторе SVG-заглушек

Генератор SVG-заглушек создает прямоугольное изображение с подписью по заданным размерам и цветам. Предпросмотр позволяет сразу проверить результат, а готовую заглушку можно скачать как SVG или скопировать в виде data URL с Base64.

Что такое SVG и для чего нужна заглушка

SVG описывает изображение XML-элементами, а не сеткой готовых пикселей. Прямоугольник и текст масштабируются в пределах координат, заданных viewBox. Заглушка помогает проверить пропорции карточки, места для обложки и поведение верстки до появления настоящего изображения.

Чем viewBox отличается от размера в пикселях

viewBox задает внутреннюю систему координат рисунка: начало области и ее ширину с высотой. Атрибуты width и height задают размер отображения. Поэтому SVG может содержать область 640 на 360 внутренних единиц, но занимать другую ширину на странице.

Пропорции определяются соотношением сторон. Для макета карточки сначала выберите нужное отношение ширины к высоте, а затем проверьте поведение CSS-контейнера. Размер заглушки не является проверкой того, как будущая фотография обрежется через object-fit.

Текст внутри векторного изображения

Подпись остается текстовым SVG-элементом. Ее внешний вид зависит от доступного шрифта, а не от встроенного набора контуров букв. Поэтому на другой системе могут измениться ширина надписи и расположение отдельных знаков.

Для проверки дизайна это обычно приемлемо, но для точного фирменного макета нужна другая подготовка шрифта или перевод текста в контуры. Этот генератор не выполняет такие операции и не подбирает контраст автоматически: цвет текста и фона следует оценить в самом предпросмотре.

Размеры, цвета и подпись

Укажите ширину и высоту от 1 до 8192, цвет фона и текста в HEX, подпись и размер шрифта. Если подпись пустая, отображаются размеры. Длинная подпись не переносится автоматически и может выйти за границы изображения: уменьшите шрифт или сократите текст, ориентируясь на предпросмотр.

Флажок «Фиксированные размеры» добавляет атрибуты width и height. Если его снять, останется viewBox, а размер отображения нужно будет задать средствами верстки. Соотношение сторон при этом сохраняется в координатах SVG.

SVG-файл или Base64

Выбор «Результат» меняет текстовое представление. Отдельные действия позволяют скопировать SVG, скопировать Base64 и скачать SVG без повторной генерации.

Data URL содержит MIME-префикс и закодированное содержимое, поэтому его можно использовать как значение src. Base64 увеличивает объем текста по сравнению с исходными байтами и не превращает SVG в растровую картинку. Для реального оформления проверьте шрифт на целевом устройстве: генератор использует sans-serif и не встраивает файл гарнитуры.