SVG Grabber открива всеки SVG на уебстраница — вградени (inline) SVG елементи, препратки към външни .svg файлове, SVG спрайтове (SVG sprites) (шаблони use/symbol) и SVG data URIs. Преглеждайте всеки SVG в различни размери, проверявайте прозрачността върху светъл и тъмен фон, копирайте необработения SVG код или изтегляйте оптимизирани SVG файлове.
SVG файловете са навсякъде в модерните уебсайтове — лога, икони, илюстрации, декоративни графики, визуализации на данни — но извличането им е изненадващо трудно. Вградените (inline) SVGs са вложени директно в HTML и не могат да бъдат записани като обикновено изображение. SVG спрайтовете използват препратки use/symbol, които не се разрешават до самостоятелни файлове. Външните SVGs, заредени чрез img src или CSS, не могат да бъдат инспектирани без отваряне на раздела network. SVG Grabber обработва автоматично всички тези източници. Той сканира DOM за вградени SVGs, разпознава спрайт препратките до пълните им дефиниции на символи, намира URL адреси на външни SVGs и декодира SVG data URIs. Всеки SVG се показва в галерия с предварителен преглед на живо, като можете да превключвате между светъл, тъмен и фон на шахматна дъска (checkerboard), за да проверите прозрачността. Копирайте необработения SVG код за вграждане във вашите компоненти или изтеглете SVG като файл, готов за използване във вашия проект.
Намира SVGs от всеки източник на страницата: вградени <svg> елементи в DOM, външни .svg файлове, заредени чрез img или object тагове, CSS фонови изображения (background-image SVGs), препратки към спрайтове use/symbol (разрешени до пълни SVGs) и base64 кодирани SVG data URIs.
Прегледайте всеки SVG в различни размери (оригинален, 2x, 4x) върху три фона: тъмен, светъл (бял) и шахматна дъска (checkerboard). Шахматната дъска разкрива областите на прозрачност, които могат да бъдат невидими на едноцветен фон.
Кликнете върху „Copy SVG“, за да получите пълния SVG код — включени са viewBox, пътища (paths), групи и всички атрибути. Поставете директно във вашия HTML, JSX, Vue шаблон или файл със SVG спрайт. Кодът е чист и правилно форматиран.
Изтегляйте отделни SVGs като .svg файлове с правилни XML декларации и кодиране. Файловете се именуват въз основа на ID на SVG, името на класа или aria-label — без генерични имена от типа „download.svg“.
Всеки SVG показва типа на източника си (inline, external, sprite, data URI), размерите на viewBox, размера на файла и къде в DOM е намерен. Полезно за разбиране на това как сайтът прилага своята SVG стратегия.
Когато дадена страница използва SVG спрайтове с препратки use href="#icon-name", SVG Grabber разрешава всяка препратка до пълната дефиниция на символа — предоставяйки ви пълния самостоятелен SVG, а не само елемента use.
Посетете уебсайт със страхотна система от икони и вземете целия набор от SVG икони. SVG Grabber намира икони в спрайтове, вградени SVGs и външни файлове — събирайки пълната библиотека с икони, независимо от начина на прилагане.
Нуждаете се от SVG логото на компания за партньорска страница, казус или медиен пакет? Повечето лога на модерните сайтове са SVGs. SVG Grabber ги намира и извлича в оригиналното им векторно качество — безкрайно мащабируеми.
Проучване на начина, по който производствените сайтове прилагат сложни SVG илюстрации, анимации или визуализации на данни. Копирайте необработения SVG код, за да инспектирате как са структурирани пътищата (paths), как е конфигуриран viewBox и как са приложени CSS анимациите.
Преминавате към нова система за икони? Грабнете SVGs от референтния сайт, поставете ги във вашия SVG спрайт или икона-компонентна система. Чист SVG код с подходящи viewBox стойности, готов за интеграция.
Прегледайте как се използват SVGs на вашия сайт — дали са вградени (добре за манипулация), външни (добре за кеширане) или спрайтове (добре за ефективност)? SVG Grabber показва типа на източника за всеки SVG, помагайки ви да оптимизирате стратегията си.
Отворете плаващия док DevSuite Pro и щракнете върху иконата SVG Grabber. Инструментът сканира страницата за всички SVG източници и изгражда галерията.
Появява се мрежа от SVG миниатюри, показваща всеки SVG, намерен на страницата. Всеки запис показва името на SVG, типа на източника и размерите на viewBox.
Кликнете върху който и да е SVG, за да отворите по-голям предварителен преглед. Превключвайте между тъмен, светъл и фон на шахматна дъска. Променяйте размера на визуализацията, за да видите как се мащабира SVG.
Кликнете върху „Copy SVG“, за да получите необработения код за вграждане, или върху „Download“, за да го запазите като самостоятелен .svg файл на вашето устройство.
Върнете се в галерията, за да разгледате още SVGs. Броячът на значката показва общия брой на намерените на страницата елементи.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.
