Re: Feature request: Support picture and source elements in svg to extend support for new webp and avif responsive images embedding

Hi;

I would try something like this…

<div class="w-50 left">

             <svg width="100%" height="100%" class="left" viewBox="0 0 
200 200" xmlns="http://www.w3.org/2000/svg">
                 <foreignObject width="100%" height="100%" >
                     <img src="image.jpg" class="left w-100">
                 </foreignObject>
             </svg>

</div>

<style> <!-- in the HTML -->

img [class*="w-"]{height:auto}

.w-100{width="100%";}

.w-50{width="50%";}

.left{float:left;}

<!-- and so on… 20, 33.3333 -->

Its not the image or the foreignObject who dictates the width, it's the 
parent div

Then you optimize your images. And it's possible to lazyload others 
elements too. Found this

https://stackoverflow.com/questions/49398979/adding-lazy-loading-for-div-element/49399076

Cordially

Luis



Le 11/12/2020 à 05:47, Alexey Lyahov a écrit :
> Hello community. I have met several issues with svg while optimizing 
> web apps performance for my clients and have a feedback.
>
> My client's web apps are using `SVG` images extensively, and a lot of 
> `SVG` has image tags embedded into an SVG, so the code should be 
> inlined due to security limitations of cross linking in SVG files for 
> images to be securely requested.
> And while looking to Google Chrome Lighthouse Audit, I see issues with 
> images in SVG code to be too big for mobile, but normal for desktop. I 
> have managed to fix this kind of issue for `<img />` in html, but 
> currently have no solution for SVG <image /> tag responsive optimizations.
> Currently it is not possible to lazy-load `<image />` in SVG
> It is not possible to dynamically change the src on size change, to 
> save bandwidth.
> Using foreignObject with `<picture>` or just `<img/>` losing scale in 
> Safari
>
> I'm not sure where to open issues, if somebody can point me the right 
> directions, I would appreciate it.
>
> Thanks!
>
> Best Regards,
> Alexey Lyakhov

Received on Friday, 11 December 2020 09:44:05 UTC