# Eksporter SVG og transparent PNG fra Gradiently
[Canonical HTML page](https://gradiently.design/nb/guide/export-svg-transparent-png)
Noen ganger trenger du designet uten boksen rundt: en skalerbar fil til en nettside, eller ordene og logoen din på gjennomsiktig bakgrunn som kan legges over noe annet. Her er hva hver eksport gir deg, og hva den ikke gir.
## The short version
- SVG-eksporten i Gradiently beholder ord som ekte tekst i sine egne fonter, pakket inn i filen, og beholder former, ikoner, diagrammer og tabeller som vektorer.
- Inne i en SVG er Marken og eventuelle bilder bilder, så filen skalerer perfekt for tekst og former, men ikke uendelig for bakgrunnen.
- En SVG rommer én side, så en karusell eller presentasjon eksporterer én SVG per side du velger.
- Gjennomsiktig bakgrunn eksporterer bare elementene dine som PNG, uten Marken, klare til å legges over et annet bilde eller en annen farge.
- Eksport av SVG og transparent PNG er en del av Pro.
For å **eksportere SVG** fra Gradiently åpner du et design i Studio, velger **Eksporter** og deretter **SVG**. Ord forblir ord, i sine egne fonter pakket inn i filen; former, ikoner, diagrammer og tabeller forblir vektorer; Marken og bilder kommer med som bilder inni den. For en **transparent PNG** velger du PNG og slår på **Gjennomsiktig bakgrunn**: du får bare elementene dine på en gjennomsiktig bakgrunn, uten Marken. Begge er en del av Pro.
## SVG, PNG eller transparent PNG
| Eksport | Hva du får | Bruk den til |
| --- | --- | --- |
| **SVG** | Én side som skalerbar fil: levende tekst, vektorformer, Marken som bilde | Nettsider, å gi et oppsett til en utvikler, videre redigering i Figma eller Illustrator |
| **PNG** | Hele designet som piksler, opptil 4K | Innlegg i sosiale medier, meldinger, alt som bare skal se riktig ut |
| **Transparent PNG** | Bare elementene dine, på gjennomsiktig bakgrunn | En logooppstilling, et klistremerke, ord som skal ligge over et bilde eller en video |
Trenger du bare et bilde av designet, er PNG enklere. Velg SVG når noen skal redigere eller skalere filen, og gjennomsiktighet når den skal ligge oppå noe annet.
Den generelle avveiningen mellom de to formatene tas opp i [SVG eller PNG](https://gradiently.design/nb/guide/svg-vs-png). Denne guiden handler om hva Gradiently legger i hver fil.
## Hva som forblir vektor i en SVG-eksport
### Vektor: skarpt i alle størrelser
- Ord, som ekte tekst du kan markere og redigere
- Fonter, pakket inn i filen
- Former og linjer
- Ikoner
- Diagrammer og tabeller
### Bilder inne i SVG-en
- Marken, den levende bakgrunnen
- Bilder du har lagt til
- Fonter der lisensen forbyr innbygging
En SVG er derfor perfekt for en overskrift som må holde seg skarp på en 4K-skjerm, eller et oppsett en utvikler skal bygge inn i en side, og mindre nyttig hvis du håper å blåse opp bakgrunnen til reklametavlestørrelse. Marken gjengis som et bilde i designets egen størrelse; for en større bakgrunn eksporterer du heller en PNG i en større størrelse. En Mark er en levende gjengivelse, ikke et fast sett vektorformer, og derfor kan den ikke bli en bane.
> **Fonter og lisenser** Merkevarefonter du laster opp følger med inne i SVG-en bare når fontens egen lisens tillater innbygging. Gjør den ikke det, tegner Gradiently den teksten som piksler i stedet, så filen fortsatt ser riktig ut. [Fontlisenser](https://gradiently.design/nb/guide/font-licensing) forklarer flaggene.
## Slik eksporterer du en SVG
1. **Velg siden** En SVG rommer én side. I en karusell eller presentasjon velger du siden i Eksporter; gjenta for de andre.
2. **Velg SVG** Åpne **Eksporter** og velg **SVG**, beskrevet som skalerbar, tekst forblir tekst. Forhåndsvisningen viser sidens størrelse.
3. **Last ned** Velg **Last ned SVG**. Filen lagres der nettleseren din lagrer nedlastinger.
4. **Bruk den på nettet** Sett den inn med en `img`-tagg for en fast grafikk, eller legg den inline i HTML-en når du vil style teksten med CSS.
```html
```
Gi alltid en SVG som brukes som bilde en ekte alt-tekst. MDNs [SVG-referanse](https://developer.mozilla.org/en-US/docs/Web/SVG) dekker formatet i dybden.
En SVG åpnes også i designverktøy som Figma og Illustrator, som leser teksten og vektorformene som redigerbare lag. Det gjør den til riktig fil å gi til noen som må tilpasse et oppsett til et format Gradiently ikke dekker, som et trykt skilt med egen mal, eller en utvikler som bygger en seksjon på en side fra designet ditt. Send PNG-en med som visuell referanse, så de ser nøyaktig hvordan Marken skal se ut.
## Slik eksporterer du en transparent PNG
Velg **PNG** i Eksporter og slå på **Gjennomsiktig bakgrunn**. Alt du har plassert, ord, logo, former, bilder, blir med; Marken holdes utenfor, og rommet rundt elementene dine er gjennomsiktig. Velg en størrelse opptil 4K. Bokstaver, en logo og et slagord eksportert på denne måten kan ligge over et produktbilde, en video i et annet redigeringsprogram eller et farget lysbilde.
Et kvadratisk design med ordmerket Northlight og et lite slagord på en varm gradient
Hele designet: ordmerket på sin Mark, klart til å postes som det er.
Det samme ordmerket Northlight og slagordet lagt over en annen, kjøligere gradient etter en transparent eksport
Eksportert med Gjennomsiktig bakgrunn reiser ordmerket og slagordet alene og kan legges over en annen bakgrunn, uendret.
- **Sjekk tekstfargen mot der den skal havne.** Lyse ord eksportert for en mørk Mark forsvinner på en hvit side. Bytt til mørk tekst før du eksporterer hvis målet er lyst.
- **Tilpass siden til innholdet.** En transparent PNG beholder hele sidestørrelsen. Gjør siden mindre, tettere rundt elementene, først hvis du vil ha en stram fil.
- **Behold begge logoversjonene.** Eksporter én for mørke bakgrunner og én for lyse, slik en merkevareprofil har begge. [Logo på gradientbakgrunn](https://gradiently.design/nb/guide/logo-on-gradient-background) viser hvorfor.
- **Bruk PNG, ikke JPEG.** JPEG har ikke gjennomsiktighet; et transparent design lagret som JPEG får en heldekkende bakgrunn.
## Plassere en transparent PNG på nettet
En transparent PNG legger seg rent over enhver CSS-bakgrunn, noe som er praktisk når ordene er faste, men bakgrunnen endrer seg etter seksjon eller tema. Stable den med en gradient bak, så ligger grafikken din oppå.
```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%);
}
```
Den transparente PNG-en ligger øverst, gradienten under. Bytt gradient per side, så forblir grafikken den samme.
Indigo til fiolett til orkidé: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f0abfc 100%)`
Bakgrunnen fra koden over: dyp indigo gjennom fiolett til en myk orkidétone nederst til høyre.
For det motsatte tilfellet, en gradient som toner ut til gjennomsiktig i CSS, se [CSS-gradient med gjennomsiktighet](https://gradiently.design/nb/guide/css-gradient-transparent). Og når du trenger alle formatene samlet, dekker [eksport av design](https://gradiently.design/nb/guide/export-images-and-loops) PNG, JPEG, PDF, video og GIF under ett.
## FAQ
### Hvordan eksporterer jeg en SVG fra Gradiently?
Åpne designet, velg Eksporter, så SVG, og last ned. En SVG rommer én side, så velg siden først i et design med flere sider.
### Kan teksten redigeres etter SVG-eksport?
Ja. Ord forblir ekte tekst, med fontene pakket inn i filen, med mindre en fontlisens forbyr innbygging, og da tegnes den teksten som piksler.
### Er gradientbakgrunnen vektor i en SVG-eksport?
Nei. Marken er en levende gjengivelse, så den legges inn som et bilde inne i SVG-en. Former, ikoner, diagrammer, tabeller og tekst er vektorer.
### Hvordan eksporterer jeg en PNG med gjennomsiktig bakgrunn?
Velg PNG i Eksporter og slå på Gjennomsiktig bakgrunn. Elementene dine beholdes og Marken holdes utenfor, på en gjennomsiktig bakgrunn.
### Kan jeg eksportere SVG med gratisplanen?
Nei. Gratis eksport er PNG eller JPEG i 720p med et lite vannmerke; SVG, PDF og transparent PNG er en del av Pro.