Перейти к содержанию
100% локально

Генератор фиктивных изображений

Создавайте фиктивные SVG-изображения с произвольными размерами, цветами и текстом — в виде SVG, data: URI или тега <img>.

0
Выходные данные

Генератор фиктивных изображений

Установите ширину и высоту, или выберите распространённое соотношение сторон — 16:9 или 4:3, и этот инструмент создаст фиктивное изображение прямо сейчас, готовое для макета, каркаса или заполнения пустого места в вёрстке, пока финальный графический файл ещё не готов. Инструмент использует SVG, поэтому изображение остаётся чётким при любом размере и масштабируется без растровой размытости.

Выберите цвета фона и текста, и либо оставьте по умолчанию размеры (например, «800×600»), либо напишите свой текст — название компонента, точку останова, что угодно, чтобы отличить один плейсхолдер от другого во время разработки. Шрифт и размер текста настраиваются, а скругление углов, сетка или диагональный крест дают изображению привычный вид плейсхолдера вместо простого серого прямоугольника.

Выберите формат результата: чистый SVG-код для сохранения в файл, data: URI с процент-кодированием или base64 для фонового изображения CSS или встроенного источника картинки, или полный тег img, который можно вставить прямо в HTML. Очень большие размеры или необычно длинный текст автоматически ограничиваются, чтобы вкладка не зависала и результат был действительно применим.

Всё создаётся локально в вашем браузере, как только вы измените опцию — не нужна работа на сервере, и ничто из того, что вы напишете, никуда не загружается. Скопируйте результат, загрузите как файл .txt или отправьте прямо в другой инструмент, например кодировщик SVG URL или конвертер цветов.

FAQ

Изображение обновляется при изменении параметров?
Да. Превью регенерируется в реальном времени при изменении ширины, высоты, цветов, текста или любого другого параметра.
Можно ли использовать результат как источник изображения?
Да. Выберите формат data: URI или base64 и вставьте результат прямо в атрибут src тега <img> или в CSS свойство background-image.
Что произойдёт, если установить соотношение сторон и высоту одновременно?
Соотношение сторон имеет приоритет: высота пересчитывается на основе ширины, чтобы изображение сохраняло точное соотношение.
Есть ли ограничение по размеру?
Ширина и высота ограничены 4000 px каждая, а чрезмерно длинный пользовательский текст отклоняется с сообщением о необходимости его сокращения, поэтому инструмент никогда не попытается создать неприменимо большое изображение.
Мои данные загружаются куда-нибудь?
Нет. Фиктивное изображение создаётся полностью в вашем браузере — ничего не отправляется на сервер.