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

Data URI — это не сетевой запрос

Сервисы заглушек удобны ровно до тех пор, пока не становятся неудобными: домен ограничивает частоту запросов, офисный прокси его блокирует, вы показываете демо в самолёте или сервис тихо меняет вывод, и половина ваших макетов сдвигается. Все эти сбои вызваны одной и той же причиной — заглушка хранится на чужом сервере.

У SVG data URI нет такой зависимости. Всё изображение — это строка в вашей разметке, поэтому оно отрисовывается одинаково офлайн, в почтовом клиенте, в статическом экспорте и на скриншоте, сделанном три года спустя. Это также не добавляет задержки: нет DNS-запроса, нет соединения, нет обратного пути. Для страницы с двадцатью заглушками при разработке эта разница очень заметна.

Используйте URL-кодирование, а не base64

Data URI, который выдаёт этот инструмент, закодирован в процентах, а не в base64. Оба варианта допустимы, но процентное кодирование — лучший выбор по умолчанию для SVG по двум причинам.

Первая — размер. Base64 увеличивает объём примерно на треть, тогда как процентное кодирование расширяет лишь горстку символов, которым действительно нужно экранирование, поэтому для SVG — который почти целиком состоит из ASCII — результат обычно получается короче. Вторая — читаемость: вы можете посмотреть на SVG с процентным кодированием в своей таблице стилей и всё равно понять, что это такое, подправить цвет или заметить опечатку. Блоб base64 нужно сначала раскодировать, чтобы он что-то значил.

Единственное, с чем нужно осторожно при процентном кодировании, — это одинарная кавычка, поэтому здесь она экранируется явно: значения CSS url() обычно заключаются в одинарные кавычки, и неэкранированная кавычка внутри SVG преждевременно оборвала бы значение.

Размеры, масштабирование и viewBox

Сгенерированный SVG содержит явные атрибуты width и height, а также соответствующий viewBox. Это сочетание выбрано не случайно. Ширина и высота дают браузеру внутренний размер, чтобы вёрстка не прыгала до отрисовки изображения, а viewBox позволяет тому же изображению чисто масштабироваться до любого размера, заданного в CSS.

Поскольку это вектор, подпись остаётся чёткой при любом масштабе — без размытого текста на дисплее высокой плотности и без отдельного ассета 2x. Если вы хотите, чтобы заглушка заполняла контейнер, задайте в CSS width: 100%; height: auto, и viewBox сохранит для вас соотношение сторон. Если же нужен фиксированный блок независимо от соотношения сторон, оставьте атрибуты как есть, и браузер их учтёт.