Comment créer un SVG avec Claude qui intègre une image PNG en 2026

Un logo en PNG, un graphique vectoriel propre, et une seule envie : les réunir dans un seul fichier SVG sans ouvrir un logiciel de design. Depuis le lancement de Claude Design le 17 avril 2026, demander ce montage à une IA est devenu trivial. Claude écrit le code SVG, vous y glissez votre image PNG encodée, et le tout reste net à toutes les tailles. Reste à savoir où le PNG vient se loger, quand l’embarquer et quand garder un fichier externe.

La réponse courte : pour intégrer une image PNG dans un SVG avec Claude, on encode le PNG en base64, puis on l’insère dans une balise image du SVG via une data URI. Claude génère ce code directement dans un artifact. L’encodage base64 alourdit le fichier d’environ 33 % (DebugBear, 2026).

Temps de lecture : 8 min

Qu’est-ce qu’un SVG intégrant une image PNG, et pourquoi le créer avec Claude ?

Un SVG intégrant une image PNG est un fichier vectoriel qui embarque une image matricielle, le PNG, à l’intérieur de son code, via une balise image et une data URI en base64. Le résultat tient dans un seul fichier, à la fois net et autoportant.

SVG vectoriel, PNG matriciel : deux logiques opposées

Le SVG décrit des formes par des coordonnées : il se redimensionne sans perte. Le PNG, lui, stocke des pixels. Sa version 3.0 a été publiée le 24 juin 2025, sous la norme ISO/IEC 15948.

Mélanger les deux a du sens quand un visuel vectoriel doit afficher une photo ou un logo détaillé. La balise image du SVG sert alors de fenêtre où vient se poser le PNG, sans casser la netteté du reste.

Le PNG reste imbattable pour les images riches en détails, comme une photographie ou une capture d’écran, là où le SVG excelle sur les aplats, les icones et le texte. Combiner les deux revient à garder le meilleur des deux mondes dans un seul document : la précision vectorielle pour l’habillage, le rendu fidèle pour le contenu visuel. C’est exactement ce qu’attend une carte, un badge ou une vignette produit.

Pourquoi confier ce montage à Claude

Claude n’a pas de modèle texte-vers-image natif : il ne dessine pas une photo. Mais il écrit un code SVG propre et l’affiche en direct dans un artifact, fonctionnalité disponible sur tous les forfaits payants depuis avril 2026 (Anthropic).

Vous décrivez la mise en page, vous fournissez le PNG, et l’assistant assemble le fichier. L’outil Claude Design pousse la logique plus loin avec un canevas visuel dédié au vectoriel.

L’intérêt est aussi pratique : aucune bascule entre un éditeur d’image et un éditeur de code. Vous itérez en langage naturel, vous demandez d’agrandir le titre, de changer une couleur ou de déplacer le PNG, et le fichier se met à jour en quelques secondes dans le même panneau. Cette boucle courte fait gagner un temps réel sur les visuels simples, là où un aller-retour avec un logiciel classique coûtait plusieurs minutes.

Quelle méthode pour encoder le PNG et l’insérer dans le SVG ?

La méthode tient en trois gestes : convertir le PNG en base64, l’insérer dans une balise image via une data URI, puis demander à Claude le code SVG complet. Aucune ligne n’est à écrire à la main.

Encoder le PNG en base64

Le base64 transforme les octets binaires du PNG en texte sûr pour du code. En ligne de commande, une seule instruction suffit : openssl base64 -in logo.png -out logo.b64. Un convertisseur web fait la même chose en deux clics.

Le but : obtenir une longue chaîne de caractères que le SVG, qui est un format texte, accepte sans broncher. Cette chaîne devient la source de l’image.

Une précaution utile : retirez les retours à la ligne de la chaîne base64 avant de l’insérer. Certains outils la coupent toutes les soixante-seize colonnes, ce qui peut perturber des lecteurs stricts. Une chaîne continue, sur une seule ligne, passe partout sans surprise. Vérifiez aussi que le fichier de départ est bien un PNG, et non un JPEG renommé, sous peine d’un préfixe de type erroné.

Insérer la data URI dans la balise image

La chaîne s’insère dans une balise image du SVG, préfixée par le type de fichier. La structure attendue est data:image/png;base64,..., placée dans l’attribut href de la balise. La spécification de cet élément est documentée chez MDN.

Pour la compatibilité avec d’anciens lecteurs, on double souvent l’attribut href par xlink:href. Les deux pointent vers la même data URI. Le PNG s’affiche alors comme un calque dans le SVG.

Faut-il embarquer le PNG en base64 ou le référencer en externe ?

Tout dépend du poids du PNG. Embarquer évite une requête réseau et garde un fichier unique, mais gonfle le code. Référencer reste léger mais ajoute une dépendance externe. Le bon choix se joue autour de quelques kilooctets.

Le coût du base64 : environ 33 %

Chaque tranche de 3 octets devient 4 caractères : l’encodage base64 ajoute près de 33 % au poids du fichier (DebugBear, 2026). La compression gzip ou brotli du serveur ramène ensuite ce surcoût réel autour de 5 à 10 %.

Ce surcoût ne pénalise donc que les gros fichiers. Pour une petite icone de quelques kilooctets, il reste invisible à l’usage et largement compensé par l’absence de requête réseau. Le vrai arbitrage porte sur la mise en cache et le nombre de pages où l’image apparaît, pas sur les octets bruts du code. Un visuel répété sur tout un site gagne presque toujours à rester externe.

Le seuil pratique des 10 kilooctets

Sous une dizaine de kilooctets, le gain d’une requête HTTP évitée l’emporte sur le surpoids. Au-delà, un PNG référencé en externe et mis en cache reste plus rapide, surtout sur les pages vues plusieurs fois.

Côté HDVMA : construire votre solution IA sur vos données réelles.

Quels pièges éviter pour un SVG plus PNG fiable en production ?

Trois erreurs reviennent souvent : un PNG trop lourd, un attribut href mal formé, et un rendu non testé. Chacune se corrige avant la mise en ligne, en quelques minutes.

Poids, attribut href et compatibilité

Un PNG très volumineux embarqué en base64 peut faire échouer le rendu dans certains éditeurs vectoriels, dont d’anciennes versions d’Inkscape qui affichent une croix rouge. Le navigateur, lui, ouvre le fichier sans problème.

Vérifiez aussi le préfixe de la data URI : image/png et non image/jpeg. Une erreur de type bloque l’affichage en silence.

Pensez enfin à fixer une largeur et une hauteur sur la balise image. Sans ces attributs, certains navigateurs calculent mal la place réservée au PNG, et le visuel se retrouve déformé ou tronqué au chargement. Un attribut viewBox cohérent sur le SVG complète le réglage et garantit un cadrage stable, quelle que soit la taille d’affichage finale.

Tester, optimiser, puis déployer

Compressez le PNG avant l’encodage, redemandez à Claude un SVG allégé si le code dépasse plusieurs centaines de kilooctets, testez le rendu dans deux navigateurs, puis exportez le fichier en production. Validez enfin l’affichage sur mobile avant toute publication.

Questions fréquentes sur le SVG avec image PNG et Claude

Qu’est-ce qu’un SVG qui intègre une image PNG ?

Un SVG intégrant une image PNG est un fichier vectoriel qui embarque une image matricielle, le PNG, à l’intérieur de son code, via une balise image et une data URI en base64. Le fichier reste unique et autoportant : il contient à la fois les formes vectorielles nettes et la photo ou le logo en pixels. C’est pratique pour distribuer un visuel complet sans dépendre d’un fichier image séparé.

Faut-il forcément encoder le PNG en base64 ?

Pour embarquer le PNG dans le SVG, oui : l’image matricielle doit être convertie en base64, le seul format texte que le code SVG accepte dans une data URI. L’alternative consiste à référencer le PNG par une URL externe dans la balise image, sans encodage. L’encodage alourdit le fichier d’environ 33 % (DebugBear, 2026), mais évite une requête réseau supplémentaire. Le choix dépend du poids de l’image.

Claude peut-il générer une image PNG lui-même ?

Non. Claude ne produit pas d’images matricielles comme des photos, faute de modèle texte-vers-image natif. En revanche, il écrit du code SVG propre et l’affiche dans un artifact depuis 2024. Pour intégrer un PNG, vous fournissez l’image, Claude l’encode en base64 et l’insère dans le SVG. Pour une vraie photo générée, il faut un outil externe relié par un serveur MCP.

Un SVG contenant un PNG s’affiche-t-il partout ?

Dans les navigateurs récents, oui : Chrome, Firefox et Safari lisent sans souci une data URI base64 dans une balise image. Certains éditeurs vectoriels, comme d’anciennes versions d’Inkscape, échouent sur les PNG embarqués très volumineux. Pour une compatibilité maximale, gardez le poids du PNG bas, ajoutez l’attribut xlink:href en secours, et testez le rendu dans deux environnements avant publication.

Diag IA offert — 30 min
Discuter de votre projet
Parler à Eric