# Exportera SVG och transparent PNG från Gradiently
[Canonical HTML page](https://gradiently.design/sv/guide/export-svg-transparent-png)
Ibland behöver du designen utan rutan runt: en skalbar fil för en webbplats, eller dina ord och din logotyp på klar bakgrund att lägga över något annat. Här är vad varje export ger dig, och vad den inte gör.
## The short version
- Gradiently SVG-export behåller ord som äkta text i sina egna typsnitt, inpackade i filen, och behåller former, ikoner, diagram och tabeller som vektorer.
- Inne i en SVG är Marken och eventuella foton bilder, så filen skalar perfekt för text och former men inte oändligt för bakgrunden.
- En SVG rymmer en sida, så en karusell eller presentation exporterar en SVG per sida du väljer.
- Transparent bakgrund exporterar bara dina element som en PNG, med Marken utelämnad, redo att läggas över en annan bild eller färg.
- SVG- och transparent PNG-export ingår i Pro.
För att **exportera SVG** från Gradiently öppnar du en design i Studion, väljer **Export** och **SVG**. Ord förblir ord, i sina egna typsnitt inpackade i filen. Former, ikoner, diagram och tabeller förblir vektorer, och Marken och fotona följer med som bilder i den. För en **transparent PNG** väljer du PNG och slår på **Transparent bakgrund**: du får bara dina element på en klar bakgrund, med Marken utelämnad. Båda ingår i Pro.
## SVG, PNG eller transparent PNG
| Export | Vad du får | Använd den till |
| --- | --- | --- |
| **SVG** | En sida som en skalbar fil: levande text, vektorformer, Marken som en bild | Webbplatser, att lämna över en layout till en utvecklare, vidare redigering i Figma eller Illustrator |
| **PNG** | Hela designen som pixlar, upp till 4K | Publicering i sociala medier, meddelanden, allt som bara behöver se rätt ut |
| **Transparent PNG** | Bara dina element, på en klar bakgrund | En logotypsammansättning, ett klistermärke, ord att lägga över ett foto eller en video |
Behöver du bara en bild av designen är PNG enklare. Ta SVG när någon ska redigera eller skala filen, och transparens när den ska ligga ovanpå något annat.
Den allmänna avvägningen mellan de två formaten tas upp i [SVG mot PNG](https://gradiently.design/sv/guide/svg-vs-png). Den här guiden handlar om vad Gradiently lägger i varje fil.
## Vad som förblir vektor i en SVG-export
### Vektor: skarp i alla storlekar
- Ord, som äkta text du kan markera och redigera
- Typsnitt, inpackade i filen
- Former och linjer
- Ikoner
- Diagram och tabeller
### Bilder inne i SVG:n
- Marken, den levande bakgrunden
- Foton du lagt till
- Typsnitt vars licens förbjuder inbäddning
Så en SVG är perfekt för en rubrik som måste vara skarp på en 4K-skärm, eller en layout som en utvecklare bygger in på en sida, och mindre användbar om du hoppas kunna förstora bakgrunden till biljettstorlek. Marken renderas som en bild i designens egen storlek. För en större bakgrund, exportera en PNG i större storlek i stället. En Mark är en levande rendering snarare än en fast uppsättning vektorformer, och därför kan den inte bli en bana.
> **Typsnitt och licenser** Varumärkestypsnitt du laddar upp följer med i SVG:n bara när typsnittets egen licens tillåter inbäddning. Gör den inte det ritar Gradiently den texten som pixlar i stället, så att filen ändå ser rätt ut. [Typsnittslicenser](https://gradiently.design/sv/guide/font-licensing) förklarar flaggorna.
## Så exporterar du en SVG
1. **Välj sidan** En SVG rymmer en sida. På en karusell eller presentation väljer du sidan i Export och upprepar för de andra.
2. **Välj SVG** Öppna **Export** och välj **SVG**, beskrivet som skalbart, text förblir text. Förhandsvisningen visar sidans storlek.
3. **Ladda ner** Välj **Ladda ner SVG**. Filen sparas där din webbläsare sparar nedladdningar.
4. **Använd den på webben** Placera den med en `img`-tagg för en fast grafik, eller infoga den direkt i HTML när du vill styla texten med CSS.
```html
```
Ge alltid en SVG som används som bild en riktig alt-text. MDN:s [SVG-referens](https://developer.mozilla.org/en-US/docs/Web/SVG) går igenom formatet på djupet.
En SVG öppnas också i designverktyg som Figma och Illustrator, som läser texten och vektorformerna som redigerbara lager. Det gör den till rätt fil att lämna till någon som behöver anpassa en layout till ett format Gradiently inte täcker, som en tryckt skylt med egen mall, eller en utvecklare som bygger en sidsektion av din design. Skicka PNG:n med som visuell referens, så att de ser exakt hur Marken ska se ut.
## Så exporterar du en transparent PNG
Välj **PNG** i Export och slå på **Transparent bakgrund**. Allt du placerat, ord, logotyp, former och foton, finns kvar. Marken utelämnas, och ytan runt dina element är genomskinlig. Välj en storlek upp till 4K. Bokstäver, en logotyp och en slogan som exporterats så kan ligga över ett produktfoto, en video i ett annat redigeringsprogram eller en färgad bild.
En kvadratisk design med ordmärket Northlight och en liten slogan på en varm gradient
Hela designen: ordmärket på sin Mark, för publicering som den är.
Samma ordmärke Northlight och slogan placerade över en annan, kallare gradient efter en transparent export
Exporterade med Transparent bakgrund följer ordmärket och slogan med på egen hand och kan läggas över en annan bakgrund, oförändrade.
- **Kontrollera färgen mot var den ska hamna.** Ljus text exporterad för en mörk Mark försvinner på en vit sida. Byt till mörk färg före exporten om målet är ljust.
- **Beskär sidan till innehållet.** En transparent PNG behåller hela sidans storlek. Ändra sidans storlek närmare dina element först om du vill ha en tight fil.
- **Behåll båda logotypversionerna.** Exportera en för mörka bakgrunder och en för ljusa, på samma sätt som ett varumärkespaket rymmer båda. [Logotyp på gradientbakgrund](https://gradiently.design/sv/guide/logo-on-gradient-background) visar varför.
- **Använd PNG, inte JPEG.** JPEG saknar transparens, och en transparent design sparad som JPEG får en solid bakgrund.
## Att lägga en transparent PNG på webben
En transparent PNG lägger sig rent över vilken CSS-bakgrund som helst, vilket är bra när orden är fasta men fonden ändras per sektion eller tema. Lägg den ovanpå en gradient så ligger din grafik överst.
```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 transparenta PNG:n ligger överst, gradienten under. Byt gradient per sida så förblir grafiken densamma.
Indigo till violett till orkidé: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f0abfc 100%)`
Fonden från koden ovan: djup indigo via violett till en mjuk orkidé nere till höger.
För det omvända fallet, en gradient som tonar ut till transparens i CSS, se [CSS-gradient transparent](https://gradiently.design/sv/guide/css-gradient-transparent). Och när du behöver alla format på ett ställe täcker [exportera designer](https://gradiently.design/sv/guide/export-images-and-loops) PNG, JPEG, PDF, video och GIF tillsammans.
## FAQ
### Hur exporterar jag en SVG från Gradiently?
Öppna designen, välj Export, sedan SVG, och ladda ner. En SVG rymmer en sida, så välj sidan först i en design med flera sidor.
### Behåller SVG-exporten text som går att redigera?
Ja. Ord förblir äkta text, med sina typsnitt inpackade i filen, om inte ett typsnitts licens förbjuder inbäddning, och då ritas den texten som pixlar.
### Är gradientbakgrunden vektor i en SVG-export?
Nej. Marken är en levande rendering, så den ingår som en bild inne i SVG:n. Former, ikoner, diagram, tabeller och text är vektorer.
### Hur exporterar jag en PNG med transparent bakgrund?
Välj PNG i Export och slå på Transparent bakgrund. Dina element behålls och Marken utelämnas, på en klar bakgrund.
### Kan jag exportera SVG i gratisplanen?
Nej. Gratis exporter är PNG eller JPEG i 720p med en liten vattenstämpel. SVG, PDF och transparent PNG ingår i Pro.