Преобразовать Data URI обратно в SVG: безопасно

Преобразовать Data URI обратно в SVG

SVG Data URI удобен для маленьких inline-иконок в HTML или CSS. Но если у вас осталась только длинная строка data:image/svg+xml..., восстановление редактируемого SVG требует аккуратности.

Безопасное правило простое: разделите строку по первой запятой, декодируйте только payload и проверьте SVG перед сохранением. Руководство опирается на обсуждение Stack Overflow Converting a data URI back to SVG.

Определите формат

data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...
data:image/svg+xml,%3Csvg%20xmlns%3D%22http...

До запятой находятся MIME-тип и кодировка. После запятой находится закодированное содержимое SVG.

Декодировать Base64

function dataUriBase64ToSvg(dataUri) {
  const [, payload] = dataUri.split(",", 2);

  if (!payload) {
    throw new Error("Invalid SVG Data URI");
  }

  return new TextDecoder().decode(
    Uint8Array.from(atob(payload), (char) => char.charCodeAt(0)),
  );
}

TextDecoder лучше сохраняет UTF-8 текст, символы и метаданные, чем предположение о чистом ASCII.

Декодировать URL encoding

function dataUriEncodedToSvg(dataUri) {
  const [, payload] = dataUri.split(",", 2);

  if (!payload) {
    throw new Error("Invalid SVG Data URI");
  }

  return decodeURIComponent(payload);
}

Такой формат часто встречается в CSS backgrounds, потому что для простых иконок он может быть короче и понятнее.

Универсальный декодер

function dataUriToSvg(dataUri) {
  const [header, payload] = dataUri.split(",", 2);

  if (!header?.startsWith("data:image/svg+xml") || !payload) {
    throw new Error("Expected an SVG Data URI");
  }

  if (header.includes(";base64")) {
    return new TextDecoder().decode(
      Uint8Array.from(atob(payload), (char) => char.charCodeAt(0)),
    );
  }

  return decodeURIComponent(payload);
}

После декодирования проверьте наличие корневого <svg> и корректный XML parsing.

Лучшие практики

Проверьте восстановленный XML.
Удалите scripts, event handlers, внешние ссылки и foreignObject.
Проверьте viewBox, размеры и clipping.
Откройте результат в SVG Viewer.
Создайте новый Data URI через SVG to Data URI.

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

Декодировать всю строку вместо payload.
Применять Base64 к URL-encoded SVG.
Использовать недоверенный SVG без sanitization.
Забывать, что CSS, HTML и JSON требуют разного escaping.

SVGView workflow

Декодируйте Data URI, вставьте SVG в SVG Viewer, очистите markup через SVG Sanitizer, оптимизируйте в SVG Optimizer и экспортируйте заново в SVG to Data URI.

Преобразовать Data URI обратно в SVG: безопасно