SVG Haaraja avastab iga SVG veebilehel — inline SVG elemendid, välised .svg faili viited, SVG sprite'id (use/symbol mustrid) ja SVG data URI-d. Eelvaata iga SVG-d erinevatel suurustel, kontrolli läbipaistvust heledatel ja tumedatel taustadel, kopeeri toore SVG markup või lae alla optimeeritud SVG failid.
SVG-d on kaasaegsetel veebilehtedel kõikjal — logod, ikoonid, illustratsioonid, dekoratiivne graafika, andmevisualisatsioonid — kuid nende ekstraktimine on üllatavalt raske. Inline SVG-d on otse HTML-i sisse põimitud ja neid ei saa "pildina salvestada". SVG sprite'id kasutavad use/symbol viiteid, mis ei lahene iseseisvateks failideks. Väliseid SVG-sid, mis on laetud img src või CSS-i kaudu, ei saa inspekteerida ilma võrgu vahekaarti avamata. SVG Haaraja käsitleb kõiki neid allikaid automaatselt. See skannib DOMi inline SVG-de jaoks, lahendab sprite viiteid nende täielikeks symbol definitsioonideks, leiab väliseid SVG URL-e ja dekodeerib SVG data URI-sid. Iga SVG kuvatakse galeriis koos elava eelvaatega ning saad lülituda heleda, tumeda ja malelaua taustade vahel, et kontrollida läbipaistvust. Kopeeri toore SVG kood inline'imiseks oma komponentides või lae SVG alla failina, mis on valmis kasutamiseks oma projektis.
Leiab SVG-sid igast allikast lehel: inline <svg> elemendid DOMis, välised .svg failid, mis on laetud img või object siltide kaudu, CSS background-image SVG-d, use/symbol sprite viited (lahendatud täielikeks SVG-deks) ja base64 data URI kodeeritud SVG-d.
Eelvaata iga SVG-d erinevatel suurustel (originaal, 2x, 4x) kolme tausta vastu: tume, hele (valge) ja malelaud. Malelaud paljastab läbipaistvuse alad, mis võivad olla nähtamatud üheväärvilisel taustal.
Klõpsa "Kopeeri SVG", et saada täielik SVG markup — viewBox, paths, groups ja kõik atribuudid kaasas. Kleebi otse oma HTML-i, JSX-i, Vue malli või SVG sprite faili. Kood on puhas ja korralikult vormindatud.
Lae üksikuid SVG-sid alla .svg failidena korraliku XML deklaratsiooni ja kodeeringuga. Failid nimetatakse SVG ID, klassinime või aria-label järgi — mitte üldistest "download.svg" nimedest.
Iga SVG näitab oma allika tüüpi (inline, väline, sprite, data URI), viewBox mõõtmeid, faili suurust ja kus DOMis see leiti. Kasulik mõistmiseks, kuidas sait oma SVG strateegiat implementeerib.
Kui leht kasutab SVG sprite'e use href="#icon-name" viidetega, lahendab SVG Haaraja iga viite täielikuks symbol definitsiooniks — andes sulle täieliku iseseisva SVG, mitte ainult use elemendi.
Külasta veebilehte suurepärase ikoonide süsteemiga ja haara terve SVG ikoonide komplekt. SVG Haaraja leiab ikoone sprite'idest, inline SVG-dest ja välistest failidest — kogudes täieliku ikoonide raamatukogu sõltumata sellest, kuidas see on implementeeritud.
Vajad ettevõtte SVG logo partnerluse lehe, juhtumiuuringu või pressikomplekti jaoks? Enamus logosid kaasaegsetel veebilehtedel on SVG-d. SVG Haaraja leiab ja ekstraktib need nende originaalse vektorkvaliteediga — lõpmatult skaleeritavad.
Uuri, kuidas tootmisveebilehed implementeerivad keerulisi SVG illustratsioone, animatsioone või andmevisualisatsioone. Kopeeri toore SVG kood, et inspekteerida, kuidas paths on struktureeritud, kuidas viewBox on konfigureeritud ja kuidas CSS animatsioonid on rakendatud.
Lülitud uuele ikoonide süsteemile? Haara SVG-d viite saidilt, sea need oma SVG sprite'i või komponendipõhisesse ikoonide süsteemi. Puhas SVG kood korralike viewBox väärtustega valmis integreerimiseks.
Vaata, kuidas SVG-d on sinu saidil implementeeritud — kas need on inline (hea manipuleerimiseks), välised (hea cache jaoks) või sprite'id (hea efektiivsuse jaoks)? SVG Haaraja näitab iga SVG allika tüüpi, aidates sul oma SVG strateegiat optimeerida.
Ava DevSuite Pro hõljuv dokk ja klõpsa SVG Haaraja ikoonil. Tööriist skannib lehte kõikide SVG allikate jaoks ja ehitab galerii.
Ilmub SVG pisipiltide ruudustik, mis näitab iga lehel leitud SVG-d. Iga kirje näitab SVG nime, allika tüüpi ja viewBox mõõtmeid.
Klõpsa mis tahes SVG-l, et avada suurem eelvaade. Lülita tumeda, heleda ja malelaua taustade vahel. Muuda eelvaate suurust, et näha, kuidas SVG skaleerub.
Klõpsa "Kopeeri SVG", et saada toore markup oma koodis inline'imiseks, või "Lae Alla", et salvestada see iseseisva .svg failina oma seadmesse.
Naviga tagasi galeriisse, et uurida rohkem SVG-sid. Loendi märk näitab lehel leitud koguarvu.
Paigaldage DevSuite Pro tasuta ja avage 39+ arendustööriista oma brauserile.
