How to Use SVG in Nuxt Content
Nuxt Content's Markdown-driven pages need a slightly different approach to SVG than standard Vue components — here's how it works.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Inline SVG Within Markdown
Nuxt Content processes Markdown files that can include raw HTML, meaning inline `<svg>` markup works directly within `.md` content files — useful for content-embedded diagrams or icons that content editors need to include without touching Vue component code.
- Raw SVG markup renders directly within Nuxt Content Markdown files
- Content editors can embed icons without needing Vue component knowledge
- Works consistently across both dev and static-generated builds
Vue Components for Reusable Icons
For icons reused across many content pages, Nuxt's auto-imported components directory lets you build an `<Icon>` Vue component (via `@nuxt/icon` or a custom SVG-to-component setup) referenced inside Markdown via Nuxt Content's component-in-Markdown support (`::icon-name::` syntax).
- @nuxt/icon module provides broad icon-set access out of the box
- Custom Vue icon components are auto-imported per Nuxt conventions
- Nuxt Content's component syntax lets Markdown reference Vue components directly
Frequently Asked Questions
Does Nuxt Content support the @nuxt/icon module directly in Markdown?
Yes — with the module installed, its icon component syntax works within Nuxt Content Markdown files just as it does in regular Vue templates, giving Markdown authors access to the same icon sets.
Is inline SVG safe to include in user-submitted Markdown content?
Only after sanitization — if content comes from untrusted sources, sanitize any raw HTML/SVG server-side before rendering, since unsanitized SVG can carry embedded scripts.
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