Convertir SVG en data URI

Non. La conversion se fait entièrement dans votre navigateur. Le fichier ne quitte jamais votre appareil – aucun serveur ne peut le voir. Une fois la page chargée, l'outil fonctionne même hors ligne.

Minimal, sauf si un outil exige du base64. Le SVG reste lisible, les espaces sont condensés, les guillemets doubles deviennent simples et seuls les caractères qui cassent un url(« … ») CSS sont encodés : %, #, <, > et les accolades. C'est environ un tiers plus léger que le base64, et cela se compresse mieux au transfert. Le base64 est opaque mais fonctionne partout, y compris dans les vieux clients de messagerie.

En CSS : background-image: url("data:image/svg+xml,…"); ou comme mask-image. En HTML : <img src="data:…">. Entourez l'URL de guillemets doubles – la forme minimale utilise volontairement des guillemets simples à l'intérieur. L'outil « SVG en arrière-plan CSS » écrit la règle complète pour vous.

Le prologue XML, les commentaires et le DOCTYPE sont supprimés – ils n'ont aucun sens dans une URL data – et, sauf si vous désactivez « Optimiser d'abord », le SVG est minifié avec le même optimiseur que « Optimiser un SVG ». Les scripts et références externes sont toujours retirés.

Pour les grandes images. Un SVG intégré est téléchargé avec chaque feuille de style ou page qui le contient et ne peut pas être mis en cache séparément. Les data URI conviennent aux petites icônes de quelques kilooctets ; pour les grandes illustrations, liez plutôt le fichier.