Base64 SVG ne s'affiche pas ? Une solution pratique et prête pour l'ingénierie

Base64 SVG ne s'affiche pas ? Une solution pratique et prête pour l'ingénierie

Ce problème apparaît tout le temps dans les projets réels :

• Votre img src="data:image/svg+xml;base64,..." semble valide, mais rien ne s'affiche.
• La même chaîne SVG fonctionne au même endroit et s'interrompt dans un arrière-plan CSS.
• Le bug est difficile à repérer lors de la révision du code, mais coûteux à déboguer.

Si cela vous semble familier, ce guide vous propose un chemin de correctif reproductible.

Pourquoi c'est difficile à déboguer

Le problème réside rarement dans une ligne brisée. Il s'agit généralement d'un problème de chaîne :

1. La source SVG est peut-être déjà invalide.
2. L'encodage peut ne pas correspondre au contexte cible.
3. HTML, CSS et JSON nécessitent chacun un comportement d'échappement différent.
4. Les règles de nettoyage et de rendu de sécurité varient selon l'environnement.

C'est pourquoi un SVG peut être rendu dans un contexte et échouer dans un autre.

Causes profondes les plus courantes (par ordre de priorité)

1. Mauvais préfixe MIME Utilisez data:image/svg+xml;base64, ou data:image/svg+xml,.

2. Flux d'encodage Base64 incorrect
   Le btoa(svg) direct peut être interrompu lorsque le SVG contient des caractères non-ASCII.

3. Échapper aux inadéquations entre les contextes
   Dans CSS en particulier, des caractères comme # et des guillemets peuvent interrompre le chargement.

4. Contenu SVG risqué ou bloqué
   Les scripts, les gestionnaires d'événements et les références externes peuvent être supprimés ou bloqués.

5. Structure SVG cassée
   Un viewBox manquant, un XML mal formé ou des balises non valides peuvent empêcher le rendu.

Comment nous résolvons ce problème dans SVGView

Au lieu de demander aux utilisateurs de deviner, nous le traitons en trois niveaux.

1) Couche d'entrée : valider avant l'importation

Dans src/lib/svg/import-handler.ts, nous :

• appliquer le type et la taille du fichier (jusqu'à 10 Mo)
• analyser et valider XML avec une racine <svg> requise
• renvoyer les erreurs d'analyse pour un diagnostic plus rapide

Cela supprime les entrées invalides plus tôt.

2) Couche de sécurité : désinfecter avant l'aperçu

Dans src/lib/svg/sanitizer.ts, on supprime :

• <script>
• Attributs du gestionnaire d'événements on*
• <foreignObject>
• références externes (href, xlink:href, src)

Cela améliore la sécurité et réduit les incohérences de rendu.

3) Couche de sortie : fournit à la fois un URI de données codé en Base64 et en URL.

Dans src/lib/svg/exporter.ts :

export function exportToDataUri(svg: string): string {
  const encoded = btoa(unescape(encodeURIComponent(svg)));
  return `data:image/svg+xml;base64,${encoded}`;
}

export function exportToDataUriEncoded(svg: string): string {
  const encoded = encodeURIComponent(svg);
  return `data:image/svg+xml,${encoded}`;
}

Vous pouvez donc :

• choisissez Base64 pour une compatibilité plus sûre
• choisissez l'encodage URL pour une sortie plus courte et lisible
• obtenez toujours le bon type MIME image/svg+xml

Quel encodage devriez-vous utiliser ?

1. Environnement cible inconnu : choisissez d'abord Base64
2. Besoin de chaînes plus courtes et lisibles : choisissez l'encodage URL
3. Utilisation en arrière-plan de CSS : préférez l'encodage URL avec un échappement approprié

Utilisez directement ces outils :

• SVG to Data URI
• SVG to CSS Background
• SVG Optimizer

Une liste de contrôle de dépannage reproductible

1. Confirmer le préfixe : data:image/svg+xml;base64, ou data:image/svg+xml,
2. Confirmez une racine <svg> et viewBox valides
3. Confirmer le flux d'encodage sécurisé UTF-8
4. Confirmez l'échappement pour les contextes CSS/JSON
5. Désinfecter avant l'exportation
6. Changez les encodages Base64 et URL pour effectuer une vérification croisée rapidement

FAQ

Pourquoi cela fonctionne-t-il dans <img> mais échoue-t-il dans CSS ?

Parce que l'analyse des chaînes CSS a des exigences d'échappement plus strictes. L'encodage URL y est généralement plus sûr.

Est-ce que passer à image/svg+xml est toujours suffisant ?

Non, MIME n'est qu'une partie. L'encodage, l'échappement et la validité de SVG sont toujours importants.

L'URI des données est-il toujours meilleur que les fichiers SVG externes ?

Non. L'URI de données est idéal pour les petits actifs en ligne. Les actifs volumineux ou fortement réutilisés sont souvent meilleurs en tant que fichiers externes.

Résumé

« Base64 SVG ne s'affiche pas » n'est pas un seul bug. C'est un problème de pipeline.

Une fois que vous avez standardisé le flux comme valider -> désinfecter -> double encodage -> correspondance de contexte, le problème devient prévisible et gérable.