Mikä tämä työkalu on?
SVG on vektorimuoto — muodot kuvattu matematiikalla, äärettömästi skaalautuva, ihanteellinen logoihin ja ikoneihin. Mutta moni paikka ei hyväksy sitä: Word-dokumentit, useimmat some-alustat, sähköpostiohjelmat ja lukemattomat latauslomakkeet haluavat pikselikuvia. Muuntaminen (rasterointi) renderöi vektorin PNG- tai JPG-muotoon tietyssä koossa.
Koska vektoreilla ei ole kiinteää resoluutiota, valitset itse tuloksen leveyden — ja koska lähde on matematiikkaa, 2048px-vienti on yhtä terävä kuin 256px-vienti. PNG-tuloste säilyttää SVG:n läpinäkyvän taustan; JPG täyttää sen valkoisella.
Miksi käyttää sitä?
- Mikä tahansa resoluutio yhdestä lähteestä: 256px-favicon 2048px-painotuotteeseen, kaikki pikselintarkkoja.
- PNG-tuloste säilyttää läpinäkyvyyden — logot toimivat millä tahansa taustalla.
- Korjaa "SVG ei tuettu" -latausvirheet sekunneissa.
- Eräajomuunnos, paikallinen käsittely, ei latausta palvelimelle.
- Käsittelee SVG:t ilman eksplisiittistä leveyttä/korkeutta lukemalla niiden viewBoxin.
Käyttöohje
- Pudota .svg-tiedostot laatikkoon tai klikkaa valitaksesi.
- Valitse tulosteen leveys — Auto käyttää SVG:n omaa ilmoitettua kokoa.
- Valitse PNG (säilyttää läpinäkyvyyden) tai JPG (valkoinen tausta).
- Lataa jokainen renderöity kuva; mitat näytetään tiedostokohtaisesti.
Esimerkki
Syöte
logo.svg — 4 kt vektoriTuloste
logo.png — 1024×1024, läpinäkyvä tausta, terävä jokaisessa pikselissäYksi pieni vektorilähde tuottaa pikselintarkkoja rasterikuvia missä tahansa haluamassasi koossa.
Yleiset käyttötapaukset
- Yrityslogon (yleensä suunnittelijalta saatu SVG-muodossa) lisääminen Word- tai PowerPoint-dokumenttiin, joka ei tue SVG:n upottamista.
- Sovellusikonien tai favicon-kuvakkeiden luominen jokaisessa vaaditussa pikselikoossa (16, 32, 180, 512px) yhdestä pääSVG:stä.
- Ikonin liittäminen sähköpostiallekirjoitukseen, koska useimmat sähköpostiohjelmat renderöivät vain rasterikuvia.
- Grafiikan lataaminen some-alustalle tai sisällönhallintajärjestelmään, joka hylkää SVG-tiedostot tietoturvasyistä.
Miksi SVG-latausrajoituksia ylipäätään on
Moni alusta estää nimenomaan SVG-lataukset tietoturvasyistä, ei huolimattomuudesta: koska SVG perustuu XML:ään ja voi teknisesti sisältää JavaScriptiä, haitallinen SVG voi olla skriptin injektointireitti, jos alusta renderöi sen puhdistamattomana. SVG:n rasterointi PNG:ksi tai JPG:ksi karsii kaiken pikselidatan ulkopuolisen pois, mikä on yksi syy siihen, miksi tämä muunnos on usein pakollinen eikä vain mukava — kohdealusta ei yksinkertaisesti voi hyväksyä vektorimuotoa turvallisesti, riippumatta siitä, onko juuri sinun SVG:si vaaraton.
Miten resoluutioriippumattomuus oikeasti toimii
SVG-tiedosto ei tallenna pikseleitä lainkaan — se tallentaa matemaattisia polkumäärittelyjä ("piirrä viiva tästä pisteestä tuohon pisteeseen", "täytä tämä käyrä tällä värillä") ja viewBoxin, joka määrittää koordinaattitilan, jossa nuo polut sijaitsevat. Kun rasteroit sen, selaimen renderöintimoottori laskee jokaisen käyrän ja täytön uudelleen haluamillasi pikselimitoilla, alusta alkaen, joka kerta. Tämä eroaa perustavanlaatuisesti olemassa olevan rasterikuvan (JPG:n tai PNG:n) koon muuttamisesta, jossa suurentaminen tarkoittaa pikselien keksimistä, joita ei koskaan ollut olemassa, ja näyttää väistämättä pehmeältä — 4000px:nä renderöity SVG on täsmälleen yhtä terävä kuin 100px:nä renderöity, koska molemmat lasketaan tuoreeltaan samasta tarkasta matematiikasta, ei venytetä pienemmästä lähteestä.
Usein kysytyt kysymykset
Minkä resoluution pitäisi käyttää viennissä?
Käytä suurimman näyttökokosi mukaista, ja hieman yli: 512px kattaa useimmat verkkologojen käyttötavat, 1024px+ retina-näytöille ja esityksiin, 2048px painotöihin. Toisin kuin valokuvan suurentamisessa, SVG:stä isona vieminen ei maksa mitään terävyyden osalta.
Miksi SVG:ni renderöityy tyhjänä tai rikkinäisenä?
Yleensä syynä ovat ulkoiset viittaukset: SVG:t, jotka linkittävät ulkoisiin kuviin, fontteihin tai CSS:ään, eivät voi ladata niitä selaimen suojattua hiekkalaatikkoa vasten. Upotettua (inline) sisältöä sisältävät SVG:t muuntuvat ongelmitta. Teksti voi myös siirtyä, jos se käyttää fonttia, jota järjestelmässäsi ei ole.
PNG vai JPG — kumpi kannattaa valita?
Lähes aina PNG: logot ja ikonit tarvitsevat läpinäkyvyyttä ja teräviä reunoja, jotka PNG säilyttää ja JPG pilaa. Valitse JPG vain, kun kohde vaatii sitä ehdottomasti tai SVG on valokuvamainen kuvitus.
Voinko muuntaa PNG:n takaisin SVG:ksi täällä?
Ei — se on perustavanlaatuisesti eri tehtävä (pikselien jäljentäminen muodoiksi), joka tuottaa parhaimmillaankin vain likiarvoja. Tämä työkalu tekee vektori → rasteri-suunnan, joka on tarkka.
Ladataanko SVG:ni muuntamista varten palvelimelle?
Ei. Selain renderöi SVG:n paikalliselle canvasille ja koodaa PNG:n/JPG:n laitteellasi. Mitään ei lähetetä.
Pitäisikö SVG:ni viedä PNG:nä vai JPG:nä?
Jos grafiikassa on läpinäkyvyyttä — logo, jonka pitää sopia millä tahansa taustalla — valitse PNG: JPG:ssä ei ole alfakanavaa ja se täyttää läpinäkyvät alueet yhtenäisellä värillä. PNG sopii myös paremmin teräväreunaiseen taiteeseen kuten ikoneihin ja kaavioihin. Valitse JPG vain, kun SVG sisältää valokuvamaista tai vahvasti liukuvärjättyä sisältöä ja tiedostokoko on tärkeämpi kuin reunat.