SVG thumbnail/preview in Kirby (4) panel do not work


I cant find any related topic to this so I will try it with this one. When I upload SVG files in the panel, I can see their preview in the cards. Like this:

But when I click on the card, the preview of the SVG image is not here:

Any ideas how to fix it please?

I tried several methods, hooks, plugins, htaccess mime updates, but nothing worked for me.

Thank you.

Hm, it seems to work for me, at least with two svg’s I tested with (from the assets folder in the Starterkit).

Have you tried with several files from different sources to check if I may depend on the file?

Hello texnixe,

you are right. I tried only logos exported from Adobe Illustrator, but other SVGs like from Flaticon etc are working well. Need to find a solution how to format my SVGs or update my Kirby environment to make it work.

Anyway, thank you for helping me, I didn’t expect there to be a problem with SVGs from Illustrator, as I’ve been using them this way on websites for years.

There are various export options in Illustrator.
Unfortunately, no uniform concept is apparent here.
Illustrator saves additional information in the code, for example:

<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) ->

Such SVGs are not even accepted for import in the panel.
For existing SVG I like to use this online tool for cleaning up.
Here you can simply drag and drop the file(s).

Maybe this list of svg optimizer tools is helpful as well: Tools for Optimizing SVG | CSS-Tricks - CSS-Tricks

However, what I find strange is that the svgs appear in the cards but not in the preview.

One thing I noticed when comparing one svg that works with one that doesn’t show up is that the one that doesn’t show doesn’t have width and height attributes.

1 Like

Exactly! This is the reason why I recently wrote a plugin which add width attribute to all SVGs which has no one. It works, but I think it could be integrated in Kirby by default, because somehow the SVGs are shown in cards correctly so the mechanism is somewhere here already.