Exportera SVG och transparent PNG från Gradiently

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

Den allmänna avvägningen mellan de två formaten tas upp i SVG mot PNG. Den här guiden handlar om vad Gradiently lägger i varje fil.

Vad som förblir vektor i en SVG-export

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.

Så exporterar du en SVG

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

   Välj SVG

   Öppna Export och välj SVG, beskrivet som skalbart, text förblir text. Förhandsvisningen visar sidans storlek.

3. 3

   Ladda ner

   Välj Ladda ner SVG. Filen sparas där din webbläsare sparar nedladdningar.

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

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

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

.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 det omvända fallet, en gradient som tonar ut till transparens i CSS, se CSS-gradient transparent. Och när du behöver alla format på ett ställe täcker exportera designer PNG, JPEG, PDF, video och GIF tillsammans.