Export SVG and transparent PNG from Gradiently

To export SVG from Gradiently, open a design in the Studio, choose Export and pick SVG. Words stay words, in their own fonts packed into the file; shapes, icons, charts and tables stay vectors; the Mark and photos come in as pictures inside it. For a transparent PNG, choose PNG and turn on Transparent background: you get only your elements on a clear background, with the Mark left out. Both are part of Pro.

SVG, PNG or transparent PNG

The general trade off between the two formats is covered in SVG vs PNG. This guide is about what Gradiently puts in each file.

What stays vector in an SVG export

So an SVG is perfect for a headline that must stay crisp on a 4K screen, or a layout a developer will build into a page, and less useful if you hope to blow the background up to billboard size. The Mark is rendered as a picture at the design's own size; for a larger background, export a PNG at a higher size instead. A Mark is a living render rather than a fixed set of vector shapes, which is why it can't become a path.

How to export an SVG

1. 1

   Pick the page

   An SVG holds one page. On a carousel or deck, choose the page in Export; repeat for others.

2. 2

   Choose SVG

   Open Export and choose SVG, described as scalable, text stays text. The preview shows the page's size.

3. 3

   Download

   Choose Download SVG. The file saves where your browser saves downloads.

4. 4

   Use it on the web

   Place it with an img tag for a fixed graphic, or inline it in the HTML when you want to style the text with 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>

An SVG also opens in design tools such as Figma and Illustrator, which read the text and vector shapes as editable layers. That makes it the right file to hand to someone who needs to adapt a layout for a format Gradiently doesn't cover, such as a printed sign with its own template, or a developer building a page section from your design. Send the PNG alongside it as the visual reference, so they can see exactly how the Mark should look.

How to export a transparent PNG

Choose PNG in Export and turn on Transparent background. Everything you placed, words, logo, shapes, photos, stays; the Mark stays out, and the space around your elements is see through. Pick a size up to 4K. Lettering, a logo and a tagline exported this way can sit over a product photo, a video in another editor or a coloured slide.

• Check the ink against where it will land. Light words exported for a dark Mark will vanish on a white page. Swap to dark ink before exporting if the destination is light.
• Trim the page to the content. A transparent PNG keeps the full page size. Resize the page closer to your elements first if you want a tight file.
• Keep both logo versions. Export one for dark grounds and one for light, the same way a brand kit holds both. Logo on a gradient background shows why.
• Use PNG, not JPEG. JPEG has no transparency; a transparent design saved as JPEG gets a solid background.

Placing a transparent PNG on the web

A transparent PNG layers cleanly over any CSS background, which is handy when the words are fixed but the backdrop changes by section or theme. Stack it with a gradient behind and your artwork rides on top.

.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 the reverse case, a gradient that fades into transparency in CSS, see CSS gradient transparent. And when you need the full set of formats in one place, exporting designs covers PNG, JPEG, PDF, video and GIF together.