PNG vs. SVG.

Rasteri vs. vektori

Ehkä perustavanlaatuisin ero PNG:n ja SVG:n välillä on, että toinen on rasteritiedostotyyppi ja toinen vektori.

PNG on rasterikuvamuoto — mikä tarkoittaa pikselipohjainen. Jos suurennat rasterikuvaa liian pitkälle, siitä tulee rakeinen ja pikseloitu. Jos kuva on liian pieni, se voi muuttua vastaavasti epäselväksi. Vaikka PNG-tiedostot pystyvät käsittelemään erittäin suuria resoluutioita, niitä ei voi laajentaa loputtomasti.

Toisaalta SVG-tiedostot ovat vektoripohjaisia — ne koostuvat monimutkaisesta matemaattisesta viivojen, pisteiden, muotojen ja algoritmien verkostosta. Ne voivat laajentua mihin tahansa kokoon menettämättä resoluutiotaan

Lue lisää rasterista vs. vektorista.

Tiedostokoot.

PNG-tiedostokoot ovat usein suuria, jotta ne voivat käsitellä suura resoluutioita. Niiden koko tarkoittaa, että niiden käsittely, jakaminen, tallennus ja avaus voi kestää kauemmin. Tämä voi myös hidastaa sivujen latausaikoja

minkä vuoksi JPEG-tiedostot ovat yleisempiä verkkokuville. On olemassa kuitenkin pienempi 8-bittinen PNG-versio, mutta se voi tukea vain 256 väriä.

SVG-tiedostot ovat kooltaan paljon pienempiä kuin PNG:t, eivätkä ne todennäköisesti hidasta tietokonetta tai verkkosivustoa. (Hyvin yksityiskohtaiset mallit voivat kuitenkin hidastaa SVG-tiedoston.) Koska SVG-tiedostot ovat vektoritiedostomuotoja, voit muuttaa niiden kokoa suuremmaksi tai pienemmäksi laadun heikkenemättä.

Pakkaus.

SVG-tiedostojen pakkaus on häviötöntä

mikä tarkoittaa, että ne voidaan pakata pienempiin tiedostokokoihin niiden tarkkuuden, yksityiskohtien tai laadun kärsimättä

PNG-tiedostot hyötyvät häviöttömästä pakkauksesta 5–20 %, mikä voi auttaa kompensoimaan niiden suurta tiedostokokoa. Ne ovat kuitenkin todennäköisesti suurempia kuin SVG.

Valokuvaus.

PNG-tiedostot eivät ole yleinen valinta verkkovalokuville, kuten edellä on käsitelty. Ne voivat kuitenkin käsitellä erittäin yksityiskohtaisia, korkealaatuisia digitaalisia valokuvia tulostusta, editointia ja muita tarkoituksia varten. Ne ovat tavallinen tiedostomuoto:Adobe Photoshopissa.

SVG:t sen sijaan eivät käytä pikseleitä

joten niillä on vaikeuksia näyttää korkeatasoisia valokuvia.

Verkkokäyttö

Sekä PNG- että SVG-tiedostot voivat esittää monimutkaisia yksityiskohtia verkkografiikasta, kuvituksista, logoista, infografiikoista ja taulukoista.

SVG:llä on kuitenkin keskeinen etu, joka on XML-ohjelmointikieli. Tämä tarkoittaa, että jokainen esitetty SVG-tiedosto on kirjoitettu tekstinä koodin sijaan. Tämän seurauksena näytönlukijat ja hakukoneet voivat analysoida niitä — joten ne sopivat erinomaisesti esteettömyys- ja hakukoneoptimointitarkoituksiin.

SVG-tiedostot ovat myös yleensä pienempiä, mikä nopeuttaa niiden lataamista sivulle. Sivujen latausajat ovat toinen kriittinen tekijä hakukonesijoituksissa.

PNG tukee myös joitakin tekstipohjaisia​grafiikoita

mutta ei samassa määrin.

Yhteensopivuus ja monimutkaisuus

SVG-tiedostoja pidetään kehittyneempänä tiedostotyyppinä kuin PNG-tiedostoja, mutta ne eivät itse asiassa ole yhteensopivia kaikkien selainten ja käyttöjärjestelmien kanssa. Lisäksi niiden ohjelmointikieli ja vektoripohjainen koostumus voivat olla tuntemattomia ja pelottavia uusille käyttäjille.

PNG-tiedostot puolestaan ovat verkossa standardimuoto, jota useat verkkoselaimet ja käyttöjärjestelmät tukevat.

Animaatio.

PNG-tiedostot eivät tue animaatiota — toisin kuin vastaava rasteripohjainen kuvatiedosto, GIF.

SVG-tiedostot tukevat animaatioita, mutta eivät yhtä helposti kuin muut tiedostotyypit, kuten AI Adobe Illustrator -natiivimuoto.

Lue lisää AI-tiedostoista.

Läpinäkyvyys.

PNG- ja SVG-tiedostot tukevat läpinäkyvyyttä

joten ne ovat molemmat loistavia valintoja logoille ja grafiikalle verkossa.

On syytä huomata, että PNG-tiedostot ovat yksi parhaista vaihtoehdoista rasteripohjaiselle läpinäkyvälle tiedostolle. Jos työskentelet pikselien ja läpinäkyvyyden parissa, PNG:t ovat parempi vaihtoehto kuin SVG.

1. Avaa Adobe Illustrator.
2. Napsauta Tiedosto > Avaa ja valitse kuva tietokoneesta.
3. Valitse Avaa.
4. Napsauta ylävalikosta jäljitysvaihtoehtoa ja valitse kuvan jäljitys.
5. Säädä muunnos määritystesi mukaan — tämä voi sisältää värin muutoksen.
6. Kun prosessi on valmis, valitse jäljityskuvas ja napsauta Pura ryhmittely. Tämä erottelee värimuodot.
7. Napsauta Tiedosto > Vie.
8. Tallenna tiedosto SVG-muodossa.

1. Avaa Adobe Photoshop.
2. Valitse Tiedosto > Avaa.
3. Valitse SVG-tiedosto tietokoneesta.
4. Napsauta Vie > Vie nimellä > PNG.
5. Tallenna tiedosto PNG-muodossa.