SVG Grabber découvre tous les SVG présents sur une page web — éléments SVG inline, références à des fichiers .svg externes, sprites SVG (motifs use/symbol) et SVG encodés en data URI. Prévisualisez chaque SVG à différentes tailles, vérifiez la transparence sur fond clair ou sombre, copiez le balisage SVG brut ou téléchargez des fichiers SVG optimisés.
Les SVG sont omniprésents sur les sites modernes — logos, icônes, illustrations, éléments décoratifs, visualisations de données — mais les extraire est étonnamment difficile. Les SVG inline sont intégrés directement dans le HTML et ne peuvent pas être « enregistrés en tant qu'image ». Les sprites SVG utilisent des références use/symbol qui ne correspondent pas à des fichiers autonomes. Les SVG externes chargés via img src ou CSS ne peuvent pas être inspectés sans ouvrir l'onglet réseau. SVG Grabber gère toutes ces sources automatiquement. Il analyse le DOM pour les SVG inline, résout les références sprite vers leurs définitions symbol complètes, trouve les URL SVG externes et décode les SVG encodés en data URI. Chaque SVG est affiché dans une galerie avec un aperçu en direct, et vous pouvez basculer entre les fonds clairs, sombres et en damier pour vérifier la transparence. Copiez le code SVG brut pour l'intégrer dans vos composants, ou téléchargez le SVG en tant que fichier prêt à l'emploi dans votre projet.
Trouve les SVG depuis toutes les sources de la page : éléments <svg> inline dans le DOM, fichiers .svg externes chargés via img ou object tags, SVG en CSS background-image, références use/symbol de sprite (résolues en SVG complets) et SVG encodés en base64 data URI.
Prévisualisez chaque SVG à différentes tailles (originale, 2x, 4x) sur trois arrière-plans : sombre, clair (blanc) et damier. Le damier révèle les zones de transparence qui pourraient être invisibles sur un fond uni.
Cliquez sur « Copier SVG » pour obtenir le balisage SVG complet — viewBox, chemins, groupes et tous les attributs inclus. Collez directement dans votre HTML, JSX, template Vue ou fichier SVG sprite. Le code est propre et correctement formaté.
Téléchargez des SVG individuels en fichiers .svg avec des déclarations XML et un encodage appropriés. Les fichiers sont nommés d'après l'ID du SVG, son nom de classe ou son aria-label — pas des noms génériques « download.svg ».
Chaque SVG affiche son type de source (inline, externe, sprite, data URI), ses dimensions viewBox, la taille du fichier et son emplacement dans le DOM. Utile pour comprendre comment le site met en œuvre sa stratégie SVG.
Lorsqu'une page utilise des sprites SVG avec des références use href="#icon-name", SVG Grabber résout chaque référence vers la définition symbol complète — vous donnant le SVG autonome complet, pas seulement l'élément use.
Visitez un site web avec un excellent système d'icônes et récupérez l'intégralité du jeu d'icônes SVG. SVG Grabber trouve les icônes dans les sprites, les SVG inline et les fichiers externes — collectant la bibliothèque d'icônes complète quelle que soit sa mise en œuvre.
Besoin du logo SVG d'une entreprise pour une page de partenariat, une étude de cas ou un kit presse ? La plupart des logos sur les sites modernes sont des SVG. SVG Grabber les trouve et les extrait dans leur qualité vectorielle originale — infiniment évolutifs.
Étudiez comment les sites en production implémentent des illustrations SVG complexes, des animations ou des visualisations de données. Copiez le code SVG brut pour inspecter la structure des chemins, la configuration du viewBox et l'application des animations CSS.
Vous passez à un nouveau système d'icônes ? Récupérez les SVG du site de référence et intégrez-les dans votre sprite SVG ou votre système d'icônes basé sur des composants. Code SVG propre avec des valeurs viewBox correctes, prêt pour l'intégration.
Examinez comment les SVG sont implémentés sur votre site — sont-ils inline (idéal pour la manipulation), externes (idéal pour la mise en cache) ou en sprite (idéal pour l'efficacité) ? SVG Grabber affiche le type de source pour chaque SVG, vous aidant à optimiser votre stratégie SVG.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône SVG Grabber. L'outil analyse la page pour toutes les sources SVG et construit la galerie.
Une grille de miniatures SVG apparaît, affichant tous les SVG trouvés sur la page. Chaque entrée indique le nom du SVG, son type de source et ses dimensions viewBox.
Cliquez sur n'importe quel SVG pour ouvrir un aperçu agrandi. Basculez entre les arrière-plans sombre, clair et damier. Redimensionnez l'aperçu pour voir comment le SVG se met à l'échelle.
Cliquez sur « Copier SVG » pour obtenir le balisage brut à intégrer dans votre code, ou sur « Télécharger » pour l'enregistrer en tant que fichier .svg autonome sur votre appareil.
Revenez à la galerie pour explorer d'autres SVG. Le badge de comptage affiche le nombre total trouvé sur la page.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
