[5.x]: Multiple SVG filters in a row embed the same file, even if their src has changed

[nathansnelgrove]

What happened?

Description

I am not 100% positive this isn't user error, but for the life of me, I can't figure out where I've gone wrong here. I am a couple versions behind on Craft, and perhaps this has been fixed in a more recent update (client needs to re-up their subscription), but I couldn't find anything related to this in the changelogs.

So first, let me apologize if this is my own darn fault or if this was fixed in a more recent Craft version.

If one were to display multiple SVGs in a single twig file, and give each one a different SVG file to embed, they should each be rendered appropriately. Instead, it seems like the first file is cached somehow, and it displays repeatedly, even when the inputs are changed.

In the screenshot below, you can see that the same SVG is rendered twice, even though the files have changed. The only thing that changes is the size of the viewbox. The viewbox in the second filtered SVG is correct, but the actual art is not (hence why it's oddly cropped).

I have my code below:

    {% set leftMapImage = '@webroot/assets/site-assets/about-header-left-map.svg' %}
    {% set direction = 'left' %}
    <div class="map-image {{ direction }}-map">
        {{ svg(leftMapImage) }}
    </div><!--.map-->

    <div class="text-wrapper">
        {% if title %}
            <h1>{{ title | striptags('<em><i>') }}</h1>
        {% endif %}

        {% if subtitle %}
            <p>{{ subtitle | striptags('<em><strong><b><i>') }}</p>
        {% endif %}

        {% if buttons %}
            {% include '_components/hr-vertical' %}
            {% include '_components/buttons' %}
        {% endif %}
    </div><!--.text-wrapper-->

    {% set rightMapImage = '@webroot/assets/site-assets/what-we-believe-header-left-map.svg' %}
    {% set direction = 'right' %}
    <div class="map-image {{ direction }}-map">
        {{ svg(rightMapImage) }}
    </div><!--.map-->

I have tried storing and fetching the map images as arrays. I have tried placing the map-image code inside another file that gets included (that's actually the default setup). I have tried not using any variables at all and hard-coding the SVG filter. The results are the same every time.

The only thing I can think of that might make this odd is that the site is set up for multilingual. So maybe my @webroot variable is set up incorrectly. But if that were the case, I am unsure why either SVG would render at all? I don't want to discount it as a possibility, but it doesn't pass the sniff test for me.

Steps to reproduce

1. Take two SVG files and place them in whatever directory you like.
2. Output the SVG files using the {{ svg() }} filter.

Expected behavior

The SVG filter should output the different SVG files.

Actual behavior

The SVG filter outputs the art from the second SVG file, but not the viewbox.

Craft CMS version

5.7.5

PHP version

8.2.28

Operating system and version

No response

Database type and version

No response

Image driver and version

No response

Installed plugins and versions

[linear[bot]]

CMS-1536 [5.x]: Multiple SVG filters in a row embed the same file, even if their src has changed

[brandonkelly]

I’m not able to reproduce that on my end.

Are you sure the SVG files are actually different?

[nathansnelgrove]

Absolutely positive. I've attached the three I've been testing (the light ones are used on darker backgrounds, so apologies if they're hard to see here.)

I will continue investigating this on my end, because it's not consistent, and I don't know why. It just occurred to me it might be a Docker or DDEV problem too; a frequent issue I have with Docker is that it caches things that shouldn't be cached.

[brandonkelly]

Hm yeah, maybe try renaming the files, or testing on a different dev environment, and see if the issue persists.