Putting the diagram on a page, in a catalog, in a PDF

SVG or PNG decides which format. This page is what comes after: how to place it, destination by destination, and where it goes wrong.

One rule first

On the web, place the SVG as an image. If the destination will not take SVG, use PNG. Everything below is detail on that.

On a web page

Upload the SVG file as an image and place it like any other. It stays sharp at any size and the file stays small.

Keep the alt text short: the part number and “structure diagram” is enough. What the diagram conveys — which characters mean what — reaches readers and search engines better as a table in the text than crammed into alt. The examples on this site are laid out exactly that way.

Where SVG is not accepted, PNG

Systems that will not take an SVG upload still exist. Export a PNG for those. This tool's PNG width defaults to 2400 pixels and accepts 800 to 4000.

A rule of thumb: twice the width it will be shown at. Across an 800-pixel text column, 1600; 2400 leaves room for high-density screens. It is a rule of thumb, not a rule. If readers will pinch-zoom into the part number, go larger, then look at the real thing and check the characters are legible.

In print, in a PDF

If the layout program can place SVG, place the SVG; nothing else looks as clean. Adobe Illustrator and InDesign, and recent Word and PowerPoint, can open or insert SVG. Handling differs by version, so place it in the version you actually use, and look at the PDF after export, not only at the layout.

If SVG cannot be placed, or comes out wrong, use PNG. The width you need is the finished width in inches times the target resolution: an 8 cm (about 3.15 in) figure at 300 ppi is 3.15 × 300 ≈ 945 pixels. 300 is a convention, not a law, and enlarging the placed image lowers the effective resolution. For a figure made of text and thin lines, when in doubt print a proof at final size and look for broken lines.

On a dark background

The diagram is black lines and black text, on a transparent background by default. Dropped onto a dark page as-is, the lines vanish into the background.

Two fixes. Export with the background set to white, so the white travels inside the file; or put a white panel under it on the page. This site's example pages do the latter, so the figure stays readable in dark mode. Look at the page in dark mode once before publishing; it is easy to ship without noticing.

Text that moves or changes typeface is a different problem from background, covered in Embedding fonts in an SVG.

What to send along with it

Send the JSON from “Save JSON” together with the image. SVG and PNG cannot be loaded back into this tool; only JSON can. When the part number grows an option, the JSON means opening the diagram and adding one item; without it, the diagram is made again from scratch.

For a designer or a print shop, hand over three files as a set:

• SVG (to place)
• PNG (fallback if the SVG cannot be used; state its width)
• JSON (for updates — with one line saying “this file re-opens the diagram for editing”)

What to check at the receiving end

• The part number's characters are in the same order and spacing as when you made it
• Each leader line ends directly under its character
• The note numbers appear where the text refers to them
• On a dark background, the figure has a white panel behind it

If any of these is off, the cause is usually the typeface rather than the placement — see the guide linked above.

For developers: inline or img

An SVG can be written straight into the HTML (inline) or referenced with <img>. Inline makes the diagram's text part of the page's text and lets CSS recolor it. Some content systems rewrite or strip parts of an inline SVG, though, so <img> is the safer default. If you do inline it, the embedded fonts can be dropped in favor of the page's own — this site's example pages do that.

Sources

• Images Tutorial (W3C WAI): how to decide what an image's text alternative says.
• SVG (MDN): how to put SVG into an HTML page.

Open the tool