Käsittele jopa 200 kuvaa per tehtävä — valitse asetukset kerran, suorita kaikki.
Kyllästynyt siihen, että jokainen pieni kuvake aiheuttaa ylimääräisiä HTTP-pyyntöjä ja hidastaa verkkosivustoasi? SVG:stä data URI:ksi -muunnin on ratkaisu. Tämän työkalun avulla voit upottaa SVG-kuvat suoraan HTML- tai CSS-tiedostoihisi, jolloin erillisiä tiedostopyyntöjä ei tarvita ja sivun renderöinti nopeutuu. Muuntamalla SVG-koodisi kompaktiksi base64-data URI:ksi voit virtaviivaistaa resurssisi ja parantaa sivuston suorituskykyä sekunneissa.
Näin SVG:stä Data URI:ksi -muunnin toimii
Prosessi on erittäin yksinkertainen. Liitä vain täydellinen SVG-koodisi – alkaen <svg>-tagista ja päättyen </svg>-tagiin – syöttökenttään ja napsauta muunnospainiketta. Työkalumme käsittelee koodin välittömästi selaimessasi ja koodaa sen base64-merkkijonoksi. Se käärii merkkijonon oikeaan muotoon suoraa käyttöä varten ja tarjoaa valmiita pätkiä, jotka voit kopioida CSS:n background-image-ominaisuuteen tai HTML:n <img>-tagin src-attribuuttiin. Monimutkaista asetusta ei tarvita – kyseessä on yksinkertainen kopioi ja liitä -toiminto.
Milloin käyttää SVG-data URI:ta
SVG:iden upottaminen data URI:na sopii erinomaisesti pienille, yksinkertaisille kuvakkeille ja grafiikoille, joita käytetään toistuvasti sivustollasi, kuten logoille, luettelomerkeille tai käyttöliittymäelementeille. Suurin hyöty on palvelinpyyntöjen väheneminen, mikä voi merkittävästi nopeuttaa sivustosi latautumista erityisesti mobiililaitteilla. Tämä menetelmä ei kuitenkaan sovellu suurille tai erittäin monimutkaisille SVG-kuville. Koska base64-koodaus kasvattaa tiedostokokoa noin 33 %, suuren SVG:n upottaminen voi paisuttaa CSS- tai HTML-tiedostoasi ja kumota suorituskykyhyödyt. Monimutkaisempiin vektoritehtäviin tutustu kattavaan SVG-vektorityökalujen valikoimaamme.
Vinkkejä parhaiden tulosten saavuttamiseksi
Saadaksesi parhaan hyödyn tästä tekniikasta, optimoi SVG aina ennen muuntamista. Pienempi ja puhtaampi SVG-tiedosto tuottaa lyhyemmän ja tehokkaamman data URI:n. Suosittelemme lämpimästi koodin ajamista ensin SVG-optimoijan kautta tarpeettoman datan poistamiseksi ja koon minimoimiseksi. Muista myös, että kun SVG on upotettu data URI:na, sen sisäisiä osia ei voi muotoilla ulkoisella CSS:llä. Se käyttäytyy tässä suhteessa kuten PNG tai JPEG. Grafiikoille, jotka vaativat dynaamista muotoilua, ulkoisen .svg-tiedoston linkittäminen on edelleen parempi vaihtoehto. Löydä inspiraatiota ja valmiita grafiikoita SVG-valikoimistamme.
Usein kysytyt kysymykset
Mikä on SVG-data-URI?
SVG-data-URI on tekstijono, joka esittää SVG-kuvaa base64-muodossa koodattuna. Tämän avulla voit upottaa kuvan suoraan HTML- tai CSS-koodiin ilman erillistä tiedostoa.
Onko parempi upottaa SVG vai käyttää <img>-tagia?
SVG:n upottaminen data-URI:na on parempi pienten kuvakkeiden kohdalla, koska se vähentää HTTP-pyyntöjä ja nopeuttaa sivun alkulatausta. Suurten ja monimutkaisten SVG:iden kohdalla tavallinen <img>-tagi, joka linkittää .svg-tiedostoon, on parempi välimuistin käytön kannalta.
Kuinka käytän base64-SVG:tä CSS:ssä?
Voit käyttää base64-koodattua SVG:tä CSS:ssä asettamalla sen `background-image`-ominaisuuden arvoksi. Muoto on `url('data:image/svg+xml;base64,...')`, jossa pisteet edustavat koodattua merkkijonoasi.
Miksi SVG-datan URI on niin pitkä?
Base64-koodaus kasvattaa alkuperäisen tiedoston kokoa noin 33 %. Saadaksesi lyhyemmän data-URI:n, sinun tulisi ensin pienentää SVG-koodisi poistamalla tarpeettomat merkit ja kommentit.
Voinko tyylitellä SVG:n, joka on upotettu data-URI:na?
Et voi tyylitellä data-URI SVG:n sisäisiä polkuja käyttämällä verkkosivusi ulkoista CSS:ää. Tässä yhteydessä selain käsittelee sitä staattisena rasterikuvana, kuten PNG:nä.
Ovatko SVG-data-URI:t huonoja hakukoneoptimoinnin kannalta?
Ei, ne eivät ole luonnostaan huonoja hakukoneoptimoinnille. Kun niitä käytetään oikein pieniin kuvakkeisiin, ne voivat parantaa sivun nopeutta, mikä on positiivinen sijoitustekijä. Vältä niiden käyttöä suurille kuville, jotka voisivat hidastaa HTML/CSS-jäsentämistä.
Mikä on ero base64- ja URL-koodattujen SVG-tiedostojen välillä?
Molemmat ovat menetelmiä SVG-tiedostojen upottamiseen. Base64 on binääristä tekstiin -koodausmenetelmä, joka sopii kaikelle datalle, kun taas URL-koodaus (tai prosenttikoodaus) varmistaa, että SVG:n XML on turvallista käyttää URL-merkkijonon sisällä.
Tallentaako tämä työkalu SVG-tietoni?
Ei, työkalumme toimii kokonaan selaimessasi. SVG-koodiasi ei koskaan ladata palvelimillemme, joten tietosi pysyvät yksityisinä.
Tietoja SVG:stä CSS Data URI:ksi
SVG:stä CSS Data URI:ksi on ilmainen verkkotyökalu Wallpapers.com-sivustolta, joka toimii kokonaan selaimessasi — ei asennusta, ei vesileimaa, ei sähköposti-ilmoittautumista ensimmäiselle kokeilulle.
Koodaa SVG base64-data URI:ksi upotettavaksi suoraan CSS/HTML:ään.
Käyttöohje SVG:stä CSS Data URI:ksi
- Pudota kuvasi latausalueelle (yksittäinen tai erä - vaihda Bulk tilaan yläreunasta).
- Valitse työkalun tarjoamat asetukset (koko, muoto, laatu).
- Klikkaa Suorita. Tulos latautuu automaattisesti — ei manuaalista tallennusta.
Milloin käyttää
Yleisiä käyttötapauksia ovat:
kuvien valmistelu webiin, verkkokauppalistauksiin, somealustoille muotovaatimuksineen sekä tiedostojen muuntaminen laitteelta tai sovelluksesta toiseen.
Ilmainen vs Premium
Jokainen kävijä saa ilmaisen koeajon; kirjautuneet ilmaiskäyttäjät saavat korkeamman päivittäisen kiintiön. Tilaa
Premium
saadaksesi rajoittamattomat ajot, eräkäsittelyn jopa 200 kuvaa työtä kohden, prioriteettijonon ja mainoksettoman selailun.
Liittyvät työkalut
Etsitkö jotain hieman erilaista? Kokeile
SVG-PNG-muunnin
,
SVG–JPG-muunnin
tai
SVG–WebP-muunnin
— tai selaa kaikkia
SVG / vektori työkalut.
