SVG Grabber löytää kaikki SVG-kuvat verkkosivulta — upotetuista SVG-elementeistä, ulkoisista .svg-tiedostoviittauksista, SVG-spriteistä (use/symbol-mallit) sekä SVG data URI -muodoista. Esikatsele jokaista SVG:tä eri koissa, tarkista läpinäkyvyys vaaleaa ja tummaa taustaa vasten, kopioi raakamuotoinen SVG-merkintä tai lataa optimoidut SVG-tiedostot.
SVG-kuvia on kaikkialla nykyaikaisilla verkkosivuilla — logoissa, ikoneissa, illustraatioissa, koristegrafiikassa ja datavisualisoinneissa — mutta niiden poimiminen on yllättävän hankalaa. Upotetut SVG:t on sisällytetty suoraan HTML:ään, eikä niitä voi "tallentaa kuvana". SVG-spritet käyttävät use/symbol-viittauksia, jotka eivät johda erillisiin tiedostoihin. Img src -tagin tai CSS:n kautta ladattuja ulkoisia SVG-kuvia ei voi tarkastella avaamatta verkkovälilehteä. SVG Grabber käsittelee kaikki nämä lähteet automaattisesti. Se skannaa DOM:n upotetuille SVG-kuville, ratkaisee sprite-viittaukset täydellisiksi symbolitiedostoiksi, löytää ulkoiset SVG-osoitteet ja purkaa SVG data URI -koodit. Jokainen SVG näytetään galleriassa live-esikatselulla, ja voit vaihtaa vaaleaan, tummaan tai ruudulliseen taustaan läpinäkyvyyden tarkistamiseksi. Kopioi SVG-raakakoodin upottaaksesi sen komponentteihisi tai lataa SVG-tiedostona projektisi käyttöön.
Löytää SVG-kuvat kaikista sivun lähteistä: DOM:n upotetuista <svg>-elementeistä, img- tai object-tagien kautta ladatuista ulkoisista .svg-tiedostoista, CSS background-image -SVG:istä, use/symbol-sprite-viittauksista (ratkaistu täydellisiksi SVG-kuviksi) sekä base64 data URI -muotoon koodatuista SVG:istä.
Esikatsele jokaista SVG:tä eri koissa (alkuperäinen, 2x, 4x) kolmea eri taustaa vasten: tumma, vaalea (valkoinen) ja ruudullinen. Ruudullinen tausta paljastaa läpinäkyvät alueet, jotka saattavat olla näkymättömiä yksivärisen taustan päällä.
Napsauta "Kopioi SVG" saadaksesi täydellisen SVG-merkinnän — viewBox, polut, ryhmät ja kaikki attribuutit mukaan lukien. Liitä suoraan HTML:ään, JSX:ään, Vue-malliin tai SVG-sprite-tiedostoon. Koodi on siistiä ja oikein muotoiltua.
Lataa yksittäisiä SVG-kuvia .svg-tiedostoina asianmukaisin XML-määrittelyin ja koodauksin. Tiedostot nimetään SVG:n ID:n, luokkanimen tai aria-label-arvon perusteella — ei geneerisellä "download.svg"-nimellä.
Jokainen SVG näyttää lähdetyyppinsä (upotettu, ulkoinen, sprite, data URI), viewBox-mitat, tiedostokoon ja sijainnin DOM:ssa. Hyödyllinen ymmärtämään, miten sivusto toteuttaa SVG-strategiansa.
Kun sivu käyttää SVG-spriteä use href="#icon-name" -viittauksin, SVG Grabber ratkaisee jokaisen viittauksen täydelliseksi symbolin määrittelyksi — antaen sinulle kokonaisen itsenäisen SVG-kuvan eikä pelkän use-elementin.
Vieraile verkkosivustolla, jossa on hieno ikonijärjestelmä, ja poimii koko SVG-ikonikokelman. SVG Grabber löytää ikonit spriteistä, upotetuista SVG-kuvista ja ulkoisista tiedostoista — kerää täydellisen ikoniston riippumatta toteutustavasta.
Tarvitsetko yrityksen SVG-logon kumppanuussivulle, tapaustutkimukseen tai lehdistöpakettiin? Useimmat modernien verkkosivujen logot ovat SVG-muodossa. SVG Grabber löytää ja poimii ne alkuperäisessä vektorilaadussaan — loputtomasti skaalautuva.
Tutki, miten tuotantosivustot toteuttavat monimutkaisia SVG-illustraatioita, animaatioita tai datavisualisointeja. Kopioi SVG-raakakoodin tarkastellaksesi, miten polut on rakennettu, miten viewBox on määritelty ja miten CSS-animaatiot on toteutettu.
Vaihtamassa uuteen ikonijärjestelmään? Poimii SVG-kuvia viitesivustolta ja lisää ne SVG-spriteesi tai komponenttipohjaiseen ikonijärjestelmääsi. Siistiä SVG-koodia oikeilla viewBox-arvoilla valmiina integrointiin.
Tarkastele, miten SVG-kuvia on toteutettu sivustollasi — ovatko ne upotettuja (hyvä muokattavuuden kannalta), ulkoisia (hyvä välimuistittamisen kannalta) vai spriteissä (hyvä tehokkuuden kannalta)? SVG Grabber näyttää jokaisen SVG:n lähdetyypin, auttaen sinua optimoimaan SVG-strategiasi.
Avaa DevSuite Pro -kelluva telakka ja napsauta SVG Grabber -kuvaketta. Työkalu skannaa sivun kaikista SVG-lähteistä ja rakentaa gallerian.
Ruudukko SVG-esikatselukuvista näyttää kaikki sivulta löydetyt SVG-kuvat. Jokainen merkintä näyttää SVG:n nimen, lähdetyypin ja viewBox-mitat.
Napsauta mitä tahansa SVG:tä avataksesi suuremman esikatselun. Vaihda tumman, vaalean ja ruudullisen taustan välillä. Muuta esikatselun kokoa nähdäksesi, miten SVG skaalautuu.
Napsauta "Kopioi SVG" saadaksesi raakamerkinnän upottaaksesi sen koodiisi tai "Lataa" tallentaaksesi sen itsenäisenä .svg-tiedostona laitteellesi.
Palaa galleriaan tutkiaksesi lisää SVG-kuvia. Lukumääräpiste näyttää sivulta löydettyjen SVG-kuvien kokonaismäärän.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.
