How to Use SVGs in Obsidian
Obsidian renders SVGs natively — embed them like images, inline them as HTML, and make diagrams adapt to dark mode.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Embedding SVG Files
Drop an SVG into your vault and embed with standard wiki syntax: ![[diagram.svg]] — Obsidian renders it in preview and reading modes at full vector sharpness. Markdown image syntax works too. Vault-stored SVGs keep notes portable and version-controlled alongside your text.
- ![[file.svg]] embeds render as sharp scalable graphics
- SVGs live in the vault — portable and syncable with notes
- Resize with the standard embed size syntax ![[file.svg|400]]
Inline SVG and Dark Mode
Obsidian renders raw inline <svg> markup inside notes, which unlocks theme-adaptive graphics: use fill='currentColor' and the diagram inherits your theme's text color, flipping automatically between light and dark modes. Excalidraw plugin drawings are SVG under the hood and follow the same adaptive behavior.
- Raw <svg> blocks render directly in notes
- currentColor fills auto-adapt to light/dark themes
- Excalidraw plugin gives an SVG-native sketching canvas
Frequently Asked Questions
Why does my embedded SVG look invisible in dark mode?
It uses black strokes on transparent background — invisible on dark themes. Edit fills/strokes to currentColor, or add a CSS snippet targeting embedded SVGs to invert or recolor them.
Do SVG embeds work in exported PDFs?
Yes — Obsidian's PDF export renders embedded SVGs as vectors, keeping diagrams sharp in the output document.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG