SVG vai PNG: vektori vai pikselit logoihin ja grafiikkaan

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.

<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>

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 käsittelee formaatin kokonaisuudessaan.

SVG ja PNG rinnakkain

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.

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.

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 on omilla sivuillasi yleensä PNG:tä parempi valinta.

Miten muunnat SVG:n PNG:ksi

1. 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. 2

   Vie alkuperäisestä tiedostosta

   Vie kehys Figmassa, Illustratorissa tai Inkscapessa PNG:nä valitussa koossa. Vektorista vieminen pitää jokaisen reunan terävänä.

3. 3

   Säilytä läpinäkyvyys

   Jätä tausta tyhjäksi, jotta PNG saa alfakanavan. Sen tarkistamisesta lisää artikkelissa läpinäkyvä tausta.

4. 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 näyttää miten, ja PNG vai JPG ratkaisee toisen tavallisen valinnan.