Code Screenshot Generator
Turns a snippet into an SVG whose text is still text: selectable, searchable and sharp at any size, with a PNG offered second because it is the lossy option.
This tool needs JavaScript: the image is drawn in your browser, which is also why nothing is uploaded.
Tabs become four spaces, because a tab has no width in an SVG.
Download the SVG Download a PNG instead
The SVG keeps the code as text: selectable, searchable and sharp at any size. The PNG is an image of text, which is the reason it is the second button rather than the first.
Every tool of this kind produces a PNG, which is an image of text: unsearchable, unselectable, invisible to a screen reader, and soft on the next display that has more pixels than the one it was made on.
This produces an SVG whose text is still text. It is still a picture, and a fenced code block is still better wherever one is possible, but if the code has to be an image for a slide or a social card then it may as well be an image you can select a variable name out of.
The PNG is offered second, exported at twice the size, because it is the lossy option rather than the default.
How to use
- Paste the code and pick the language. Tabs become four spaces, since a tab has no width in an SVG.
- Set the theme, the font size and the padding. The window bar is decoration and it does make a snippet read as a screenshot rather than as a quotation.
- Download the SVG. Take the PNG only if the destination cannot handle SVG.
Example
<svg xmlns="http://www.w3.org/2000/svg" width="530" height="171" viewBox="0 0 530 171"
font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="14">
<rect width="530" height="171" rx="12" fill="#0b1020"/>
<path d="M0 12a12 12 0 0 1 12-12h506a12 12 0 0 1 12 12v19H0z" fill="#151b32"/>
<circle cx="18" cy="16" r="6" fill="#ff5f57"/>
<text x="51" y="74" xml:space="preserve"><tspan fill="#8ab4ff">function</tspan><tspan fill="#e6e8f0"> </tspan><tspan fill="#c4a7ff">total</tspan><tspan fill="#e6e8f0">( items ) {</tspan></text>
</svg>One <text> element per line, one <tspan> per token. Search the file for reduce and you find it, which is
the whole argument for this over a bitmap.
Pitfalls
A code block beats an image every time. In documentation, in a README, in an issue: real code can be copied, searched and read aloud. Use an image for slides, social posts and anywhere markup is not allowed.
The layout assumes a monospace font. Every character advances by the same amount, which is how the lines are positioned without measuring anything. A proportional font would not line up.
Advance width varies slightly between monospace fonts. The box is drawn with a spare character of room for that reason. A font far from the usual proportions could still overflow.
The font is not embedded. The SVG names a stack of common monospace fonts and the viewer resolves one. Somewhere without any of them substitutes, which changes the width but not the content.
Long lines are not wrapped. They make the image wider, because wrapping code changes what it says. Break the line in the code if it matters.
The PNG is exported at twice the size. That is usually right for a retina display and wrong if you need an exact pixel size, in which case rasterise the SVG yourself.
Alt text is still your job. An image of code needs a description, and “code screenshot” is not one. Say what the code does.
Compatibility
Runs in the browser: nothing is uploaded and nothing is stored.
The SVG uses <text>, <tspan> and xml:space="preserve", which work in every browser and in every editor
that renders SVG. The PNG is produced by drawing that SVG to a canvas, which is the same mechanism the SVG to
PNG converter uses.
The highlighting is the site’s own highlighter, so a screenshot of a snippet looks like the snippet did on the
page. The tokens are read back out of its output, which is safe because that output has a fixed shape: escaped
text with single-class spans. The test suite pins the escaping round trip, since double-escaping would put
&lt; in the image.
Geometry is tested rather than eyeballed: the box leaves room for the longest line plus a character, the gutter only appears with line numbers, the bar only with the window chrome, and the height grows exactly one line height per row.