How to Use SVG in Docusaurus
Docusaurus's MDX-powered docs pages support SVG through both React component imports and static asset references.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG in MDX Documentation Pages
Since Docusaurus docs pages are MDX (Markdown plus JSX), SVG files imported as React components via the project's Webpack config (SVGR is built into Docusaurus's default configuration) can be used directly within documentation content, mixing prose with interactive or styled vector diagrams.
- MDX pages mix Markdown prose with real React component usage
- SVGR is built into Docusaurus's default Webpack configuration
- Imported SVG components work directly within documentation content
Static Assets and Theme Customization
SVGs placed in the `static` directory are served as-is and referenced by URL path (useful for simple embedded diagrams), while theme-level customization (site logo, favicon, custom icons in the navbar) typically expects specific SVG or PNG files referenced in `docusaurus.config.js`.
- Static directory SVGs serve as-is, referenced by direct URL path
- Site logo and favicon configuration expects specific file references
- docusaurus.config.js centralizes most theme-level icon and logo settings
Frequently Asked Questions
Can I use an interactive SVG diagram directly in my documentation?
Yes — import the SVG as a React component (via Docusaurus's built-in SVGR support) and use it like any component within your MDX documentation file, including passing props for dynamic styling.
Where do I configure my Docusaurus site's SVG logo?
In docusaurus.config.js under the themeConfig.navbar.logo setting, referencing your logo file's path (typically placed in the static/img directory).
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