SVG Viewer — Aperçu, zoom et inspecteur viewBox

Prévisualisez votre SVG sur fond clair, sombre ou quadrillé, puis inspectez width, height et viewBox sans quitter le navigateur.

Chargement…
SVG viewer — guide aperçu & inspection
Prévisualisez un SVG collé avant mise en prod, comparez sa lisibilité sur différents fonds et inspectez les problèmes de viewBox sans ouvrir un outil design.

Notes développeur

• Très pratique comme contrôle visuel avant optimize, resize ou JSX. • Le mode quadrillé aide à repérer les marges transparentes inutiles. • Width, height et viewBox sont lus directement sur le <svg> racine. • La V1 reste centrée sur l’aperçu et l’inspection, pas sur un workflow avancé d’export.

Quand utiliser cet outil

• Prévisualiser un SVG design handoff avant intégration. • Vérifier qu’une icône reste lisible sur fond sombre. • Contrôler width/height/viewBox avant une correction responsive. • Repérer des marges transparentes autour d’un logo ou d’un badge.

Exemples

Aperçu du logo FastMinify sur fonds clair et sombre

Entrée

<!-- Chargez l'exemple dans le viewer pour récupérer /logo-black.svg ou /logo-white.svg -->

Sortie

Le viewer affiche le logo en entier à 100 % de zoom, puis permet de zoomer et de faire défiler l'aperçu si le visuel dépasse la zone.

Contrôle rapide d’un viewBox manquant

Entrée

<svg width="480" height="144"><rect width="480" height="144" rx="36" fill="#f97316"/></svg>

Sortie

L’absence de viewBox se voit immédiatement dans le panneau d’inspection et aide à décider si resize-svg doit en ajouter un.

Outils SVG associés

Besoin de corriger le scaling ? Ouvrez redimensionner SVG. Besoin d’un asset plus léger ? Utilisez optimize SVG ou le hub SVG.

FAQ SVG viewer

Aperçu et inspection locale

Modifie-t-il le SVG ?

Non — le viewer sert à prévisualiser et inspecter. Utilisez resize-svg ou optimize-svg pour modifier le markup.

Pourquoi changer le fond ?

Pour repérer un contraste trop faible, des marges transparentes ou des icônes correctes seulement sur un thème.

Le SVG est-il envoyé ?

Jamais. Le rendu et l’inspection se font localement dans le navigateur.

Convertisseurs, encodeurs, formateurs et minificateurs au même endroit ? Outils développeurs Ouvrez le catalogue des outils développeurs.