SVG vers PNG

Comment fonctionne la conversion SVG vers PNG dans le navigateur ?

Le SVG est un format vectoriel : le graphique est stocké comme description mathématique (chemins, cercles, polygones, couleurs), pas comme grille de pixels. Le PNG en revanche stocke chaque pixel explicitement. Au passage, le navigateur doit rendre le SVG à une taille de pixels concrète — le processus de rastérisation.

L’outil utilise la Canvas API, un standard web nativement disponible dans tout navigateur evergreen. Trois étapes :

SVG (markup texte)
    ↓
[1] Parse viewport : lire width/height ou viewBox
    ↓
[2] Décodage image navigateur : charger SVG via Blob URL en <img>
    ↓
[3] Rendu canvas : drawImage(svg, 0, 0, targetW, targetH)
    ↓
[4] toBlob('image/png') : encoder données pixel en PNG
    ↓
PNG (1×, 2×, 3× ou largeur propre)

Vecteur-vers-raster est sans perte tant que la résolution cible est ≥ la plus petite taille de détail visible. Pour des lignes très fines dans le SVG, il peut aider de choisir un DPI plus élevé.

Export Multi-DPI — Pourquoi @1x, @2x, @3x en un clic ?

Les icônes d’app et Asset Catalogs sur iOS et Android suivent une convention fixe :

• @1x — la taille nominale (par ex. 60×60 px pour un slot d’icône iOS)
• @2x — affichage Retina, double densité de pixels (120×120 px)
• @3x — mobile high-DPI comme iPhone Pro Max (180×180 px)

Qui tire des icônes de SVG avait traditionnellement besoin de trois passages d’export séparés à trois tailles différentes. C’est de l’overhead de workflow — surtout quand vous avez un set d’assets complet pour plusieurs icônes.

Le bouton Multi-DPI fait de chaque SVG les trois PNG en un clic, correctement nommés avec suffixes App Store :

hero.svg → [email protected] + [email protected] + [email protected]

Dans le ZIP, les trois fichiers sont directement prêts pour import dans Xcode Asset Catalogs, dossiers Android drawable-*dpi et plugins d’assets Figma.

Préservation de l’alpha — qu’est-ce que cela signifie techniquement ?

Beaucoup d’outils promettent des « fonds transparents » et livrent des PNG qui montrent quand même une bordure blanche ou grise dans Photoshop ou Figma. Cela arrive quand le rasterizer remplit le canvas avant le rendu avec une couleur (par ex. pour compatibilité JPG) ou quand les valeurs alpha sont arrondies à l’encodage.

Cet outil démarre le canvas dans son état par défaut : chaque pixel a dès le départ alpha 0 (entièrement transparent). Quand vous mettez le fond sur « Transparent », la surface n’est pas préremplie — le chemin de code sort tôt avant l’appel à fillRect(). Ce n’est qu’ensuite que le SVG dessine ses chemins. Les pixels qu’aucun élément SVG ne touche conservent leur valeur alpha 0 ; les pixels avec bords anti-aliasés conservent leurs valeurs alpha intermédiaires exactement.

Le résultat est vérifiable :

• Dans Photoshop/Affinity Photo, le motif damier montre les pixels transparents.
• Dans Figma, la surface de frame sous l’image est visible.
• Dans le navigateur, vous le reconnaissez en posant le PNG sur un <div> coloré.

Pour « Blanc » ou « Couleur propre », la surface est remplie consciemment — sensé pour print, pièces jointes e-mail ou maquettes sur fonds colorés.

Quand transparent, quand blanc, quand couleur propre ?

Choisir transparent quand :

• le PNG est sur fond coloré (web, app, jeux de cartes, images OG)
• l’icône doit rester visible dans un layout dark mode
• vous retouchez l’image après dans Photoshop et avez besoin d’un bord doux

Choisir blanc quand :

• le PNG atterrit sur papier imprimé
• il est envoyé en pièce jointe e-mail, où Outlook 2010+ rend parfois la transparence en fond noir
• il vient sur une diapo dans une présentation Office

Choisir couleur propre quand :

• un fond de branding est obligatoire (logo sur couleur de marque)
• le PNG atterrit sur une couleur de fond connue de la page cible et les bords anti-aliasés correspondent alors proprement
• vous simulez des négatifs photo ou fonds de bureau

Le toggle live preview montre l’asset sur fond clair et sombre — vous reconnaissez ainsi avant le téléchargement si les bords anti-aliasés du SVG conviennent à votre contexte cible.

Qu’est-ce qui distingue cet outil des convertisseurs en ligne ?

La plupart des convertisseurs SVG-vers-PNG librement accessibles suivent un schéma similaire : téléversement de fichier → traitement serveur → téléchargement. Ce modèle a trois inconvénients :

1. Confidentialité : le SVG quitte votre ordinateur. Pour logos, assets de marque, designs internes ou matériel client, c’est un vrai problème.
2. Caps de fichiers : le free-tier finit la plupart du temps à 25–100 fichiers. Qui veut convertir 80 icônes pour un dossier Android-Drawable doit acheter premium ou travailler par vagues.
3. Single-DPI : à peine un convertisseur fait 1×+2×+3× en une étape — tous forcent plusieurs passages.

Cet outil fait les trois points autrement :

• Pure-client — le fichier reste dans l’onglet, vérifiable dans le panneau réseau.
• Pas de cap de fichiers — la seule limite est votre mémoire navigateur.
• Multi-DPI en un clic — le schéma App Store est produit automatiquement avec suffixes corrects.

Quelles lacunes assumées a cet outil ?

Nous construisons un convertisseur SVG-vers-PNG, pas un outil vectoriel couteau-suisse. Ce qui n’est volontairement pas inclus :

• Optimisation SVG avant export (simplification de chemin, nettoyage de path, strip de métadonnées) — appartient à notre outil optimiseur SVG séparé, qui fonctionne complémentairement.
• Multi-output JPG/WebP/AVIF — la page maintient le scope sur PNG. Pour d’autres formats il y a bild-format-konverter.
• Conversion d’animation en APNG/WebP animé — la Canvas API ne rend que le frame de départ, les SVG animés (SMIL, CSS) sont hors scope.
• Fonctions d’édition — pas de color swap, pas d’édition de chemin, pas de re-layout. C’est le territoire des logiciels de retouche.
• API serveur ou convertisseur bulk URL — casse la promesse pure-client.
• Login ou cloud-save — l’outil ne stocke rien. Si vous fermez l’onglet, le résultat est perdu.

L’outil fait une chose bien et indique clairement où est la limite.

Quels outils d’image sont apparentés ?

Autres outils de l’écosystème kittokit qui conviennent aux workflows SVG :

• Optimiser SVG — nettoyer les chemins SVG et retirer les métadonnées avant l’export PNG.
• Compresser PNG — réduire ensuite le PNG produit sans perte ou avec perte.
• Convertir le format d’image — PNG vers WebP ou AVIF pour livraison web ; tous deux à qualité égale plus petits que PNG.