SVG Insertion Methods
SVG Insertion Patterns
All examples use the custom {{< mkit >}} shortcode, which reads the SVG file and injects it as inline HTML. This puts the SVG DOM directly in the page so that body.quarto-dark .mk-* CSS rules can restyle it for dark mode.
1. Basic inline SVG (no click)
{{< mkit ../files/img/svg/YOUR-FILE.svg >}}2. Inline SVG with width control
{{< mkit ../files/img/svg/YOUR-FILE.svg 55% >}}Centered:
{{< mkit ../files/img/svg/YOUR-FILE.svg 55% center >}}3. Clickable SVG — opens in viewer (fit to viewport)
Opens the SVG at full viewport size in a new tab via svg-viewer.html. Theme is synced automatically by svg-viewer-links.js.
Fit to viewport width (most common for wide molecules):
{{< mkit ../files/img/svg/YOUR-FILE.svg 55% center viewer >}}Fit to viewport height (for tall structures like protein chains):
{{< mkit ../files/img/svg/YOUR-FILE.svg 55% center viewer fit=height >}}Shortcode Parameters
| Position | Value | Default | Purpose |
|---|---|---|---|
| 1 | path | (required) | Relative path to SVG file from calling .qmd |
| 2 | width | 100% |
CSS width value (e.g. 55%, 400px) |
| 3 | center / right |
left |
Horizontal alignment |
| 4 | viewer |
off | Wraps in clickable link to svg-viewer.html |
| named | fit=height |
width |
Viewer fit mode |
Viewer URL Parameters
| Param | Values | Default | Purpose |
|---|---|---|---|
src |
path to SVG | (required) | SVG file to display |
fit |
width, height |
width |
Scale SVG to fill viewport width or height |
theme |
light, dark |
auto (OS) | Force theme; auto-set by svg-viewer-links.js |
Files involved
| File | Purpose |
|---|---|
_extensions/svg/svg.lua |
Lua shortcode — reads SVG, returns as pandoc.RawBlock |
assets/svg-viewer.html |
Standalone viewer page (fetches + inlines SVG) |
assets/js/svg-viewer-links.js |
Auto-syncs ?theme= param with Quarto dark toggle |
assets/custom.scss |
.svg-link utility class |
assets/_svg-dark.scss |
body.quarto-dark .mk-* element color overrides |