JSON Canvas to SVG converter
No file handy? Load a small example board.
🔒 Your files are parsed, rendered and packed into ZIPs in your browser. Nothing is uploaded.
A JSON Canvas board is made of rectangles, text and lines, which is exactly what SVG describes. Converting your .canvas file to SVG gives you a vector image instead of a grid of pixels: it stays sharp at any zoom level and any print size, the text inside it is real text, and the file is usually small. Drop your .canvas file above to see the board, then press Download SVG. The converter writes each card as a rectangle, each line of text as a text element, each group as a labelled frame and each connection as a line with its arrowheads and label. Colors carry over, both Obsidian’s six presets and custom hex values. Like the rest of this site, it runs entirely in your browser: the file is never uploaded, and the original .canvas file is left untouched. It works with boards from Obsidian and from any other app that saves JSON Canvas 1.0.
SVG or PNG?
Pick SVG when the board is going into something that will be scaled, printed or edited. Pick PNG when the destination only accepts plain images, as some chat apps and email clients do.
| SVG | PNG | |
|---|---|---|
| Sharpness when zoomed or printed | Always sharp | Blurs past its pixel size |
| Text | Selectable and searchable | Part of the image |
| File size for diagrams | Usually small | Grows with board size and scale |
| Size limit in this tool | None | 8,192 px per side, 16 megapixels |
| Editing afterwards | Shapes and text in any vector editor | Pixels only |
Edit the board in Figma, Inkscape or Illustrator
Because every card, text line and arrow is a separate element, the SVG opens as editable shapes in vector editors. In Figma, drag the file onto the canvas; in Inkscape and Illustrator, open it like any other SVG. From there you can restyle cards, change fonts, recolor arrows, or pull one group out into a new diagram.
Text cards are exported line by line, with headings in bold. Markdown formatting such as italics, inline code and links is shown as plain text, so check long cards after import if exact formatting matters. The text uses the system sans-serif font, which keeps the file portable across computers.
Put the board in docs, wikis and Markdown
SVG works well anywhere a diagram should stay crisp on every screen. Commit the file next to your notes and reference it from Markdown with an image link such as ; GitHub, GitLab and most static site generators, including Astro, Hugo, Docusaurus and MkDocs, render it as an image. Many wikis and documentation tools accept SVG uploads as images as well.
The SVG has a white background and an explicit viewBox, so it scales to the width of the page without distortion. On a dark-mode docs site, the white background keeps the dark card text readable instead of leaving it on a dark page.
Converting an Obsidian Canvas to SVG
Every Obsidian Canvas is a .canvas file in your vault. Drop it here to get an SVG without opening Obsidian, for example to put an architecture board into a README or to give a designer something they can restyle. Text cards, groups, colors and arrows convert as described above.
Cards that embed vault notes, images or PDFs are exported as labelled placeholders, because the .canvas file stores only their paths, not their content. If you need those embeds in the picture, paste the text you need into text cards in Obsidian first, then convert again.
How it works
- 1Choose or drop your
.canvasfile(s). - 2The board is parsed and drawn instantly — in your browser.
- 3Export it as a PNG or SVG image. Nothing is uploaded.
FAQ
Can I edit the SVG afterwards?
Yes. Cards, text lines, group frames and arrows are separate SVG elements, so any vector editor such as Figma, Inkscape or Illustrator can change them.
Is the text in the SVG selectable?
Yes. Text cards are exported as real SVG text, so it stays selectable and searchable in browsers and other apps that render SVG.
Is anything uploaded during conversion?
No. The .canvas file is parsed and converted to SVG entirely in your browser.
Why does my SVG look slightly different in another app?
The SVG uses the system sans-serif font. An app without that font substitutes a similar one, so some lines can come out slightly wider or narrower. Converting the text to outlines in a vector editor fixes the look everywhere.