Is It Possible To Put Hi Dpi Images Like 2x, 3x And 4x In A Svg Image Pattern?

Is there a way to support 2x, 3x and 4x images in SVG pattern? I want to avoid JavaScript and either set SVG attributes if available or set CSS. Is there is anything like: <

Solution 1:

You can use a HTML <img> tag wrapped in a <foreignObject> tag:

<pattern id="Avatar_A0" x="0" y="0" width="100%" height="100%">
    <foreignObject width="100%" height="100%">
        <img srcset="icon.png 1x, icon@2x.png 2x, icon@3x.png 3x"
             x="0" y="0" width="100%" height="100%"></image>
    </foreignObject>
</pattern>