Svg en transparante png exporteren uit Gradiently

Om een svg te exporteren uit Gradiently open je een ontwerp in de Studio, kies je Export en pak je SVG. Woorden blijven woorden, in hun eigen lettertypen ingepakt in het bestand; vormen, pictogrammen, grafieken en tabellen blijven vectoren; de Mark en foto’s komen als afbeeldingen erin. Voor een transparante png kies je PNG en zet je Transparante achtergrond aan: je krijgt alleen je elementen op een heldere achtergrond, met de Mark weggelaten. Beide zijn onderdeel van Pro.

Svg, png of transparante png

De algemene afweging tussen de twee formaten staat in svg versus png. Deze gids gaat over wat Gradiently in elk bestand stopt.

Wat vector blijft in een svg-export

Een svg is dus perfect voor een kop die scherp moet blijven op een 4K-scherm, of een lay-out die een ontwikkelaar in een pagina bouwt, en minder bruikbaar als je de achtergrond tot billboardformaat wilt oppompen. De Mark wordt als afbeelding getekend op het eigen formaat van het ontwerp; exporteer voor een grotere achtergrond liever een png op een hoger formaat. Een Mark is een levende render in plaats van een vaste set vectorvormen, en daarom kan hij geen pad worden.

Zo exporteer je een svg

1. 1

   Kies de pagina

   Een svg bevat één pagina. Kies bij een carrousel of presentatie de pagina in Export; herhaal voor de andere.

2. 2

   Kies SVG

   Open Export en kies SVG, omschreven als schaalbaar, tekst blijft tekst. Het voorbeeld toont het formaat van de pagina.

3. 3

   Download

   Kies Download SVG. Het bestand wordt opgeslagen waar je browser downloads bewaart.

4. 4

   Gebruik het op het web

   Plaats het met een img-tag voor een vaste graphic, of zet het inline in de HTML als je de tekst met CSS wilt stylen.

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

Een svg opent ook in ontwerptools als Figma en Illustrator, die de tekst en vectorvormen als bewerkbare lagen lezen. Daarmee is het het juiste bestand om te geven aan iemand die een lay-out moet aanpassen voor een formaat dat Gradiently niet dekt, zoals een gedrukt bord met een eigen sjabloon, of een ontwikkelaar die een paginasectie bouwt uit je ontwerp. Stuur de png erbij als visuele referentie, zodat ze precies kunnen zien hoe de Mark eruit moet zien.

Zo exporteer je een transparante png

Kies PNG in Export en zet Transparante achtergrond aan. Alles wat je plaatste, woorden, logo, vormen, foto’s, blijft; de Mark blijft eruit en de ruimte rond je elementen is doorzichtig. Kies een formaat tot 4K. Letters, een logo en een slogan die zo worden geëxporteerd kunnen over een productfoto, een video in een andere editor of een gekleurde slide liggen.

• Controleer de inkt tegen waar hij komt. Lichte woorden die voor een donkere Mark zijn geëxporteerd verdwijnen op een witte pagina. Wissel naar donkere inkt voor het exporteren als de bestemming licht is.
• Snij de pagina bij tot de inhoud. Een transparante png houdt het volledige paginaformaat. Maak de pagina eerst kleiner rond je elementen als je een strak bestand wilt.
• Bewaar beide logoversies. Exporteer er een voor donkere ondergronden en een voor lichte, zoals een merkkit beide bevat. Logo op een verloopachtergrond laat zien waarom.
• Gebruik png, geen jpeg. Jpeg heeft geen transparantie; een transparant ontwerp dat als jpeg wordt opgeslagen krijgt een effen achtergrond.

Een transparante png op het web plaatsen

Een transparante png legt zich netjes over elke CSS-achtergrond, handig als de woorden vast staan maar de achtergrond per sectie of thema verandert. Stapel hem met een verloop erachter en je beeld rijdt erbovenop mee.

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

Voor het omgekeerde geval, een verloop dat in CSS naar transparantie vervaagt, zie CSS verloop transparant. En als je alle formaten op één plek nodig hebt, behandelt ontwerpen exporteren png, jpeg, pdf, video en gif samen.