# Vie SVG ja läpinäkyvä PNG Gradientlystä

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

Joskus tarvitset suunnitelman ilman ympäröivää laatikkoa: skaalautuvan tiedoston sivustolle tai tekstin ja logon läpinäkyvällä taustalla muun kuvan päälle. Näin eri viennit toimivat.

## The short version

- Gradientlyn SVG-vienti säilyttää sanat oikeana tekstinä, fontit tiedostoon pakattuina sekä muodot, kuvakkeet, kaaviot ja taulukot vektoreina.
- SVG:n sisällä Mark ja valokuvat ovat kuvia, joten teksti ja muodot skaalautuvat täydellisesti mutta tausta ei rajattomasti.
- SVG sisältää yhden sivun, joten karuselli tai esitys vie yhden SVG:n jokaisesta valitsemastasi sivusta.
- Läpinäkyvä tausta vie vain omat elementtisi PNG:nä ilman Markia, valmiina toisen kuvan tai värin päälle.
- SVG:n ja läpinäkyvän PNG:n vienti kuuluu Prohon.

Kun haluat **viedä SVG:n** Gradientlystä, avaa suunnitelma Studiossa, valitse **Vie** ja sitten **SVG**. Sanat pysyvät tekstinä omissa tiedostoon pakatuissa fonteissaan. Muodot, kuvakkeet, kaaviot ja taulukot säilyvät vektoreina, Mark ja valokuvat ovat kuvia tiedoston sisällä. **Läpinäkyvää PNG:tä** varten valitse PNG ja ota **Läpinäkyvä tausta** käyttöön: saat vain omat elementtisi ilman Markia. Molemmat kuuluvat Prohon.

## SVG, PNG vai läpinäkyvä PNG

| Vienti | Mitä saat | Käyttökohde |
| --- | --- | --- |
| **SVG** | Yksi sivu skaalautuvana tiedostona: oikea teksti, vektorimuodot ja Mark kuvana | Sivustot, asettelun luovutus kehittäjälle, jatkomuokkaus Figmassa tai Illustratorissa |
| **PNG** | Koko suunnitelma pikseleinä, enintään 4K | Somejulkaisut, viestit ja kaikki, missä kuvan tulee vain näyttää oikealta |
| **Läpinäkyvä PNG** | Vain omat elementtisi läpinäkyvällä taustalla | Logokokonaisuus, tarra tai teksti valokuvan tai videon päälle |

Jos tarvitset vain kuvan suunnitelmasta, PNG on yksinkertaisempi. Valitse SVG muokkausta tai skaalausta varten ja läpinäkyvyys muun sisällön päälle sijoitettavaksi.

Muotojen yleisiä eroja käsittelee [SVG ja PNG](https://gradiently.design/fi/guide/svg-vs-png). Tämä opas kertoo, mitä Gradiently tallentaa kumpaankin tiedostoon.

## Mikä säilyy vektorina SVG-viennissä

### Vektori: terävä kaikissa ko’oissa

- Sanat oikeana valittavana ja muokattavana tekstinä
- Fontit tiedostoon pakattuina
- Muodot ja viivat
- Kuvakkeet
- Kaaviot ja taulukot

### Kuvat SVG:n sisällä

- Mark eli elävä tausta
- Lisäämäsi valokuvat
- Teksti fontilla, jonka lisenssi estää upottamisen

SVG sopii siis otsikkoon, jonka pitää pysyä terävänä 4K-näytöllä, tai asetteluun, jonka kehittäjä toteuttaa sivulle. Se sopii huonommin taustan suurentamiseen mainostauluksi. Mark piirretään kuvaksi suunnitelman omassa koossa. Jos tarvitset suuremman taustan, vie PNG suuremmassa koossa. Mark on elävä renderöinti, ei kiinteä joukko vektorimuotoja, joten sitä ei voi muuttaa poluksi.

> **Fontit ja lisenssit** Lataamasi brändifontit kulkevat SVG:n sisällä vain, jos fontin lisenssi sallii upottamisen. Muuten Gradiently piirtää kyseisen tekstin pikseleinä, jotta tiedosto näyttää silti oikealta. [Fonttien lisensointi](https://gradiently.design/fi/guide/font-licensing) selittää rajoitukset.

## SVG:n vienti

1. **Valitse sivu** SVG sisältää yhden sivun. Valitse karusellin tai esityksen sivu viennissä ja toista muille.
2. **Valitse SVG** Avaa **Vie** ja valitse **SVG**, jonka kuvaus on skaalautuva, teksti pysyy tekstinä. Esikatselu näyttää sivun koon.
3. **Lataa** Valitse **Lataa SVG**. Tiedosto tallentuu selaimesi latauskansioon.
4. **Käytä verkossa** Sijoita kiinteä grafiikka `img`-tagilla tai lisää SVG suoraan HTML:ään, jos haluat tyylitellä tekstiä CSS:llä.

```html
<!-- As an image: simplest, cached, text is not selectable -->
<img src="/images/summer-launch.svg" width="1200" height="630" alt="Summer launch: new colours from 1 June">

<!-- Inline: text is real, selectable and readable by search engines -->
<div class="hero-art">
  <!-- paste the contents of summer-launch.svg here -->
</div>
```

Anna kuvana käytetylle SVG:lle aina kuvaava vaihtoehtoinen teksti. MDN:n [SVG-viite](https://developer.mozilla.org/en-US/docs/Web/SVG) käsittelee muotoa tarkemmin.

SVG avautuu myös Figman ja Illustratorin kaltaisissa suunnittelutyökaluissa, jotka lukevat tekstin ja vektorimuodot muokattaviksi tasoiksi. Se sopii luovutettavaksi henkilölle, joka sovittaa asettelun Gradientlyn ulkopuoliseen muotoon, kuten painetun kyltin omaan pohjaan, tai kehittäjälle, joka toteuttaa suunnitelmastasi sivun osan. Lähetä rinnalle PNG visuaaliseksi vertailuksi, jotta Markin oikea ilme on selvä.

## Läpinäkyvän PNG:n vienti

Valitse viennissä **PNG** ja ota **Läpinäkyvä tausta** käyttöön. Kaikki sijoittamasi elementit, teksti, logo, muodot ja valokuvat, säilyvät. Mark jää pois, ja elementtien ympäristö on läpinäkyvä. Valitse koko enintään 4K. Näin viety teksti, logo ja tunnuslause voidaan sijoittaa tuotekuvan, toisessa editorissa tehdyn videon tai värillisen dian päälle.

Neliösuunnitelma, jossa Northlight-nimilogo ja pieni tunnuslause lämpimällä liukuvärillä

Koko suunnitelma: nimilogo oman Markin päällä, valmis julkaistavaksi sellaisenaan.

Sama Northlight-nimilogo ja tunnuslause läpinäkyvän viennin jälkeen viileämmän liukuvärin päällä

Läpinäkyvällä taustalla viety nimilogo ja tunnuslause kulkevat itsenäisinä ja sopivat toiselle taustalle muuttumatta.

- **Tarkista tekstiväri kohdetta vasten.** Tummalle Markille viety vaalea teksti katoaa valkoisella sivulla. Vaihda tummaan musteeseen ennen vientiä, jos kohde on vaalea.
- **Rajaa sivu sisällön lähelle.** Läpinäkyvä PNG säilyttää koko sivukoon. Pienennä sivua lähemmäs elementtejä ennen vientiä, jos haluat tiiviin tiedoston.
- **Säilytä molemmat logoversiot.** Vie yksi tummalle ja toinen vaalealle pohjalle, kuten brändipaketissa. [Logo liukuväritaustalla](https://gradiently.design/fi/guide/logo-on-gradient-background) kertoo miksi.
- **Käytä PNG:tä, älä JPEG:iä.** JPEG ei tue läpinäkyvyyttä, joten läpinäkyvä suunnitelma saa siinä tasaisen taustan.

## Läpinäkyvän PNG:n sijoittaminen verkkosivulle

Läpinäkyvä PNG asettuu siististi minkä tahansa CSS-taustan päälle. Se on kätevää, kun teksti pysyy samana mutta tausta vaihtuu osion tai teeman mukaan. Aseta liukuväri alle ja grafiikka sen päälle.

```css
.launch-banner {
  aspect-ratio: 1200 / 600;
  background:
    url("/images/launch-words.png") center / contain no-repeat,
    linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f0abfc 100%);
}
```

Läpinäkyvä PNG on päällä ja liukuväri alla. Vaihda liukuväri sivukohtaisesti, niin grafiikka pysyy samana.

Indigosta violetin kautta orkideaan: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f0abfc 100%)`

Yllä olevan koodin tausta: syvästä indigosta violetin kautta pehmeään orkideansävyyn oikeassa alakulmassa.

Päinvastaisen tapauksen, läpinäkyvyyteen häipyvän CSS-liukuvärin, esittelee [läpinäkyvä CSS-liukuväri](https://gradiently.design/fi/guide/css-gradient-transparent). Kaikki tiedostomuodot kokoaa [suunnitelmien vienti](https://gradiently.design/fi/guide/export-images-and-loops): PNG, JPEG, PDF, video ja GIF.

## FAQ

### Miten vien SVG:n Gradientlystä?

Avaa suunnitelma, valitse Vie, sitten SVG ja lataa. SVG sisältää yhden sivun, joten valitse monisivuisen suunnitelman sivu ensin.

### Säilyttääkö SVG-vienti tekstin muokattavana?

Kyllä. Sanat säilyvät oikeana tekstinä, ja fontit pakataan tiedostoon. Jos fontin lisenssi kieltää upottamisen, kyseinen teksti piirretään pikseleinä.

### Onko liukuväritausta vektori SVG-viennissä?

Ei. Mark on elävä renderöinti, joten se lisätään SVG:n sisälle kuvana. Muodot, kuvakkeet, kaaviot, taulukot ja teksti ovat vektoreita.

### Miten vien PNG:n läpinäkyvällä taustalla?

Valitse viennissä PNG ja ota Läpinäkyvä tausta käyttöön. Omat elementtisi säilyvät läpinäkyvällä taustalla, Mark jätetään pois.

### Voinko viedä SVG:n ilmaisella tilauksella?

Et. Ilmaiset viennit ovat PNG tai JPEG 720p:n tarkkuudella ja pienellä vesileimalla. SVG, PDF ja läpinäkyvä PNG kuuluvat Prohon.