SVG Grabber ontdekt elke SVG op een webpagina — inline SVG-elementen, externe .svg-bestandsverwijzingen, SVG-sprites (use/symbol-patronen) en SVG-data URI's. Bekijk elke SVG in verschillende maten, controleer transparantie tegen lichte en donkere achtergronden, kopieer de ruwe SVG-opmaak of download geoptimaliseerde SVG-bestanden.
SVG's zijn overal op moderne websites — logo's, pictogrammen, illustraties, decoratieve afbeeldingen, datavisualisaties — maar het extraheren ervan is verbazingwekkend moeilijk. Inline SVG's zijn rechtstreeks in de HTML ingebed en kunnen niet "als afbeelding worden opgeslagen." SVG-sprites gebruiken use/symbol-verwijzingen die niet naar standalone-bestanden opgelost worden. Externe SVG's geladen via img src of CSS kunnen niet worden geïnspecteerd zonder het netwerkttabblad te openen. SVG Grabber handelt al deze bronnen automatisch. Het scant de DOM op inline SVG's, lost sprite-verwijzingen naar hun volledige symboodefinities op, vindt externe SVG-URL's en decodeert SVG-data URI's. Elke SVG wordt weergegeven in een galerij met live voorvertoning en je kunt schakelen tussen lichte, donkere en ruitachtergronden om transparantie te verifiëren. Kopieer de ruwe SVG-code voor inlining in je componenten, of download de SVG als bestand klaar voor gebruik in je project.
Vindt SVG's van elke bron op de pagina: inline <svg> elementen in de DOM, externe .svg-bestanden geladen via img- of object-tags, CSS background-image SVG's, use/symbol sprite-verwijzingen (opgelost naar volledige SVG's) en base64 data URI gecodeerde SVG's.
Bekijk elke SVG in verschillende maten (origineel, 2x, 4x) tegen drie achtergronden: donker, licht (wit) en ruitachtergrond. De ruitachtergrond onthult transparantiebereiken die op een achtergrond met één kleur onzichtbaar kunnen zijn.
Klik op "Copy SVG" om de volledige SVG-opmaak te krijgen — viewBox, paden, groepen en alle attributen inbegrepen. Plak rechtstreeks in je HTML, JSX, Vue-sjabloon of SVG-sprite-bestand. De code is schoon en correct opgemaakt.
Download afzonderlijke SVG's als .svg-bestanden met juiste XML-declaraties en codering. Bestanden krijgen namen op basis van de ID, klassenaam of aria-label van SVG — geen generieke "download.svg"-namen.
Elke SVG toont het brontype (inline, extern, sprite, data URI), viewBox-afmetingen, bestandsgrootte en waar in de DOM deze werd gevonden. Handig voor het begrijpen hoe de site zijn SVG-strategie implementeert.
Wanneer een pagina SVG-sprites gebruikt met use href="#icon-name"-verwijzingen, lost SVG Grabber elke verwijzing naar de volledige symboodefinitie op — geeft je de volledige standalone SVG, niet alleen het use-element.
Bezoek een website met een geweldig pictogramsysteem en grijp de volledige SVG-pictogramset. SVG Grabber vindt pictogrammen in sprites, inline SVG's en externe bestanden — de volledige bibliotheek met pictogrammen ongeacht hoe deze wordt geïmplementeerd.
Heb je het SVG-logo van een bedrijf nodig voor een partnerpagina, case study of persberericht? De meeste logo's op moderne websites zijn SVG's. SVG Grabber vindt en extraheert ze op hun originele vectorkwaliteit — oneindig schaalbaar.
Bestudeer hoe productiewebsites complexe SVG-illustraties, animaties of datavisualisaties implementeren. Kopieer de ruwe SVG-code om te inspecteren hoe paden zijn gestructureerd, hoe viewBox is geconfigureerd en hoe CSS-animaties worden toegepast.
Naar een nieuw pictogramsysteem overschakelen? Grijp SVG's van de referentiesite, zet ze in je SVG-sprite of componentgebaseerd pictogramsysteem. Schone SVG-code met juiste viewBox-waarden klaar voor integratie.
Controleer hoe SVG's op je site worden geïmplementeerd — zijn ze inline (goed voor manipulatie), extern (goed voor caching) of sprites (goed voor efficiëntie)? SVG Grabber toont het brontype voor elke SVG, helpt je je SVG-strategie te optimaliseren.
Open het DevSuite Pro zwevende dock en klik op het SVG-grijper-pictogram. Het gereedschap scant de pagina op alle SVG-bronnen en bouwt de galerij.
Er verschijnt een raster met SVG-miniaturen met alle SVG's die op de pagina zijn gevonden. Elk item toont de SVG-naam, brontype en viewBox-afmetingen.
Klik op elke SVG om een grotere voorvertoning te openen. Schakelen tussen donkere, lichte en ruitachtergronden. Wijzig het formaat van de voorvertoning om te zien hoe de SVG schaal.
Klik op "Copy SVG" om de ruwe opmaak voor inlining in je code te krijgen, of "Download" om het als standalone .svg-bestand naar je apparaat op te slaan.
Ga terug naar de galerij om meer SVG's te verkennen. Het telbadge toont het totaal aantal op de pagina.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
