# SVG vai PNG: vektori vai pikselit logoihin ja grafiikkaan

[Canonical HTML page](https://gradiently.design/fi/guide/svg-vs-png)

SVG on joukko piirto-ohjeita. PNG on kiinteä pisteiden ruudukko. Tämä yksi ero ratkaisee, kumpi tiedosto sopii verkkosivullesi, pakkaukseesi ja Instagramiisi.

## The short version

- SVG on vektorimuoto, joka kuvaa muodot matematiikan avulla ja pysyy siksi täysin terävänä joka koossa.
- PNG on rasterimuoto, joka koostuu kiinteästä pikseliruudukosta ja muuttuu siksi pehmeäksi tai palikoituneeksi alkuperäistä kokoa suuremmaksi venytettynä.
- Käytä SVG:tä logoihin, kuvakkeisiin, yksinkertaisiin kuvituksiin ja käyttöliittymägrafiikkaan verkossa ja painossa.
- Käytä PNG:tä valokuviin, tekstuureihin, monimutkaiseen kuvataiteeseen ja kaikkeen, mitä lataat somealustoille, jotka eivät hyväksy SVG:tä.
- Hyvä logopaketti sisältää molemmat: SVG-masterin ja PNG-viennit kunkin käyttökohteen tarvitsemissa ko’oissa.

**SVG vai PNG** tarkoittaa oikeastaan vektorin ja pikselien valintaa. SVG-tiedosto tallentaa muodot ohjeina (piirrä tähän ympyrä, täytä se tällä värillä), joten selain tai tulostin piirtää ne terävinä joka koossa, 16 pikselin sivustokuvakkeesta myymäläkylttiin. PNG tallentaa kiinteän ruudukon värillisiä pikseleitä, joten se näyttää täydelliseltä omassa koossaan ja pehmeältä suurennettuna. Käytä SVG:tä logoihin, kuvakkeisiin ja yksinkertaiseen grafiikkaan verkossa ja painossa. Käytä PNG:tä valokuviin, teksturoituihin kuviin ja kaikkeen, mitä lataat sosiaaliseen mediaan.

## Mikä SVG-tiedosto oikeastaan on

SVG tulee sanoista Scalable Vector Graphics, ja se on tavallista tekstiä. Avaa tiedosto koodieditorissa, niin näet luettavaa merkintäkieltä, et kohinaa. Siksi yksinkertaisia muotoja sisältävät SVG:t ovat pieniä, niiden värejä voi vaihtaa CSS:llä ja hakukoneet sekä ruudunlukijat voivat lukea niiden sisällä olevan tekstin.

```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Studio Nine">
  <defs>
    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#4f46e5"/>
      <stop offset="1" stop-color="#db2777"/>
    </linearGradient>
  </defs>
  <circle cx="32" cy="32" r="28" fill="url(#g)"/>
  <path d="M22 40 L32 20 L42 40 Z" fill="#ffffff"/>
</svg>
```

Kokonainen logomerkki muutamassa sadassa tavussa. `viewBox` määrittää piirroksen koordinaatiston, mutta sivu päättää sen näyttökoon.

Saman merkin PNG-versio tarvitsee erillisen tiedoston jokaiseen kokoon, jossa sen pitää olla terävä. Minkään niistä väriä ei voi vaihtaa viemättä kuvaa uudelleen. [MDN:n SVG-dokumentaatio](https://developer.mozilla.org/en-US/docs/Web/SVG) käsittelee formaatin kokonaisuudessaan.

## SVG ja PNG rinnakkain

| Ominaisuus | SVG | PNG |
| --- | --- | --- |
| Tyyppi | Vektori: muodot ja polut | Rasteri: pikseliruudukko |
| Skaalautuminen | Terävä joka koossa | Terävä omassa koossaan, pehmeä suurennettuna |
| Läpinäkyvyys | Kyllä | Kyllä, täysi alfakanava |
| Valokuvat ja tekstuuri | Huono: tiedostoista tulee valtavia tai toteutus mahdoton | Erinomainen |
| Muokattavissa koodilla | Kyllä: värit, animointi, CSS | Ei |
| Lataaminen someen | Ei hyväksytä | Hyväksytään kaikkialla |
| Tyypillinen koko, yksinkertainen logo | 1 ja 10 KB välillä | 10 ja 100 KB välillä kokoa kohti |

## SVG vai PNG logolle

Säilytä alkuperäinen logo SVG:nä. Se on ainoa tiedosto, joka palvelee kaikkia tulevia käyttötapoja: verkkosivun yläosaa, 4 metrin banneria, kirjontaa, kirjepohjaa ja sivustokuvaketta. Vie siitä sitten PNG:t paikkoihin, jotka eivät hyväksy vektoreita, lähinnä somealustoille, sähköpostiallekirjoituksiin ja joihinkin esitystyökaluihin.

| Logon käyttökohde | Tiedosto | Koko |
| --- | --- | --- |
| Verkkosivun ylä- ja alatunniste | SVG | Skaalautuu tilaan |
| Sivustokuvake | SVG ja PNG-varaversiot | ICO 32×32, PNG:t 180×180, 192×192 ja 512×512 |
| Instagramin, LinkedInin tai X:n profiilikuva | PNG | 1080×1080-neliö, pidä merkki keskiympyrän sisällä |
| Sähköpostiallekirjoitus | PNG | Enintään 600×200, vienti kaksinkertaisessa näyttökoossa |
| Painotalo, kylttivalmistaja, oheistuotteet | SVG tai PDF | Vektori, mikä tahansa koko |

Yksi SVG-master ja muutama PNG-vienti. [Logon koot](https://gradiently.design/fi/guide/logo-sizes) ja [logon variaatiot](https://gradiently.design/fi/guide/logo-variations) syventävät aihetta.

Neliönmuotoinen profiilikuva, jossa yksinkertainen tekstilogo on keskitetty liukuväritaustalle

Profiilikuvat ovat aina PNG- tai JPG-kuvia. Vie logo suurena, 1080×1080, jotta se pysyy terävänä suuren pikselitiheyden näytöillä.

## Milloin PNG on oikea valinta

Vektori toimii vain, kun kuvan voi kuvata muotoina. Kun kuvassa on valokuvamaista yksityiskohtaisuutta, pehmeää valoa, rakeisuutta tai tuhansia hienovaraisia värimuutoksia, PNG on pienempi ja uskollisempi. Valokuvan vektorointi SVG:ksi tuottaa tiedoston, joka on sekä raskaampi että huonompi.

- Valokuvat ja valokuvakollaasit.
- Teksturoidut kuvat: rakeisuus, paperi, siveltimenvedot ja filmitehosteet.
- Somejulkaisut, tarinat ja karusellit, sillä alustat hyväksyvät vain pikseleitä.
- Kuvakaappaukset ja kaikki näytöltä tallennettu.
- Runsaat taustat, joissa valo ja kohina kerrostuvat.

Neliögrafiikka, jossa lukee Vektori ja joka kuvaa SVG:lle sopivia tasaisia muotoja

Tasaiset muodot, puhtaat reunat ja muutama väri: ihanteellinen käyttökohde SVG:lle.

Neliögrafiikka, jossa lukee Pikselit teksturoidulla liukuvärillä ja joka kuvaa PNG:lle sopivia kuvia

Rakeisuus, pehmeä valo ja materiaalitekstuuri kuuluvat PNG:hen.

## SVG vai PNG verkkosivulle

Käytä sivuston logoihin, kuvakkeisiin ja kuvituksiin HTML:ään upotettua SVG:tä tai SVG-tiedostoa ja valokuviin moderneja formaatteja. SVG-kuvakkeet skaalautuvat tekstin mukana, voivat käyttää `currentColor`-arvoa teeman seuraamiseen eivätkä tarvitse erillisiä tiedostoja suuren pikselitiheyden näytöille. Rasterikuvissa [WebP](https://gradiently.design/fi/guide/webp-images) on omilla sivuillasi yleensä PNG:tä parempi valinta.

### Vältä

- Leveään ylätunnisteeseen venytetty PNG-logo
- Valokuva valtavaksi SVG:ksi vektoroituna
- Muiden tekemien SVG-tiedostojen lataaminen tarkistamatta ja puhdistamatta niitä
- PNG-kuvakkeet, joista tarvitaan 1x-, 2x- ja 3x-kopiot

### Tee näin

- SVG-logo, jonka leveys on määritetty CSS:llä
- Valokuvat WebP- tai JPG-muodossa niiden näyttökoossa
- Käsittele käyttäjien lataamaa SVG:tä koodina, koska se voi sisältää skriptejä
- SVG-kuvakkeet arvolla `fill: currentColor`

> **SVG voi sisältää koodia** Koska SVG on merkintäkieltä, tuntemattomasta lähteestä tuleva tiedosto voi sisältää skriptejä. Salli SVG-lataukset sivustollesi vain, jos tiedostot puhdistetaan, tai muunna ne PNG:ksi latauksen yhteydessä.

## Miten muunnat SVG:n PNG:ksi

1. **Päätä suurin tarvitsemasi koko** Profiilikuva 1080×1080 tai sähköpostiallekirjoitus 1200×400 (kaksinkertainen sen 600×200-näyttökokoon nähden). Vie kerran siinä koossa sen sijaan, että suurentaisit myöhemmin.
2. **Vie alkuperäisestä tiedostosta** Vie kehys Figmassa, Illustratorissa tai Inkscapessa PNG:nä valitussa koossa. Vektorista vieminen pitää jokaisen reunan terävänä.
3. **Säilytä läpinäkyvyys** Jätä tausta tyhjäksi, jotta PNG saa alfakanavan. Sen tarkistamisesta lisää artikkelissa [läpinäkyvä tausta](https://gradiently.design/fi/guide/transparent-background).
4. **Tarkista 100% koossa** Katso ohuita viivoja ja pientä tekstiä todellisessa koossa. Jos ne hajoavat, yksinkertaista logoa pieneen käyttöön sen sijaan, että julkaisisit suttuisen tiedoston.

Toiseen suuntaan, PNG:stä SVG:ksi, kyse ei ole muuntamisesta vaan uudelleen piirtämisestä. Automaattinen vektorointi toimii selkeälle, tasaväriselle logolle mutta ei tekstuurille tai pehmeille reunoille. Jos logosi on olemassa vain PNG:nä, piirrätytä se kerran vektoriksi. Jokainen myöhempi tiedosto hyötyy siitä.

Gradientlyn Pro-viennit kattavat molemmat tarpeet: samasta tiedostosta voi viedä suunnitelman SVG:nä verkkoon ja painoon tai läpinäkyvänä PNG:nä alustoille. [SVG:n ja läpinäkyvän PNG:n vienti](https://gradiently.design/fi/guide/export-svg-transparent-png) näyttää miten, ja [PNG vai JPG](https://gradiently.design/fi/guide/png-vs-jpeg) ratkaisee toisen tavallisen valinnan.

## FAQ

### Onko SVG PNG:tä parempi logolle?

Alkuperäiseksi tiedostoksi kyllä: SVG-logo pysyy terävänä joka koossa, ja sen väriä voi vaihtaa. Vie PNG-kopiot sosiaaliseen mediaan ja sähköpostiin, jotka eivät hyväksy SVG:tä.

### Voinko ladata SVG:n Instagramiin?

Et. Instagram ja muut somealustat hyväksyvät PNG:n, JPG:n ja videon. Vie PNG alustan koossa, kuten 1080×1080 neliöjulkaisua varten.

### Onko SVG PNG:tä pienempi?

Yksinkertaisille muodoille, kuten logoille ja kuvakkeille, SVG on yleensä paljon pienempi. Valokuville ja teksturoiduille kuville PNG tai JPG on pienempi ja tarkempi.

### Tukeeko SVG läpinäkyvyyttä?

Kyllä. Kaikki, mitä SVG:hen ei ole piirretty, on läpinäkyvää, joten se asettuu siististi minkä tahansa taustan päälle.

### Voinko muuntaa PNG-logon SVG:ksi?

Vain vektoroimalla tai piirtämällä sen uudelleen. Automaattinen vektorointi toimii selkeille tasavärisille logoille. Yksityiskohtaiset tai teksturoidut logot täytyy piirtää käsin uudelleen vektoreiksi.