README

Renders SVG files inline in the Kirby Panel so currentColor paths follow the panel text colour instead of disappearing into the dark frame. Adds viewBox and currentColor rows to the file detail metadata, and exposes CSS variables for colour and padding.

Without this plugin, SVGs render via <img>, which doesn't propagate color into the SVG document, making currentColor paths fall back to the SVG's own default (black) and become invisible against the Panel's chequered frame (almost black).

Installation

Composer

composer require medienbaecker/kirby-svg-preview

Manual

Download and copy this repository to /site/plugins/kirby-svg-preview.

What it does

File view

The file detail view inlines the SVG and adds two SVG-specific rows to the metadata: the viewBox and whether the file uses currentColor.

Files sections/fields

Thumbnails in files sections and fields render inline, so currentColor paths follow the surrounding text colour instead of disappearing into the dark frame.

Structure/object field

Structure and object fields use the same underlying image components.

Upload dialog

The same inline rendering applies during upload, so you see the final colour before the file is saved.

Customisation

Two CSS variables let you tune the previews:

:root {
  --k-svg-preview-padding: 20%; /* default */
  --k-svg-preview-color: var(--color-white); /* default */
}

Override them in your panel CSS (set via the panel.css config option) globally or scope them under any selector — e.g. .k-svg-file-preview { --k-svg-preview-padding: 5%; } to give the detail view less padding than the small thumbnails. SVGs with hardcoded fills keep their own colours; only currentColor paths respond to --k-svg-preview-color.