SVG Viewer en ligne — 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

<svg width="480" height="144" viewBox="0 0 480 144" xmlns="http://www.w3.org/2000/svg"><rect width="480" height="144" rx="36" fill="#f97316"/></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.

Outils SVG

Prévisualisez, optimisez avec SVGO, exportez en Data URI, redimensionnez, formatez, convertissez en JSX et validez vos SVG — tout dans le navigateur.

Découvrez les autres catégories d'outils

Minifier

Réduisez code et assets pour la production — minifiez JS, CSS, HTML, JSON, XML et SVG avant gzip ou déploiement CDN.

Beautifier

Rendez le code lisible avec une indentation cohérente — beautifiez JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML et plus encore dans votre navigateur.

Déminifier

Développez du code minifié ou compressé — déminifiez JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML et d'autres formats pour déboguer ou relire.

Conversion

Transformez des données entre JSON, YAML, XML et CSV localement — sans envoi serveur.

Préprocesseurs CSS

Compilez SCSS ou LESS en CSS standard dans le navigateur — complétez avec beautify ou minify pour un workflow feuille de style complet.

Outils JSON

Validez, formatez, comparez et explorez des payloads JSON — complémentaires aux minificateurs et convertisseurs.

DevOps & Infra

Format/validate/minify HCL, format & lint Dockerfile, validation Compose et .env.

CI/CD

GitHub Actions et GitLab CI — formater le YAML et vérifier la structure des workflows/jobs dans le navigateur.

Logs & observabilité

JSON/NDJSON ligne à ligne et access logs Nginx/Apache — format, filtre, validation et CSV/TSV.

Kubernetes

Manifestes multi-docs, validation structurelle, starters Ingress/Deployment et formatage values Helm.

Réseau / IP

CIDR, sous-réseaux et helpers IPv4/IPv6 — dans le navigateur.

Sécurité & tokens

JWKS, certificats X.509 et scan de secrets — locaux navigateur.

API & schémas

Outils OpenAPI pour formater, valider et analyser vos specs.

Encodage

Encodez ou décodez Base64, composants URL et entités HTML — uniquement côté client.

Utilitaires développeur

Timestamps, UUID, ULID, Nanoid, cron, mots de passe, regex, slugify, bases, casse, diff texte et chmod — tout côté client.

Texte & Markdown

Comptez, générez un sommaire Markdown et nettoyez des listes de lignes — dans le navigateur.

IA & LLM

Comptage de tokens, estimation des coûts et fenêtre de contexte — 100 % local.

Sérialisation

Sérialisez et désérialisez des structures PHP à côté de vos flux JSON.