When passing an SVG to the Responsive tag, use the Statamic SVG tag instead of inlining an <img /> with src of SVG asset

[schwartzmj]

Currently, if you pass an SVG to the {{ responsive }} tag, it renders an <img /> element with the src set to the path of the SVG.

Is it accurate that all {{ responsive }} tags should be for assets hosted within the Statamic project? If so, I think we should consider calling the built in {{ svg }} tag so that Statamic renders the SVG on the page instead of making the <img /> element make another request to the server.

Below is an example of this working (first few lines within the if statement). I'm not sure if there's a better way to call the Statamic SVG tag with the $attributeString we currently have.

@if($asset['extension'] == 'svg')
    @php
        echo (new \Statamic\View\Antlers\Antlers)
            ->parse("{{ svg src='{$src}' {$attributeString} }}")
    @endphp
@else
    @once
        <script>
            window.addEventListener('load', function () {
                window.responsiveResizeObserver = new ResizeObserver((entries) => {
                    entries.forEach(entry => {
                        const imgWidth = entry.target.getBoundingClientRect().width;
                        entry.target.parentNode.querySelectorAll('source').forEach((source) => {
                            source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
                        });
                    });
                });

                document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
                    responsiveResizeObserver.onload = null;
                    responsiveResizeObserver.observe(responsiveImage);
                });
            });
        </script>
    @endonce
    <picture>
        @foreach (($sources ?? []) as $source)
            @isset($source['srcSetAvif'])
                <source
                    type="image/avif"
                    @isset($source['media']) media="{{ $source['media'] }}" @endisset
                    srcset="{{ $source['srcSetAvif'] }}"
                    @if($includePlaceholder ?? false) sizes="1px" @endif
                >
            @endisset
            @isset($source['srcSetWebp'])
                <source
                    type="image/webp"
                    @isset($source['media']) media="{{ $source['media'] }}" @endisset
                    srcset="{{ $source['srcSetWebp'] }}"
                    @if($includePlaceholder ?? false) sizes="1px" @endif
                >
            @endisset

            <source
                @isset($source['media']) media="{{ $source['media'] }}" @endisset
                srcset="{{ $source['srcSet'] }}"
                @if($includePlaceholder ?? false) sizes="1px" @endif
            >
        @endforeach

        <img
            {!! $attributeString ?? '' !!}
            src="{{ $src }}"
            @unless (\Illuminate\Support\Str::contains($attributeString, 'alt'))
            alt="{{ $asset['alt'] ?? $asset['title'] }}"
            @endunless
            @isset($width) width="{{ $width }}" @endisset
            @isset($height) height="{{ $height }}" @endisset
            @isset($sources)
            data-statamic-responsive-images
            @endisset
        >
    </picture>
@endif

[ncla]

What is the use case here?

I would not edit the responsiveImage.blade.php template but do the asset filetype check in Antlers, then call svg or responsive tag respectively.

Inlining SVG is a good idea and would indeed save a trip to the server, but there can be situations where the .svg file is quite big too.

Personally if you are uploading .svg file then I think you are only expecting that filetype only (e.g. site logo, social icons) and nothing else, in such case just use regular asset fieldtype with svg tag.