I have created an SVG pattern using the following code:
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-1_4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwc...
x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
The visual representation of this pattern can be seen in the image below: https://i.stack.imgur.com/FK9MF.png
To apply this pattern as a fill in my CSS, I use the following syntax:
svg #VISUEL-3 * {fill: url(#circles-1);}
When displayed at full size, it looks great: https://i.stack.imgur.com/fET1q.png
However, when I scale down the graphic (to 1/4 of its original size), the fill adapts like this: https://i.stack.imgur.com/UCR3k.png
Although the screenshots may not clearly show the difference due to scaling issues on stackoverflow, the vector-effect:non-scaling-stroke property ensures that strokes remain consistent.
As you can see, the fill has adapted...
I am wondering if it is possible to maintain the same pattern size (dot size) even when scaled down using CSS? This becomes visually messy when two differently sized graphics are placed next to each other.
Is there a better method to achieve this? (I am open to suggestions for improvement)