Aperçu / Images et graphismes / SVG vers PNG & Data URL
Images et graphismes 100 % dans le navigateur et hors ligne

SVG vers PNG & Data URL

Collez du code SVG, vérifiez l'aperçu en direct, exportez un PNG carré à la taille voulue et copiez le SVG en Data URI CSS ou en Data URI Base64.

Déposez ou choisissez un fichier ; les réglages modifient le résultat immédiatement.

Vos fichiers et données ne quittent jamais votre navigateur : rien n’est envoyé.

Saisissez le code SVG ou collez un fichier :

Aperçu SVG en direct

Exporter

Pixels (carré)

Le bouton « Copier le Base64 » ne copie pas seulement du Base64. Il copie l'URI entière, préfixe data: compris, et le bouton voisin fait de même pour la forme à encodage pourcentage. Voilà comment cet outil transforme un SVG en Data URI, ou en PNG carré.

Encodage pourcentage ou Base64 : ce que produit le code

« Copier le Data URI » donne data:image/svg+xml,..., avec en plus l'échappement des apostrophes et des guillemets. Pour du SVG, cette forme est souvent plus courte. « Copier le Base64 » allonge le texte d'environ un tiers et accepte aussi les caractères non ASCII. L'outil ne minifie pas le SVG.

Quand une Data URI évite une requête

Une petite icône dans une feuille de style arrive avec le CSS, sans fichier à part. Dans un e-mail HTML, elle peut survivre quand un client bloque les images liées, mais la prise en charge varie selon le client.

Un PNG toujours carré

Le dessin est peint dans un canvas de côté sur côté. Un SVG en largeur est donc étiré. Le fond reste transparent. Une taille vide ou invalide devient 512, et une décimale est tronquée. Les images, polices et feuilles de style externes du SVG ne sont pas chargées. Les très grandes tailles peuvent échouer selon la limite de canvas du navigateur.

Ce que devient votre code

L'encodage et le PNG se font dans votre navigateur. Un clic sur un bouton n'envoie aucune requête. L'aperçu est un élément image avec un Data URI et ajoute xmlns uniquement pour l'affichage. L'export PNG et le Data URI copié ne l'ajoutent pas. Les scripts et gestionnaires d'événements du code collé ne s'exécutent pas dans l'aperçu.

Les quatre gestes, dans l'ordre

  1. Collez le code SVG dans le champ. Un exemple s'y trouve au départ : un cercle bleu avec une étoile blanche.
  2. Vérifiez l'aperçu, posé sur un fond sombre en damier.
  3. Cliquez sur un des deux boutons de copie.
  4. Pour un PNG, saisissez une taille en pixels puis cliquez sur « Télécharger en PNG ». Si rien ne se télécharge, vérifiez l'attribut xmlns="http://www.w3.org/2000/svg" : sans lui, le navigateur ne charge souvent pas l'image, et aucun message n'apparaît.

Foire aux questions (FAQ)

C'est le code SVG écrit dans une URL qui commence par data:image/svg+xml. Le navigateur la lit comme un fichier, et vous pouvez l'utiliser dans le CSS ou une balise img sans requête supplémentaire.