PLUS UI DESIGN · 4 min READ

Export ASCII art as PNG, SVG or text

Pick the right ASCII export for a design, website or terminal, preserve the character layout, and understand the shared plugin license.

Use text when the characters are the content

Copy and TXT keep the output as text. They are useful for code blocks, terminal experiments and editing individual characters. Keep the spaces and line breaks intact. Editors that wrap long lines, collapse spaces or substitute proportional fonts can change the drawing.

For your own webpage, place the text inside a pre element and use a monospace font with a line height close to one. Allow horizontal scrolling rather than wrapping individual rows. If the artwork conveys information, provide a short text description separately so the picture is not the only way to understand the page.

Use PNG for a predictable appearance

PNG turns the current characters and palette into a raster image. It is the straightforward choice for a slide, social graphic or design mockup where the recipient should see the same arrangement without installing a font. The standard PNG export is free when you use basic settings.

Pro adds 2× PNG. This doubles the exported raster dimensions; it does not recover source-image details that were lost during character conversion. Increase the column count first if you need more character detail, then choose a resolution suited to the final placement. Very large exports are bounded to avoid exhausting browser memory.

Use SVG for a scalable text-based graphic

SVG is a Pro export. This editor writes escaped characters into SVG text elements, with a background rectangle and the chosen foreground color. The result remains text-based rather than becoming outlined paths. Font handling can vary between applications, so inspect the imported result before delivering a final asset.

If your destination does not preserve SVG text reliably, use PNG for a fixed visual result. When you need to edit the character content directly, keep the TXT file alongside the image export. These formats serve different purposes; exporting all of them is not a substitute for checking the destination.

Bring the result into your design workflow

For a Figma layout, try a standard PNG first and check the image at its intended size. If you work directly in Figma, the ASCII Art Generator plugin is another entry point to the same rendering tools. Keep a copy of your source image so you can regenerate a different density or palette later.

The web Pro integration is designed to accept the existing ASCII Art Generator license without consuming another plugin seat. A UI Table Builder license belongs to a different product and does not unlock ASCII. Basic settings support free Copy, TXT and PNG; using advanced effects, SVG or 2× PNG requires the ASCII entitlement.

Try it on your own image.

Open the editor and compare the settings side by side with this guide.

Open ASCII studio ↗

LEARN WITH PLUS UI DESIGN

A few guides to get you going.

All guides ↗

STAY IN THE LOOP

More tools. Fresh ideas.

Subscribe to Plus UI Design for new plugins, creative tools and practical guides.