Image not using availible space in preview

[vanbroup]

Auto scaling SVG images (without defined size) are not taking the availible space in the search result. In the example below you can clearly see that the first image (SVG) is much smaller than the second image (JPG) while the image could easily be shown bigger.

Screenshot taken from: https://pkic.org/blog/

Direct image link: https://pkic.org/images/members/entrust/entrust.svg

[bglw]

Hmm, this might be hard to fix generically, since those are rendered as img tags with a src — Pagefind doesn't particularly look at what the filetype is.

The general handling is that it sizes images up to the box, or the image size, whichever is smaller, to prevent scaling images above their resolution. SVGs do have an inherent size based on their contents that the browser is using here:

The main solution would be to detect svg URLs and give them different CSS, but I'm hesitant to do that as a blanket action — people do embed images in SVGs that we'd want to avoid scaling.

My current suggestion would be to add some extra CSS if you're after this behavior, the following would do the trick:

.pagefind-ui__result-image[src*="svg"] {
  width: 100% !important;
}

Let me know if this becomes more of a problem, though, and I can dig deeper