Как создать SVG-заглушку изображения с нужным размером и текстом

Для чего подходит SVG-заглушка

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

Такой вариант удобен, когда нужно проверить композицию страницы или заранее занять место изображения. Подпись может обозначать назначение блока, его размер или этап подготовки материала. Если параметры не задать, генератор использует стандартный холст 400×300, серо-бежевый фон #cccccc и тёмно-серый текст #333333.

Инструмент предназначен именно для создания временной графики, а не для подготовки полноценной иллюстрации. Поэтому результат стоит оценивать по размеру, читаемости подписи и соответствию фона макету, не ожидая фотографического или декоративного содержимого.

Как создать и проверить заглушку

Откройте генератор и задайте ширину и высоту будущей области. Оба параметра необязательны: без них применяются значения 400 и 300 соответственно. Для каждого измерения действует отдельный диапазон от 1 до 2000. Если введённое число выходит за границы, итоговое значение ограничивается ближайшей границей, поэтому размер за пределами этого диапазона не сохраняется.
Добавьте текст подписи, если он нужен. Подойдут, например, «Баннер», «Фото товара» или «1200 × 800». При передаче непустого текста он отображается внутри SVG. Если значение текста пустое или не задано, подпись формируется из итоговой ширины и высоты через знак умножения. Поэтому для холста 1200×800 без собственной подписи результат будет содержать обозначение 1200×800.
Выберите цвет фона и цвет текста. Если оставить эти поля без изменений, используются #cccccc для фона и #333333 для текста. Переданные значения применяются в создаваемой SVG-графике, поэтому контраст лучше проверить на фоне страницы, где будет размещена заглушка.
Запустите создание результата после проверки параметров. Успешно поддерживаются стандартный вариант, пользовательские размеры и вариант с собственной подписью. В результате формируется SVG-графика с указанными параметрами.
Если нужен не отдельный файл, а встроенное представление, используйте выданные данные изображения. Они начинаются с префикса данных SVG и представляют созданную SVG-графику в строковом виде. Это не публичный адрес изображения: результат следует рассматривать как встроенное представление данных, а не как ссылку на размещённый файл.

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

Как читать результат и понимать ограничения

Главный результат представляет собой SVG-заглушку, где размеры, цвета и отображаемая подпись соответствуют обработанным параметрам. Размеры нужно понимать как эффективные: введённые значения могут быть приведены к диапазону от 1 до 2000 независимо для ширины и высоты. Например, слишком большая ширина не повлияет на высоту, если высота была задана отдельно.

Пустая подпись не означает отсутствие текста в результате. В этом случае используется обозначение из эффективных размеров, соединённых знаком умножения. Это удобно для нейтрального макета, но неподходяще, если блок должен показывать конкретное название или пояснение.

Введённый текст отображается не как необработанная разметка: перед добавлением в SVG и альтернативный текст изображения специальные символы экранируются. Поэтому символы вроде угловых скобок будут обработаны как отображаемый текст, а не как элемент разметки.

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

Пример. Для карточки товара задайте ширину 640, высоту 360, подпись «Фото товара» и спокойный светлый фон. Проверяемая форма результата: SVG-заглушка размером 640×360 с указанной надписью, выбранным фоном и цветом текста; при запросе встроенного варианта дополнительно появляется строковое представление с префиксом данных SVG.

Практический пример

Для карточки товара требуется временное изображение размером 640×360 с подписью «Фото товара».

Для карточки товара задайте ширину 640, высоту 360, подпись «Фото товара» и светлый фон, затем запустите создание результата.

SVG-заглушка 640×360 с подписью «Фото товара», выбранным фоном и цветом текста; встроенный вариант начинается с префикса данных SVG.

Ограничения

Это временная SVG-графика, а встроенное представление данных не является публичным URL. Значения ширины и высоты за пределами диапазона от 1 до 2000 не сохраняются как введённые.

Частые ошибки

Если вместо нужной подписи появилась запись с размерами, текстовое поле осталось пустым или получило ложное значение. Введите непустую подпись и проверьте итоговые ширину и высоту; если размер выходит за диапазон от 1 до 2000, учитывайте, что он будет ограничен этим диапазоном.

Частые вопросы

Можно ли добавить собственный текст на изображение-заглушку?

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

Какие размеры поддерживаются?

Размер можно указать отдельно для каждой стороны. Ширина и высота по умолчанию равны 400 и 300, а итоговое значение каждой стороны ограничивается диапазоном от 1 до 2000.

Будет ли результат ссылкой на опубликованное изображение?

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