Eksportér SVG og gennemsigtig PNG fra Gradiently

For at eksportere SVG fra Gradiently åbner du et design i Studio, vælger Eksportér og tager SVG. Ord forbliver ord i deres egne skrifttyper pakket ind i filen, former, ikoner, diagrammer og tabeller forbliver vektorer, og Marken og fotos kommer ind som billeder. Til en gennemsigtig PNG vælger du PNG og slår Gennemsigtig baggrund til: du får kun dine elementer på en klar baggrund uden Marken. Begge dele er en del af Pro.

SVG, PNG eller gennemsigtig PNG

Den generelle afvejning mellem de to formater er beskrevet i SVG vs. PNG. Denne guide handler om, hvad Gradiently lægger i hver fil.

Hvad der forbliver vektor i en SVG-eksport

Så en SVG er perfekt til en overskrift, der skal være skarp på en 4K-skærm, eller et layout, en udvikler skal bygge ind i en side, og mindre nyttig, hvis du håber at forstørre baggrunden til billboardstørrelse. Marken gengives som et billede i designets egen størrelse. Til en større baggrund eksporterer du i stedet en PNG i en højere størrelse. En Mark er en levende gengivelse og ikke et fast sæt vektorformer, og derfor kan den ikke blive til en sti.

Sådan eksporterer du en SVG

1. 1

   Vælg siden

   En SVG rummer én side. På en karrusel eller præsentation vælger du siden i Eksportér og gentager for de andre.

2. 2

   Vælg SVG

   Åbn Eksportér, og vælg SVG, beskrevet som skalerbar, tekst forbliver tekst. Forhåndsvisningen viser sidens størrelse.

3. 3

   Download

   Vælg Download SVG. Filen gemmes dér, hvor din browser gemmer downloads.

4. 4

   Brug den på nettet

   Placér den med et img-tag til en fast grafik, eller indsæt den direkte i HTML'en, når du vil style teksten med CSS.

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

En SVG åbner også i designværktøjer som Figma og Illustrator, der læser teksten og vektorformerne som redigerbare lag. Det gør den til den rigtige fil at give til en, der skal tilpasse et layout til et format, Gradiently ikke dækker, som et trykt skilt med sin egen skabelon, eller en udvikler, der bygger en sektion af en side ud fra dit design. Send PNG'en med som visuel reference, så de kan se præcis, hvordan Marken skal se ud.

Sådan eksporterer du en gennemsigtig PNG

Vælg PNG i Eksportér, og slå Gennemsigtig baggrund til. Alt, hvad du har placeret, ord, logo, former og fotos, bliver; Marken bliver ude, og rummet omkring dine elementer er gennemsigtigt. Vælg en størrelse op til 4K. Bogstaver, et logo og et slogan eksporteret sådan kan ligge over et produktfoto, en video i et andet program eller et farvet slide.

• Tjek skriften mod det sted, den havner. Lyse ord eksporteret til en mørk Mark forsvinder på en hvid side. Skift til mørk skrift, før du eksporterer, hvis målet er lyst.
• Beskær siden til indholdet. En gennemsigtig PNG beholder hele sidens størrelse. Gør siden mindre omkring dine elementer først, hvis du vil have en stram fil.
• Gem begge logoversioner. Eksportér en til mørke grunde og en til lyse, ligesom et brandkit rummer begge. Logo på gradientbaggrund viser hvorfor.
• Brug PNG, ikke JPEG. JPEG har ingen gennemsigtighed. Et gennemsigtigt design gemt som JPEG får en ensfarvet baggrund.

Sådan placerer du en gennemsigtig PNG på nettet

En gennemsigtig PNG lægger sig rent over enhver CSS-baggrund, hvilket er praktisk, når ordene er faste, men baggrunden skifter efter sektion eller tema. Stak den med en gradient bagved, og dit værk ligger ovenpå.

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

Til det omvendte tilfælde, en gradient, der toner ud til gennemsigtighed i CSS, kan du se CSS-gradient gennemsigtig. Og når du har brug for alle formaterne samlet ét sted, dækker eksport af designs PNG, JPEG, PDF, video og GIF sammen.