SVG und transparentes PNG aus Gradiently exportieren

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

Den allgemeinen Abwägungen zwischen beiden Formaten widmet sich SVG vs. PNG. In diesem Leitfaden geht es darum, was Gradiently in jede Datei packt.

Was in einem SVG-Export Vektor bleibt

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.

So exportierst du ein SVG

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

   Herunterladen

   Wähle SVG herunterladen. Die Datei landet dort, wo dein Browser Downloads speichert.

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

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

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.

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

.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%);
}

Für den umgekehrten Fall, einen Verlauf, der in CSS ins Transparente ausläuft, siehe transparente CSS-Verläufe. Und wenn du alle Formate an einem Ort brauchst, behandelt Designs exportieren PNG, JPEG, PDF, Video und GIF zusammen.