SVG vs PNG for Obsidian
Obsidian renders SVG natively — making vector the better default for diagrams, with PNG reserved for screenshots.
SVG's Home-Field Advantage
Obsidian embeds SVGs with full fidelity: ![[diagram.svg]] renders sharp at any pane width, raw inline <svg> works inside notes, and currentColor fills adapt automatically to light/dark themes — a trick PNG can never do. Vault size benefits too: diagrams as SVG are typically a fraction of PNG weight.
- Native rendering, sharp at every pane size
- currentColor diagrams auto-adapt to theme switches
- Smaller vault footprint than equivalent PNGs
Where PNG Still Belongs
Screenshots, photos, and captures from other apps stay PNG — vectorizing them adds nothing. PDF export renders embedded SVGs as vectors, so knowledge bases print beautifully. One caveat: mobile rendering of very complex SVGs can lag; simplify heavy diagrams or rasterize the rare monster file.
- Screenshots and photos remain raster by nature
- PDF exports preserve SVG sharpness in output
- Simplify very complex SVGs for mobile performance
Frequently Asked Questions
How do I make diagrams adapt to Obsidian's dark mode?
Use currentColor for strokes/fills in the SVG — embedded diagrams then inherit the theme's text color and flip automatically with the theme.
Excalidraw or imported SVG for sketches?
The Excalidraw plugin stores drawings as SVG-based files that stay editable in-vault — prefer it for sketches you'll revise; import static SVGs for finished diagrams.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free