Eksporter SVG og transparent PNG fra Gradiently

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

Den generelle avveiningen mellom de to formatene tas opp i SVG eller PNG. Denne guiden handler om hva Gradiently legger i hver fil.

Hva som forblir vektor i en SVG-eksport

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.

Slik eksporterer du en SVG

1. 1

   Velg siden

   En SVG rommer én side. I en karusell eller presentasjon velger du siden i Eksporter; gjenta for de andre.

2. 2

   Velg SVG

   Åpne Eksporter og velg SVG, beskrevet som skalerbar, tekst forblir tekst. Forhåndsvisningen viser sidens størrelse.

3. 3

   Last ned

   Velg Last ned SVG. Filen lagres der nettleseren din lagrer nedlastinger.

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

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

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

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

For det motsatte tilfellet, en gradient som toner ut til gjennomsiktig i CSS, se CSS-gradient med gjennomsiktighet. Og når du trenger alle formatene samlet, dekker eksport av design PNG, JPEG, PDF, video og GIF under ett.