cropZoom doesn't work with svg images

Support Themes & Styling
1

Hello there

I’m working in several improvements to theme Telephasic (twig template for search results), and I can see the svg images doesn’t work fine with cropZoom or cropResize filters. They don’t change the size.

This is the code (it works fine with other image formats):

{% set banner = page.media[page.header.primaryImage].cropZoom(100,100).loading('lazy').html('',page.title)|raw %}

Result sample (with cropResize):

search_results_svg
search_results_svg1033×827 67.8 KB

Is there anyway to get the svg images work with these filters?

Thanks in advance.

2

Hello.

I have found a workaround, until resizing of svg images is supported by cropZoom or cropResize filters.

In the simplesearch_item.html.twig file, I define the banner variable as:

{% set banner = page.media[page.header.primaryImage].loading('lazy').html(page.title,page.title)|raw %}

{% if banner %}
<div class="search-image">
    <a href="{{ page.url }}">{{ banner }}</a>
</div>
{% endif %}

(no cropZoom or cropResize filters)

In the custom.css file, I have made the following modifications (defining the size in css):

.search-row {
    display: flex;
    align-items: center;
    
}
.search-image img {
    overflow:hidden;
    width: 100px;
    height: 100px;
    object-fit: cover;
    object position: 0 100%;
}
@media only all and (max-width: 47.938em) {
    .search-image img {
      display:none; } }
.search-item {
margin-left: 30px;
margin-bottom: 50px;
}

With this solution I can show the thumbnail image in search results page.

3

I don’t think SVG will ever be supported. It’s vector graphics, not raster image. You can’t just crop SVG, you have to completely change <path/> and/or other tags in SVG. SVG is not pixel based media. If you open SVG with any text editor, you might get an idea what I’m talking about

2 Likes
4

I know this @Karmalakas.

So the solution in this case was to wrap the svg image in div tags, and apply the size of that div tag in the style sheet.

1 Like
5

Yes, resizing is easy. Cropping - another story