SVG-vektorikuvan muuntaminen PNG-kuvaksi
SVG-vektoritiedostojen muuntaminen PNG-rasterikuviksi muuttaa skaalautuvat koodipohjaiset grafiikat kiinteiksi pikseliruudukoiksi yleisen sovellusyhteensopivuuden takaamiseksi.
Muotojen vertailu ja tekniset tiedot
| Määritys | SVG | PNG |
|---|---|---|
| MIME-tyyppi | image/svg+xml | image/png |
| Tyyppi | vector | raster |
| Pakkaus | lossless XML text (GZIP compressible via .svgz) | lossless (DEFLATE / LZ77 + Huffman) |
| Standardimääritys | W3C SVG 2 Specification | W3C PNG 3rd Edition |
| Tiedostotunniste (Magic Bytes) | 3C 3F 78 6D 6C (<?xml) or 3C 73 76 67 (<svg) | 89 50 4E 47 0D 0A 1A 0A |
Muodon yleiskatsaus ja käyttökohteet
Scalable Vector Graphics perustuu XML-tekstikoodiin, jolla piirretään geometrisia polkuja, viivoja ja muotoja suoraan näytöille. Tämä muoto toimii erinomaisesti verkkosivujen logoissa ja kuvakkeissa, koska taide pysyy terävänä millä tahansa näytön koolla. Jotkin vanhemmat ohjelmistot, tiukat sähköpostiohjelmat ja tietyt tulostustyökalut eivät kuitenkaan osaa lukea vektorikoodia. Tiedoston muuntaminen Portable Network Graphics -tiedostoksi ratkaisee tämän ongelman maalaamalla vektorimuodot värillisten pikseleiden kiinteään ruudukkoon. Verkkokehittäjät ja graafiset suunnittelijat tarvitsevat usein tätä muunnosta valmistellessaan kuvakkeita mobiilisovelluskauppoihin tai vanhoille alustoille. Sovelluskaupat vaativat sovelluskuvakkeille tiettyjä rasterimittoja. Muuttamalla vektorilähteen kiinteäksi kuvaruudukoksi tekijät varmistavat, että grafiikka näkyy oikein jokaisella laitteella ilman, että kohdesovelluksen tarvitsee jäsentää XML-koodia.
Tekniset tiedot ja koodekkien erittely
SVG-tiedostot käyttävät MIME-tyyppiä image/svg+xml ja koostuvat pelkistä tekstimuotoisista XML-tunnisteista, jotka on suljettu merkintäsulkujen väliin. Ne eivät käytä taikamerkkejä, koska ne ovat ihmisen luettavissa olevia tekstitiedostoja. PNG-tiedostot käyttävät MIME-tyyppiä image/png ja alkavat tarkalla kahdeksan tavun taikamerkkialulla 89 50 4E 47 0D 0A 1A 0A. Rakennetasolla SVG perustuu matemaattisiin polkuohjeisiin ja koordinaatteihin. PNG perustuu DEFLATE-algoritmilla pakattuun pikselien rasteriruudukkoon, jossa yhdistetään LZ77-liukuvan sanakirjan täsmäytys ja Huffmanin koodaus häviöttömään pakkaukseen.
Käyttöjärjestelmien ja selaimien yhteensopivuus
SVG-tiedostot avautuvat natiivisti kaikissa nykyaikaisissa verkkoselaimissa, mukaan lukien Chrome, Safari, Firefox ja Edge, mutta niitä ei tueta vanhemmissa työpöytäohjelmistoissa, kuten Microsoft Officen vanhoissa versioissa. PNG-kuvissa on yleinen yhteensopivuus kaikkien suurten käyttöjärjestelmien kanssa, mukaan lukien Windows, macOS, Linux, iOS ja Android. Jokainen nykyaikainen verkkoselain, kuvankatseluohjelma ja toimisto-ohjelmisto avaa PNG-tiedostot ilman lisäliitännäisiä.
💡 Hyödyllistä tietoa
Kun muunnat vektoreita rastereiksi, valitse lopullista näyttökohdetta vastaava resoluutiokoko. Vienti kaksinkertaisilla mitoilla luo terävän kuvan tiheille Retina-näytöille.
Muotojen vertailu ja tekniset tiedot
Tyypillinen logovektoritiedosto on kooltaan noin 15 kt. Sen muuntaminen korkean resoluution PNG-kuvaksi luo noin 250 kt:n tiedoston. Nopealla kuituyhteydellä tämä tiedosto siirtyy alle millisekunnissa. 5G-mobiiliyhteydellä siirtoon kuluu noin kaksi millisekuntia ja tavallisella 4G-verkolla siirto valmistuu noin kymmenessä millisekunnissa.
Usein kysytyt kysymykset
Miten SVG-vektorikuva muunnetaan PNG-kuvaksi laatua menettämättä?
Jotta tulos pysyy terävänä, hahmonna vektorigrafiikka korkeilla pikselimitoilla ennen PNG-tiedostoissa käytettävän häviöttömän DEFLATE-pakkauksen soveltamista. Koska molemmat muodot ovat häviöttömiä, muunnos säilyttää jokaisen terävän reunan ja värin tarkasti, kunhan lopullista pikseliruudukkoa ei skaalata suuremmaksi kuin sen luotu koko.
Mitä eroa on SVG-vektorilla ja PNG-kuvalla?
SVG on vektorimuoto, joka on rakennettu XML-tekstiohjeista, jotka skaalautuvat äärettömästi ilman pikselöintiä. PNG on rasterimuoto, joka on rakennettu erillisten värillisten pikseleiden kiinteästä ruudukosta. Vektorit sopivat parhaiten koonmuutokseen ja responsiiviseen verkkosuunnitteluun, kun taas rasterit sopivat parhaiten monimutkaisiin valokuvatekstuureihin ja yleiseen ohjelmistojen yhteensopivuuteen.