Cloud Icons Guide

SVG or PNG for architecture diagrams: vector while you build, raster at the edge

By the engineer who builds Datadef, from client work on data platforms · Reviewed August 21, 2026

The query "aws icon svg" gets typed because people have been burned by a blurry icon on a projector. The rule that prevents it is one sentence long: stay vector for as long as the pipeline allows, and rasterise once, at the last step, at a size you chose deliberately. Everything below is that rule applied to the places a cloud diagram actually ends up.

Try it free
6 min readFor anyone whose diagram looked fine on the laptop and blurry on the wall

See it as a diagram

Everything below, as a diagram you can edit. Describe yours and see it in seconds.

174/2000• 3 credits left
Try:

No account needed · Editable canvas, not a picture

What each format actually is

An SVG is a description of shapes. It has no resolution, so it renders at whatever size the viewer asks for, and a 4 KB file is as sharp on a 5K display as in a thumbnail. A PNG is a grid of pixels, which means the size decision was made when the file was written and every later resize is either interpolation or waste.

That is the whole argument, and the vendors have already acted on it. Microsoft is the clearest case: the Azure Architecture Center ships the set as general purpose SVG files, states there is no Visio stencil format and no plan for one, and offers no raster alternative at all, so on Azure the format question does not exist. AWS publishes an icon package alongside its PowerPoint toolkits. Google offers SVG and PNG. Datadef mirrors the vendor SVGs rather than converting them, which is why the AWS collection is SVG only.

Where SVG wins, and the three places it breaks

SVG wins in every editing tool, in slides, in print, on high-density screens, and anywhere the diagram might be zoomed. PowerPoint and Keynote both keep an inserted SVG as vector artwork, so the size you drag it to stops mattering; a raster inserted from a small size folder and dragged up is an upscale and looks like one on a projector.

It breaks in three specific places. Destinations that strip or refuse SVG, which still includes several wiki and ticketing surfaces and most email clients. Files that reference fonts the viewer does not have, where labels silently fall back to something else and your careful spacing collapses. And embedded raster content, because an SVG containing a screenshot is a PNG wearing a costume.

The font trap is the one that catches generated diagrams. If an SVG is going anywhere you do not control, either convert text to paths or accept a fallback font, and look at it in the destination before it ships. Aspect ratio is the other habit worth fixing: hold Shift while dragging a corner handle, which is also the Azure rule stated as a requirement rather than a preference, since the published terms ask you not to distort or change icon shape in any way.

When PNG is the right answer, and at what size

Choose PNG when the destination cannot render vectors, when you need one file that behaves identically everywhere, or when the diagram is being pasted into a ticket or a chat thread and will never be zoomed. Then pick the size on purpose: export at roughly twice the width the image will be displayed at, so it survives a high-density screen.

That gives concrete numbers. A GitHub README renders its content column at around 900 pixels on a desktop, so 1800 pixels wide is the floor for a README diagram. A slide that fills a 1920-wide projected frame wants an export at least that wide. A Confluence page body is usually narrower than the README, so the same 1800 pixel export covers both.

JPEG is only correct when the image is photographic or when file size dominates, because it has no transparency and it puts compression artefacts around exactly the thing a diagram is made of: hard edges and thin text. Datadef exports PNG and JPEG; for diagrams, use PNG.

Destination                  Format
---------------------------  -------------------------------------
Editing, slides, print       SVG (scales, stays sharp, small file)
README, wiki, Confluence     live embed image, re-rendered on change
Ticket, chat, email          PNG at ~2x the displayed width
Photographic background      JPEG (no transparency, lossy edges)

The format question hides a freshness question

Arguing about SVG and PNG is arguing about the last step. The failure people actually feel is not a blurry icon, it is a crisp diagram that describes an architecture retired two quarters ago, because the export was a one-off and nobody re-ran it.

A live embed sidesteps the whole thing: one markdown image line, the image re-renders from the canvas, and viewers need no account. When the source is a connected repository, repository sync regenerates the diagram from the branch on a daily sync.

The mechanism that makes a daily regeneration safe rather than annoying is a structure fingerprint: a hash of the parsed draw plan, not of the commit. A commit that edits a README, a test or a comment moves the sha and leaves the fingerprint alone, and a sync whose fingerprint is unchanged skips generation outright. So the exported picture only moves when the architecture moves, which is the property a hand-run export can never have.

FAQ

Should I use SVG or PNG for AWS architecture icons?

SVG, in nearly every case. An SVG has no resolution, so it renders sharp at whatever size the node ends up, while a raster picked from a small size folder and enlarged on a slide is a visible upscale. Microsoft goes further and ships the Azure set as SVG only, with no raster alternative in the download. Use PNG only where the destination refuses vectors.

Why does my SVG icon look wrong after resizing in PowerPoint?

Almost always because the aspect ratio was lost. Hold Shift while dragging a corner handle so both dimensions scale together. Distorting a vendor mark is also a stated breach of the Azure icon terms, which ask you not to distort or change icon shape in any way. If it looks pixelated rather than stretched, a raster was inserted instead of the SVG.

What resolution should I export an architecture diagram at?

Roughly twice the width it will be displayed at. A GitHub README content column is about 900 pixels wide on desktop, so export at 1800 pixels or more. A full-screen slide on a 1920-wide projector wants at least 1920. Under-exporting is the single most common cause of a blurry diagram.

Can I export a diagram as a PDF?

Datadef exports PNG and JPEG. There is no PDF export. For a document you control, embed the PNG at roughly twice its displayed width, or reference the live embed image so the picture updates when the diagram does and the document never carries a stale copy. For print, the vector source matters more than the export format anyway.

Do SVG icons work inside a GitHub README?

They render, but they are the less predictable choice. An SVG that names a font renders with a fallback for any reader who does not have it, which moves labels and can break the spacing you set. For a diagram that has to look identical for every reader, either convert the text to paths or use a raster image at roughly twice the display width.