SVG in thumbnail

[sojkadavid]

• Laravel Version: 8.83.7
• Nova Version: 4.1.0
• PHP Version: 8.0.1

Description:

Not sure if it's a bug (or something with the image file), but when I want to use SVG files for images, it works fine on the detail page, but does not display anything on the list page. Or better say it shows 0x0 sized images.

In my case, I use SVG files for country flags, here is an example:

Detailed steps to reproduce the issue on a fresh Nova installation:

1. Save the given file to public/flags/us.svg
2. In any Nova resource, add this as one of the fields:

Image::make('Flag',function () {
    $code = 'US'; // this can be a model's attribute
    return 'flags/'.strtolower($code).'.svg';
})
    ->preview(fn($path) => asset($path))
    ->thumbnail(fn($path) => asset($path))
    ->disableDownload()
    ->readonly()
    ->exceptOnForms()
    ->rounded(),

[davidhemphill]

👋 Hi there! In order to keep this repository focused on bug reports, we auto-close feature requests and requests for help. Feel free to post your feature requests so others can discuss and add reactions. We'll keep an eye on them for later planning.

[sojkadavid]

👋 Hi there! In order to keep this repository focused on bug reports, we auto-close feature requests and requests for help. Feel free to post your feature requests so others can discuss and add reactions. We'll keep an eye on them for later planning.

Why is this a feature request? SVGs work fine as avatars for search results, but not for indexes?

[jeffcaulfield-morphsites]

I had a similar issue: an Image field referencing an SVG file appears blank in the index view. It turns out that the SVG is rendered in the HTML, but its effective size is zero pixels high/wide. There is a max-width style on the img element, but no minimum. We resolved this as follows.

1. Create a CSS file somewhere publicly accessible (e.g., public/vendor/nova/image-svg-fix.css) with the following content.

img[src$=".svg"] {
    min-height: 32px;
}

2. Add the following to NovaServiceProvider::boot (after parent::boot()).

Nova::serving(function (ServingNova $event) {
    Nova::style('image-svg-fix', __DIR__.'/../../public/vendor/nova/image-svg-fix.css');
});

Perhaps a min-height could be applied to the img element by default in future releases.