PNG-kuvan muuntaminen SVG-vektoriksi
Koteloi rasterimuotoiset PNG-kuvat SVG XML -vektorisäiliöön responsiivista verkkoskaalausta ja vektoriyhteensopivaa asettelun integrointia varten.
Muotojen vertailu ja tekniset tiedot
| Määritys | PNG | SVG |
|---|---|---|
| MIME-tyyppi | image/png | image/svg+xml |
| Tyyppi | raster | vector |
| Pakkaus | lossless (DEFLATE / LZ77 + Huffman) | lossless XML text (GZIP compressible via .svgz) |
| Standardimääritys | W3C PNG 3rd Edition | W3C SVG 2 Specification |
| Tiedostotunniste (Magic Bytes) | 89 50 4E 47 0D 0A 1A 0A | 3C 3F 78 6D 6C (<?xml) or 3C 73 76 67 (<svg) |
Muodon yleiskatsaus ja käyttökohteet
PNG-tiedostojen muuntaminen SVG-formaattiin kääri rasteribittikartan XML-vektorisäiliön sisään, minkä ansiosta web-kehittäjät ja graafiset suunnittelijat voivat upottaa rasterigrafiikkaa suoraan skaalautuviin vektorityönkulkuihin. Rasterimuotoinen PNG-kuva käyttää kiinteää värillisten pikseleiden ruudukkoa. Tämän grafiikan kääriminen SVG-tiedostoon säilyttää alkuperäiset pikselimitat ja läpinäkyvyyden, mutta tekee kuvasta suoraan upotettavan SVG-pohjaisiin verkkosivuasetteluihin ja responsiivisiin käyttöliittymän näkymäalueisiin. Verkkosuunnittelijat tekevät tätä muunnosta usein integroidakseen rasterikuvitusta SVG-sprite-arkkeihin, vektorikuvituksen työnkulkuihin ja responsiivisiin verkkosivustoihin ilman erillisten ulkoisten kuvatiedostojen hallintaa. Syntyvä SVG pakkaa koko grafiikan itsenäisesti standardin XML-koodin sisälle.
Tekniset tiedot ja koodekkien erittely
PNG-tiedosto on rasterikuva, jonka MIME-tyyppi on image/png. Se alkaa maagisella tavutunnisteella 89 50 4E 47 0D 0A 1A 0A, jota seuraavat DEFLATE-algoritmilla pakatut datalohkot. Algoritmi yhdistää LZ77-liukuvakirjastot ja Huffman-koodauksen. Sitä vastoin SVG-tiedosto käyttää MIME-tyyppiä image/svg+xml ja on rakenteeltaan XML-asiakirja. Muunnoksen aikana moottori rasteroi kuvan asiakasohjelman muistissa, sarjoittaa bittikartan PNG:ksi ja upottaa kuvan Base64-datamerkkijonona SVG:n <image>-säiliöelementin sisälle. Tämä pakkaa grafiikan kelvolliseksi, itsenäiseksi SVG-tiedostoksi, jolla on määritellyt viewBox-mitat.
Käyttöjärjestelmien ja selaimien yhteensopivuus
SVG-tiedostoilla on laaja tuki nykyaikaisissa verkkoselaimissa, kuten Chromessa, Firefoxissa, Safarissa ja Edgessä sekä työpöytä- että mobiilikäyttöjärjestelmissä, kuten Windowsissa, macOS:ssä, Androidissa ja iOS:ssä. Kuvankatseluohjelmat ja suunnitteluohjelmistot, kuten Adobe Illustrator, Inkscape ja CorelDRAW, käsittelevät SVG-muokkausta natiivisti. PNG-tiedostoilla on sama yleinen selain- ja käyttöjärjestelmätuki, mutta raa'an SVG-koodin tarkastelu vaatii minkä tahansa tavallisen tekstieditorin.
Hyödyllistä tietoa
Koska tämä muunnos upottaa rasteribittikartan XML-säiliöön vektoripolkujen jäljittämisen sijaan, grafiikka säilyttää tarkan pikselitarkkuuden ja alfapainotetun läpinäkyvyyden säilyttäen samalla täyden yhteensopivuuden SVG-renderöijien kanssa.
Muotojen vertailu ja tekniset tiedot
Monimutkainen korkean resoluution PNG-logo voi helposti saavuttaa 2 megatavua, jolloin sen lataaminen vie noin 3,2 sekuntia tavallisen 4G-mobiiliyhteyden kautta. Vastaava muunnettu SVG-tiedosto kutistuu usein vain 40 kilotavuun, ja se latautuu alle 0,1 sekunnissa 4G-verkoissa sekä silmänräpäyksessä 5G- ja kuituverkoissa.
Usein kysytyt kysymykset
Miten PNG-kuva muunnetaan SVG-vektoriksi ilman laadunheikennystä?
Muunnin kapseloi täysiresoluutioisen PNG-bittikartan suoraan SVG XML -kääreen sisään upotettuna Base64-datavirrana. Tämä säilyttää 100 % alkuperäisistä pikseliväreistä ja läpinäkyvyydestä ilman sukupolvihävikkiä.
Mitä eroa on PNG-kuvalla ja SVG-vektorilla?
PNG on rasterikuvamuoto, joka tallentaa visuaalisen datan kiinteänä DEFLATE-pakatun väripikselien ruudukkona, minkä vuoksi tiedostokoko riippuu pikselimitasta. SVG on vektorikuvamuoto, joka tallentaa visuaalisen datan skaalautuvina matemaattisina ohjeina XML-tekstissä, mikä mahdollistaa kuvan koon muuttamisen loputtomiin ilman pikselöitymistä.