SVG Grabber odkrywa każdy SVG na stronie — wbudowane elementy SVG, zewnętrzne odniesienia do plików .svg, sprite'y SVG (wzorce use/symbol) i URI danych SVG. Podejrzyj każdy SVG w różnych rozmiarach, sprawdź przezroczystość na jasnym i ciemnym tle, skopiuj surowy znacznik SVG lub pobierz zoptymalizowane pliki SVG.
SVG są wszędzie na nowoczesnych stronach — logo, ikony, ilustracje, grafika dekoracyjna, wizualizacje danych — ale ich wyodrębnianie jest zaskakująco trudne. Wbudowane SVG są osadzone bezpośrednio w HTML i nie mogą być "zapisane jako obraz." Sprite'y SVG używają odniesień use/symbol, które nie rozwijają się do samodzielnych plików. Zewnętrzne SVG ładowane przez img src lub CSS nie mogą być sprawdzane bez otwierania zakładki sieci. SVG Grabber obsługuje wszystkie te źródła automatycznie. Skanuje DOM w poszukiwaniu wbudowanych SVG, rozwiązuje odniesienia sprite'ów do ich kompletnych definicji symboli, znajduje zewnętrzne URL-e SVG i dekoduje URI danych SVG. Każdy SVG jest wyświetlany w galerii z podglądem na żywo i możesz przełączać między jasnym, ciemnym i szachowanym tłem, aby zweryfikować przezroczystość. Skopiuj surowy kod SVG do wklejenia w komponentach lub pobierz SVG jako plik gotowy do użycia w twoim projekcie.
Znajduje SVG z każdego źródła na stronie: wbudowane elementy <svg> w DOM, zewnętrzne pliki .svg ładowane przez tagi img lub object, SVG w CSS background-image, odniesienia use/symbol sprite'ów (rozwiązane do kompletnych SVG) oraz SVG kodowane URI danych base64.
Podejrzyj każdy SVG w różnych rozmiarach (oryginalny, 2x, 4x) na trzech tłach: ciemnym, jasnym (białym) i szachowanym. Szachownica ujawnia obszary przezroczystości, które mogą być niewidoczne na tle w jednolitym kolorze.
Kliknij "Kopiuj SVG", aby uzyskać kompletny znacznik SVG — viewBox, ścieżki, grupy i wszystkie atrybuty włącznie. Wklej bezpośrednio do HTML, JSX, szablonu Vue lub pliku sprite'a SVG. Kod jest czysty i prawidłowo sformatowany.
Pobierz pojedyncze SVG jako pliki .svg z prawidłowymi deklaracjami XML i kodowaniem. Pliki są nazywane na podstawie ID SVG, nazwy klasy lub aria-label — nie ogólnymi nazwami "download.svg".
Każdy SVG pokazuje swój typ źródła (wbudowany, zewnętrzny, sprite, URI danych), wymiary viewBox, rozmiar pliku i gdzie w DOM został znaleziony. Przydatne do zrozumienia, jak strona implementuje swoją strategię SVG.
Gdy strona używa sprite'ów SVG z odniesieniami use href="#icon-name", SVG Grabber rozwiązuje każde odniesienie do kompletnej definicji symbolu — dając ci pełny samodzielny SVG, a nie tylko element use.
Odwiedź stronę ze świetnym systemem ikon i pobierz cały zestaw ikon SVG. SVG Grabber znajduje ikony w sprite'ach, wbudowanych SVG i plikach zewnętrznych — zbierając kompletną bibliotekę ikon niezależnie od tego, jak jest zaimplementowana.
Potrzebujesz SVG logo firmy do strony partnerskiej, studium przypadku lub zestawu prasowego? Większość logo na nowoczesnych stronach to SVG. SVG Grabber znajduje i wyodrębnia je w oryginalnej jakości wektorowej — nieskończenie skalowalne.
Studiowanie, jak produkcyjne strony implementują złożone ilustracje SVG, animacje lub wizualizacje danych. Skopiuj surowy kod SVG, aby sprawdzić, jak zorganizowane są ścieżki, jak skonfigurowano viewBox i jak stosowane są animacje CSS.
Przełączasz się na nowy system ikon? Pobierz SVG ze strony referencyjnej, upuść je do sprite'a SVG lub systemu ikon opartego na komponentach. Czysty kod SVG z prawidłowymi wartościami viewBox gotowy do integracji.
Przejrzyj, jak SVG są zaimplementowane na twojej stronie — czy są wbudowane (dobre dla manipulacji), zewnętrzne (dobre dla cache'owania), czy sprite'y (dobre dla wydajności)? SVG Grabber pokazuje typ źródła dla każdego SVG, pomagając zoptymalizować strategię SVG.
Otwórz pływający dok DevSuite Pro i kliknij ikonę SVG Grabber. Narzędzie skanuje stronę w poszukiwaniu wszystkich źródeł SVG i buduje galerię.
Pojawia się siatka miniatur SVG pokazująca każdy SVG znaleziony na stronie. Każdy wpis pokazuje nazwę SVG, typ źródła i wymiary viewBox.
Kliknij dowolny SVG, aby otworzyć większy podgląd. Przełączaj między ciemnym, jasnym i szachowanym tłem. Zmień rozmiar podglądu, aby zobaczyć, jak SVG się skaluje.
Kliknij "Kopiuj SVG", aby uzyskać surowy znacznik do wklejenia w kodzie, lub "Pobierz", aby zapisać go jako samodzielny plik .svg na twoim urządzeniu.
Wróć do galerii, aby eksplorować więcej SVG. Znaczek licznika pokazuje łączną liczbę znalezionych na stronie.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.
