# SVG und transparentes PNG aus Gradiently exportieren
[Canonical HTML page](https://gradiently.design/de/guide/export-svg-transparent-png)
Manchmal brauchst du das Design ohne den Rahmen drumherum: eine skalierbare Datei für eine Website oder deine Worte und dein Logo auf transparentem Hintergrund, um sie über etwas anderes zu legen. Hier steht, was dir jeder Export gibt und was nicht.
## The short version
- Der SVG-Export von Gradiently behält Worte als echten Text in ihren eigenen Schriften, eingebettet in die Datei, und behält Formen, Icons, Diagramme und Tabellen als Vektoren.
- Innerhalb eines SVG sind der Mark und alle Fotos Bilder, sodass die Datei für Schrift und Formen perfekt skaliert, für den Hintergrund aber nicht unbegrenzt.
- Ein SVG enthält eine Seite, also exportiert ein Karussell oder eine Präsentation ein SVG pro gewählter Seite.
- Transparenter Hintergrund exportiert nur deine Elemente als PNG, ohne den Mark, bereit, über ein anderes Bild oder eine Farbe gelegt zu werden.
- SVG-Exporte und transparente PNG-Exporte gehören zu Pro.
Um ein **SVG zu exportieren**, öffnest du in Gradiently ein Design im Studio, wählst **Export** und dann **SVG**. Worte bleiben Worte, in ihren eigenen Schriften, eingebettet in die Datei; Formen, Icons, Diagramme und Tabellen bleiben Vektoren; der Mark und Fotos kommen als Bilder hinein. Für ein **transparentes PNG** wählst du PNG und schaltest **Transparenter Hintergrund** ein: Du bekommst nur deine Elemente auf transparentem Hintergrund, ohne den Mark. Beides gehört zu Pro.
## SVG, PNG oder transparentes PNG
| Export | Was du bekommst | Wofür du es nutzt |
| --- | --- | --- |
| **SVG** | Eine Seite als skalierbare Datei: echter Text, Vektorformen, der Mark als Bild | Websites, ein Layout an Entwickler übergeben, in Figma oder Illustrator weiterbearbeiten |
| **PNG** | Das ganze Design als Pixel, bis 4K | Posten auf Social Media, Nachrichten, alles, was einfach richtig aussehen muss |
| **Transparentes PNG** | Nur deine Elemente, auf transparentem Hintergrund | Eine Logokombination, ein Sticker, Worte, die über ein Foto oder Video gelegt werden |
Brauchst du nur ein Bild des Designs, ist PNG einfacher. Greif zu SVG, wenn jemand die Datei bearbeiten oder skalieren wird, und zu Transparenz, wenn sie über etwas anderem liegen soll.
Den allgemeinen Abwägungen zwischen beiden Formaten widmet sich [SVG vs. PNG](https://gradiently.design/de/guide/svg-vs-png). In diesem Leitfaden geht es darum, was Gradiently in jede Datei packt.
## Was in einem SVG-Export Vektor bleibt
### Vektor: scharf in jeder Größe
- Worte, als echter Text, den du markieren und bearbeiten kannst
- Schriften, in die Datei eingebettet
- Formen und Linien
- Icons
- Diagramme und Tabellen
### Bilder im SVG
- Der Mark, der lebendige Hintergrund
- Fotos, die du hinzugefügt hast
- Jede Schrift, deren Lizenz das Einbetten verbietet
Ein SVG ist also perfekt für eine Überschrift, die auf einem 4K-Bildschirm gestochen scharf bleiben muss, oder für ein Layout, das Entwickler in eine Seite einbauen, und weniger nützlich, wenn du den Hintergrund auf Plakatwandgröße aufblasen willst. Der Mark wird als Bild in der eigenen Größe des Designs gerendert; für einen größeren Hintergrund exportierst du stattdessen ein PNG in höherer Größe. Ein Mark ist ein lebendiges Rendering statt eines festen Satzes von Vektorformen, deshalb kann er nicht zu einem Pfad werden.
> **Schriften und Lizenzen** Hochgeladene Markenschriften reisen nur dann im SVG mit, wenn die Lizenz der Schrift selbst das Einbetten erlaubt. Tut sie das nicht, zeichnet Gradiently diesen Text stattdessen als Pixel, damit die Datei trotzdem richtig aussieht. [Schriftlizenzen](https://gradiently.design/de/guide/font-licensing) erklärt die Flags.
## So exportierst du ein SVG
1. **Die Seite wählen** Ein SVG enthält eine Seite. Bei einem Karussell oder einer Präsentation wählst du die Seite im Export; für weitere wiederholst du es.
2. **SVG wählen** Öffne **Export** und wähle **SVG**, beschrieben als skalierbar, Text bleibt Text. Die Vorschau zeigt die Größe der Seite.
3. **Herunterladen** Wähle **SVG herunterladen**. Die Datei landet dort, wo dein Browser Downloads speichert.
4. **Im Web verwenden** Binde es mit einem `img`-Tag als feste Grafik ein, oder füge es inline ins HTML ein, wenn du den Text mit CSS gestalten willst.
```html
```
Als Bild ist es am einfachsten und wird zwischengespeichert, inline ist der Text echt, markierbar und für Suchmaschinen lesbar. Gib einem SVG als Bild immer echten Alternativtext. Die [SVG-Referenz](https://developer.mozilla.org/en-US/docs/Web/SVG) von MDN behandelt das Format ausführlich.
Ein SVG öffnet sich auch in Designtools wie Figma und Illustrator, die Text und Vektorformen als bearbeitbare Ebenen lesen. Damit ist es die richtige Datei für jemanden, der ein Layout für ein Format anpassen muss, das Gradiently nicht abdeckt, etwa ein gedrucktes Schild mit eigener Vorlage, oder für Entwickler, die aus deinem Design einen Seitenbereich bauen. Schick das PNG als visuelle Referenz mit, damit sie genau sehen, wie der Mark aussehen soll.
## So exportierst du ein transparentes PNG
Wähle im Export **PNG** und schalte **Transparenter Hintergrund** ein. Alles, was du platziert hast, Worte, Logo, Formen, Fotos, bleibt; der Mark bleibt außen vor, und der Raum um deine Elemente ist durchsichtig. Wähle eine Größe bis 4K. Schriftzüge, ein Logo und ein Slogan, die so exportiert werden, können über einem Produktfoto, einem Video in einem anderen Editor oder einer farbigen Folie liegen.
Ein quadratisches Design mit der Wortmarke Northlight und einem kleinen Slogan auf einem warmen Verlauf
Das ganze Design: die Wortmarke auf ihrem Mark, zum Posten, wie es ist.
Dieselbe Wortmarke Northlight mit Slogan nach einem transparenten Export über einen anderen, kühleren Verlauf gelegt
Mit transparentem Hintergrund exportiert, reisen Wortmarke und Slogan für sich und lassen sich unverändert über einen anderen Hintergrund legen.
- **Prüfe die Schriftfarbe gegen den Zielort.** Helle Worte, die für einen dunklen Mark exportiert wurden, verschwinden auf einer weißen Seite. Wechsle vor dem Export zu dunkler Schrift, wenn das Ziel hell ist.
- **Beschneide die Seite auf den Inhalt.** Ein transparentes PNG behält die volle Seitengröße. Verkleinere die Seite vorher näher an deine Elemente, wenn du eine knappe Datei willst.
- **Behalte beide Logoversionen.** Exportiere eine für dunklen und eine für hellen Grund, so wie ein Markenkit beide hält. [Logo auf einem Verlaufshintergrund](https://gradiently.design/de/guide/logo-on-gradient-background) zeigt, warum.
- **Nutze PNG, nicht JPEG.** JPEG kennt keine Transparenz; ein transparentes Design, als JPEG gespeichert, bekommt einen festen Hintergrund.
## Ein transparentes PNG im Web platzieren
Ein transparentes PNG legt sich sauber über jeden CSS-Hintergrund, was praktisch ist, wenn die Worte fest sind, der Hintergrund aber je nach Bereich oder Theme wechselt. Leg einen Verlauf dahinter, und deine Grafik liegt obenauf.
```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%);
}
```
Das transparente PNG liegt oben, der Verlauf darunter. Ändere den Verlauf pro Seite, und die Grafik bleibt dieselbe.
Indigo zu Violett zu Orchidee: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f0abfc 100%)`
Der Hintergrund aus dem Code oben: tiefes Indigo über Violett zu einer weichen Orchidee unten rechts.
Für den umgekehrten Fall, einen Verlauf, der in CSS ins Transparente ausläuft, siehe [transparente CSS-Verläufe](https://gradiently.design/de/guide/css-gradient-transparent). Und wenn du alle Formate an einem Ort brauchst, behandelt [Designs exportieren](https://gradiently.design/de/guide/export-images-and-loops) PNG, JPEG, PDF, Video und GIF zusammen.
## FAQ
### Wie exportiere ich ein SVG aus Gradiently?
Öffne das Design, wähle Export, dann SVG, und lade es herunter. Ein SVG enthält eine Seite, also wähle bei einem mehrseitigen Design zuerst die Seite.
### Bleibt Text im SVG-Export bearbeitbar?
Ja. Worte bleiben echter Text, mit ihren Schriften in der Datei eingebettet, es sei denn, die Lizenz einer Schrift verbietet das Einbetten; dann wird dieser Text als Pixel gezeichnet.
### Ist der Verlaufshintergrund im SVG-Export ein Vektor?
Nein. Der Mark ist ein lebendiges Rendering und wird daher als Bild ins SVG aufgenommen. Formen, Icons, Diagramme, Tabellen und Text sind Vektoren.
### Wie exportiere ich ein PNG mit transparentem Hintergrund?
Wähle im Export PNG und schalte Transparenter Hintergrund ein. Deine Elemente bleiben, der Mark fällt weg, auf transparentem Hintergrund.
### Kann ich im kostenlosen Tarif als SVG exportieren?
Nein. Kostenlose Exporte sind PNG oder JPEG in 720p mit einem kleinen Wasserzeichen; SVG, PDF und transparentes PNG gehören zu Pro.