Social Preview Card Maker in the Browser: Canvas Sizes, Contrast and PNG vs SVG

I work on OnePassApps, the team behind app.onepassapps.com. The Social Preview Designer is one of our browser-local tools: you type a headline, pick a canvas and a layout, and download a PNG or an SVG. Nothing is uploaded, no remote font is fetched, and no account is involved.

This is a walk through what the app actually does, measured on our own build in one browser session.

• Open the app: Social Preview Designer
• The longer guide: How to design social cards with text and local images

The three stages

The panel opens with one line that tells you the whole idea: "Compose a headline, colours and a local image into a social or article graphic, then download it as PNG or SVG."

The work is split into three stages.

01 Content holds a Headline textarea, a Description textarea, an Eyebrow text field and a Footer text field. The Headline ships with "A little space for a big idea." and the Description with "A practical guide to making room for your next creative project." Under the Headline the app shows a live character counter and a 180-character ceiling; the Description caps at 280. A note under the counter says "Text fits the chosen layout automatically."

02 Style holds the canvas size, the composition, the typeface and the three colours.

03 Export holds the format and the download control.

The preview sits above the style controls, and the app says "The preview updates as you edit."

The four canvas sizes

The Canvas size control is a combobox. Opening it lists exactly four presets:

The label follows the selection, so the Export stage reads "PNG · 1200 × 630" while Article is chosen. The app is careful about what that means: "Sizes are examples, not platform publishing guarantees."

Three compositions

Composition is a radio group with three values: Split, Text and Image. Split is the default.

Split is the one worth reading closely, because it is visible in the exported SVG. With the Split composition and the shipped colours, the SVG opens with a full-canvas background rectangle, an accent panel on the right, and two overlapping circles:

<rect width="1200" height="630" fill="#153934"/>
<rect x="672.0000000000001" width="528" height="630" fill="#b7f0cb"/>
<circle cx="936" cy="315" r="189" fill="#153934"/>
<circle cx="972.0000000000001" cy="277.2" r="119.7" fill="#ffffff"/>

The right-hand panel is 528 pixels of a 1200-pixel canvas. The headline is drawn as a left-aligned text block at 68 pixels, bold, with the text broken across three lines by the layout engine:

<text x="74" y="212" font-size="68" font-weight="700" fill="#ffffff"><tspan x="74" dy="0">OnePassApps</tspan><tspan x="74" dy="82">Social Card</tspan><tspan x="74" dy="82">Test 2026</tspan></text>

The contrast readout is live, and it changes when you change the colours

The style stage shows three colour inputs - Background, Text and Accent - each with a colour picker and a hex field, and it prints the contrast ratio of text on background right underneath.

The shipped pairing is a dark teal background #153934 with white text, and the app reads 12.6:1, with the note "Text on background. Aim for 4.5:1 or more. Image backgrounds also depend on the photo."

I re-computed that ratio outside the browser from the two hex values and got the same number, so the readout is the standard WCAG contrast formula and not a decorative number.

Then I set the background to #ffffff and the readout moved to 1.0:1, and the pre-publish panel changed to "Text contrast 1.0:1 is below 4.5:1." The app does not block you - it tells you and lets you decide.

Two typeface radios sit above the colours, Sans serif (the default) and Serif. Switching to Serif changes the exported SVG's font-family attribute.

A local image, and the app's warning about it

The IMAGE stage takes a PNG, JPEG or WebP from your machine - "PNG, JPEG or WebP · 12 MB · 24 MP. Optional." - with a drop zone and a Browse images button.

I imported a 900 × 600 PNG of 4.2 KiB into a 1200 × 630 card. The app read the file, showed it as "PNG · 900 × 600 · 4.2 KiB", and told me twice: "Image is 900 × 600; it will look soft at 1200 × 630." and, in the pre-publish panel, "Image will look soft at 1200 × 630. Use a larger one."

That is a genuinely useful thing for a tool to know about, because the canvas is fixed at the size you picked and a smaller photo cannot fill it sharply.

With an image loaded you also get Image fit (the default reads "Fill frame (crop edges)"), Horizontal position and Vertical position sliders, and Replace and Remove controls. The preview is a blob URL in the page - your file never gets an address on the internet.

What the two exports actually are

I replaced the headline with "OnePassApps Social Card Test 2026" and the description with "Nine apps under one membership.", and left the eyebrow and footer at their shipped values, then downloaded both formats from the same card.

PNG: social-card-1200x630.png, 82,732 bytes, and the IHDR chunk reads width 1200, height 630, 8-bit, colour type 6 (RGBA). Decoding the pixels outside the browser, the card's background pixel comes back as RGB (21, 57, 52) - which is #153934, the hex the app had in its Background field. The PNG is the card as the browser rendered it.

SVG: social-card-1200x630.svg, 1,045 bytes, width="1200" height="630" viewBox="0 0 1200 630" role="img" aria-labelledby="title", with a <title> element holding the headline. The eyebrow, headline, description and footer are all real <text> elements with <tspan> lines, so the words stay selectable and editable after export.

The Export stage explains the difference in words: "PNG suits every network and keeps the look you see here." versus, for SVG, "SVG keeps text sharp for later editing and embeds your local image; another device may substitute its fonts." The guide puts the same point more carefully - PNG preserves the browser's local text rendering, while an SVG's text appearance can vary when another system substitutes fonts.

One honest limit: the SVG I read off disk was exported from the text-only card, before I loaded a photo. The app's own copy says the SVG embeds your local image; I did not re-export and byte-check an SVG with an image in it.

Nothing left the tab

With the network log open for the whole session, the page made 128 requests, every single one a GET, and 0 requests with a body. The hosts were app.onepassapps.com, clerk.onepassapps.com, api.onepassapps.com and Cloudflare's own analytics endpoint. Nothing was posted anywhere.

The browser storage was equally quiet: localStorage held only the app's shell keys (__clerk_environment, onepass:recent-apps, toolpass-theme-preset, toolpass-store) and sessionStorage held one feature flag. Your headline, your colours and your photo are in the tab's memory and nowhere else. The panel says it plainly: "Nothing leaves this tab."

Limits, as the guide states them

The guide for the app is specific about the edges:

• Image imports allow up to 12 MB, 24 megapixels and 8192 pixels per side. SVG and GIF imports are excluded, and large accepted images are reduced locally.
• Standard canvas sizes are examples, not platform-compatibility guarantees.
• Colour contrast is a design aid, not certification.
• Navigation or reload clears the design.
• The app does not publish your card and does not update link previews. You download the graphic and configure it in your publishing system - social platforms decide how they fetch and display preview images.
• It is free, runs in your browser with no account or payment details, and never uses OnePassApps credits.

And the pre-publish panel reminds you of the step the app cannot do for you: "Add alternative text describing the graphic where you publish it."

What I did not test

One build, one browser, one signed-out session, 6 November 2026. I exercised the Article canvas only - Square, Portrait and Story are listed in the combobox but I did not switch to them, so I have not seen their output. I did not drag the image position sliders, so I cannot say what the crop looks like at the edges. I did not re-export an SVG with an image embedded. I did not try to upload an SVG or a GIF, which the guide says are excluded. The alt text on the preview image updates with your headline - "Card preview: OnePassApps Social Card Test 2026" - but the app cannot write the alt text for wherever you publish the card.

If you want a card that is sharp at the size you publish it, measure your source image first and pick the canvas to match. That is the one decision the app cannot make for you.