Reconvertir un Data URI en SVG editable : guide fiable et sur

Reconvertir un Data URI en SVG editable

Les SVG Data URI sont pratiques pour integrer de petites icones dans HTML ou CSS. Ils deviennent moins agreables lorsque vous heritez d'une longue chaine data:image/svg+xml... et que vous devez retrouver un SVG modifiable.

La methode fiable consiste a separer la chaine au premier caractere virgule, decoder uniquement la charge utile, puis valider le SVG avant de l'enregistrer. Ce guide s'appuie sur la discussion Stack Overflow Converting a data URI back to SVG.

Reconnaitre le format

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

Avant la virgule se trouvent le type MIME et l'encodage. Apres la virgule se trouve le contenu SVG encode.

Decoder 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 protege mieux les textes UTF-8, les symboles et les metadonnees que les conversions ASCII rapides.

Decoder l'encodage URL

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

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

  return decodeURIComponent(payload);
}

Cette variante est frequente dans les arriere-plans CSS, car elle reste souvent plus courte et plus lisible.

Decodeur universel

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);
}

Ensuite, verifiez que le resultat contient une racine <svg> et qu'il peut etre analyse comme XML.

Bonnes pratiques

Valider le XML decode.
Supprimer scripts, gestionnaires d'evenements, references externes et foreignObject.
Controler viewBox, dimensions et recadrage.
Ouvrir le resultat dans SVG Viewer.
Reexporter avec SVG to Data URI si necessaire.

Erreurs courantes

Decoder toute la chaine au lieu de la partie apres la virgule.
Appliquer Base64 a un SVG encode en URL.
Reutiliser un SVG non fiable sans nettoyage.
Oublier que CSS, HTML et JSON n'echappent pas les caracteres de la meme facon.

Workflow SVGView

Decodez le Data URI, collez le SVG dans SVG Viewer, nettoyez-le avec SVG Sanitizer, optimisez-le via SVG Optimizer, puis recreez une Data URI propre avec SVG to Data URI.

Reconvertir un Data URI en SVG editable : guide fiable et sur