SVG в Base64 не отображается? Практическое решение для инженеров

SVG в Base64 не отображается? Практическое решение для инженеров

С этой проблемой в реальных проектах сталкиваются постоянно:

• Ваш img src="data:image/svg+xml;base64,..." выглядит корректно, но на экране ничего нет.
• Та же строка SVG работает в одном месте и ломается в background-image в CSS.
• Ошибку трудно заметить на ревью кода, но исправлять ее дорого.

Если эта ситуация вам знакома, это руководство поможет пройти понятный и повторяемый путь к исправлению.

Почему это сложно исправить

Проблема редко сводится к одной сломанной строке. Чаще это целая цепочка причин:

1. Исходный SVG может быть уже невалидным.
2. Кодировка может не соответствовать целевому контексту.
3. HTML, CSS и JSON каждый требуют разного поведения экранирования.
4. Правила очистки и рендеринга варьируются по окружению.

Вот почему один SVG может рендериться в одном контексте и ломаться в другом.

Наиболее распространенные корневые причины (по приоритету)

1. Неправильный MIME prefix
   Используйте data:image/svg+xml;base64, или data:image/svg+xml,.

2. Неправильный поток Base64 кодирования
   Прямой btoa(svg) может сломаться, когда SVG содержит не-ASCII символы.

3. Несоответствие экранирования по контекстам
   CSS background-image требует другое экранирование, чем <img>.

Решение SVGView

SVGView производит работающий Base64 SVG через несколько контекстов:

1. Проверка: убедитесь, что SVG валиден перед кодированием
2. Очистка: удалите любой небезопасный контент
3. Кодирование: произведите валидный data:image/svg+xml;base64, для контекста

Как использовать в SVGView

1. Откройте SVG Viewer
2. Вставьте SVG или загрузите его
3. Нажмите "Экспорт" и выберите "Data URI (Base64)"
4. Скопируйте результат и поместите в img src или background-image

Двойное кодирование (Base64) против некодированного

• Base64 (data:image/svg+xml;base64,...): лучше для <img> и хранения
• Raw (data:image/svg+xml,...): лучше для CSS, когда вы можете контролировать экранирование

Резюме

Проблема с SVG в Base64 обычно складывается из нескольких причин сразу. Подход SVGView прост: сначала проверьте файл, затем очистите его и только после этого кодируйте. Такой порядок заметно повышает шанс получить SVG, который стабильно работает в разных местах.