Can SVG files be previewed in Panel's File View?

Kirby 2 Solved ✅
1

Just like oversize images in the panel (over 2000px w × h), SVG files display the same black box preview. The SVG is 28px × 24px and looks like:

In the Files View I see:
(the PNG is oversize and I will be replacing it)

When viewing details:
the panel reports the dimension of the art are 0px.

I am using this file as an example and test. I had a larger SVG in but it exceed the 2000px limit and I wanted to be sure it wasn’t that preventing preview) I also know this file does display in browsers correctly as you can see in the footer here (http://jonwhipple.com) –yeah I need to find a video without the stupid ad…

Does the Panel preview SVG? If so, maybe my file is malformed?

Any suggestions welcome.

2

I just tested with the new 2.1 beta and no problem there. What version of Kirby are you on?

3

@texnixe OK I updated to 2.1 and the preview shows. That’s great!

I note the following (not sure where to put these? here under Issues? on github?)

The the information field still doesn’t display dimensions:

The layering in the preview tile makes the SVG cover the text:

When browser viewport is really wide (1920px or more) the icons and labels are no longer centred and things look a bit goofy:

Only looked with Mac OS X 10.10.2, Safari 8.0.4 and Firefox 36.0.1

Thanks!

4

Yeah, true, I experience the same problem depending on svg. I’d post it as an issue on Github rather than here (see this post: How to get “zero” sorting in panel?).

5

Yikes, I never had this when implementing it :frowning: I will check it out again with a bigger SVG and try to fix it.

6

Testing in 2.1 beta, it seems when an SVG is higher than a 1:1 ratio it sticks out of its container div.

Last year I used SVG icons on a big project, and pulled my hair because of viewbox issues, and I think the issue here is related.

For what its worth, I was able to fix it in this particular panel view with css by adding .file-preview img { max-height: 100% }.
(Only tested in Chrome and Safari so far)

7

Opened up a pull request for this, tho I am not too sure if that is a bug that got introduced through the RTL changes or they were aligned left all the time from the beginning: Adjust file options position after RTL by distantnative · Pull Request #419 · getkirby-v2/panel · GitHub

8

Thanks for all your help. I added SVG zero dimension and SVG overlap preview tile to github (issues #421 and #422). @distantnative should I add an issue about the icons + labels not centring even though you have a pull request in?