SVG background pattern without scaling or masking

Question

I have several countrymaps in SVG format. The countries are made up of various regions. Each region is a path in the SVG and each region (depending on the dataset) has a certain pattern. The pattern is filled like this (simplified):

<defs>
  <pattern id="pattern4"
           x="0" y="0" width="100" height="100"
           patternUnits="userSpaceOnUse" >
      <rect x="0" y="0" width="50" height="50" style="fill: black"/>
  </pattern>
</defs>

This works fine, however, the maps are gigantic and so are the viewbox. The pattern above is shown as small dots, not even squares. It does work though, but the problem is that I need a legend with corresponding patterns. This I can't seem to solve, because the pattern above is scaled by the viewport of the SVG. I can somehow scale the pattern in the legend, but since the maps are responsive, it often doesn't even come close to eachother. Making the legend useless.

I tried masking, but since I am using several very large SVG-maps on the same webpage, this seems to give (memory?) issues on older computers / browsers. I tried using image backgrounds instead of SVG's but without luck.

I made a very simple JSfiddle to show the problem. All three squares have the same pattern, but they look different caused by the viewbox;

Is there any way to get even patterns? It works but masking and regular images, but this fails on a lot of PC's and mobiles, thus that isn't a solution. Any other direction is welcome as well.

Answer 1

Use an filter/feImage to do a fixed size pattern. Clip the generated pattern to the source path by adding a feComposite/in.

Filters don't support a patternUnits property - please delete those.

Here is a minimal working example based on your code above.

.filter-2 {
  filter: url("#filter-2");
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2960 3464" width="100%" height="100%">

<defs>
    <filter id="filter-2">
     <feImage xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Checkerboard_pattern.svg/500px-Checkerboard_pattern.svg.png" result="pattern" width="100" height="100"/><feTile/>
   <feComposite operator="in" in2="SourceGraphic"/>
  </filter>
  </defs>
  
  <g id="Layer_36">
    <path class="filter-2 st0 zuid-limburg" d="M1830.37,3030.01c4.47,1.42,6.65-0.94,8.56-4.64c1.88-3.65,2.75-8.11,7.69-11.15
        c1.19,7.82,2.57,14.86,3.23,21.96c0.36,3.87,1.3,6.13,5.54,6.52c1.88,0.18,3.61,1.94,5.5,2.14c5.74,0.61,6.94,4.61,6.96,9.15
        c0.04,11.94,0.71,12.57,12.12,9.7c0.96-0.24,1.92-0.53,2.87-0.79c1.08,3.83,2.37,7.61,3.2,11.49c0.66,3.1,2.01,6.52,4.35,7.58
        c5.74,2.59,8.6,6.66,11.52,12.15c4.04,7.6,5.72,14.68,1.6,21.62c-1.99,3.35-5.96,6.78-2.7,10.66c3.47,4.13,7.99,0.85,12.01-0.3
        c3.26-0.93,6.36-2.32,8.59-4.86c3.54-4.03,8.23-5.21,13.12-6.47c4.98-1.28,9.05-0.91,12.39,3.48c3.01,3.96,6.67,3.68,11.51,2.77
        c9.73-1.82,19.74-2.36,29.66-2.87c5.63-0.28,7.07,1.55,5.27,6.49c-3.02,8.33-4.68,17.47-13.21,24.01
        c8.15,4.42,6.2,12.48,7.47,19.19c0.95,4.99,2.5,7.74,7.52,8.93c4.83,1.14,9.39,3.48,14.23,4.6c3.42,0.8,6.2,0.99,6.81,5.54
        c0.54,4.07,5.04,3.98,7.28,3.02c6.98-2.97,12.09,0.89,18.59,3.55c-5.39,7.68-8.71,15.66-10.63,24.48
        c-1.49,6.85-0.66,12.71,3.58,17.68c4.93,5.77,4.84,12.59,1.59,17.58c-4.37,6.73-6.51,13.61-7.08,21.42
        c-4.19-0.29-9.04-1.39-10.25-3.9c-3.42-7.04-6.71-4.27-10.65-1.27c-3.53,2.69-8.45,1.84-11.95,4.74c-2.67,2.21-7.85,1.5-8.28,6.2
        c-0.48,5.17-1.9,10.61,1.57,15.41c2.6,3.59,3.69,7.28,3.44,11.96c-0.49,9.21-7.92,13.07-13.04,18.72c-1.25,1.38-3.06,1.09-4.51-0.1
        c-1.29-1.06-2.51-2.19-3.72-3.33c-7.38-6.95-10.07-4.31-13.54,3.85c-1.56,3.66-0.37,6.68,3.42,8.06
        c5.59,2.04,9.18,6.07,12.66,10.67c3.67,4.84,9.1,7.73,14.66,10.11c4.69,2.02,5.77,4.99,3.17,9.49c-1.15,1.99-1.97,4.23-2.56,6.46
        c-0.76,2.86,1.18,6.37-0.86,8.71c-2.55,2.93-6.9,2.32-10.29,2.72c-7.93,0.93-16.36,3.44-22.7-5.23c-2.33-3.19-7.32-4.43-11.88-3.16
        c-7.99,2.23-16.16,4.07-23.07,9.01c-2.67,1.91-4.88,3.33-7.55-0.17c-2.3-3.01-5.25-1.3-8.18-0.52c-5.69,1.52-8.7-0.63-9.58-6.37
        c-0.2-1.31,0.02-2.69-0.22-3.98c-1.13-6.15-2.31-6.52-8.62-4.29c-7.47,2.64-14.97,5.09-20.04,11.13c-2.85-0.7-2.47-2.64-3-4.12
        c-1.75-4.83-3.11-5.52-6.89-2.61c-3.46,2.67-6.74,4.74-11.3,5.62c-9.99,1.91-9.88,2.31-15.79-6.47c-2.29-3.4-3.77-7.95-9.63-6.12
        c-1.62,0.51-2.96-1.32-3.59-2.92c-0.86-2.16-1.57-4.39-2.26-6.61c-2.24-7.26-7.51-9.24-11.69-3.47
        c-5.72,7.9-15.87,12.78-16.87,24.05c-0.22,2.46-2.4,2.97-4.58,2.38c-2.63-0.71-5.03-1.97-6.56-4.28c-1.74-2.63-3.06-2.4-5.51-0.49
        c-4.17,3.25-10.13,3.06-14.24,6.77c-0.62,0.56-1.9,0.53-2.88,0.51c-2.77-0.06-5.43-0.93-7.07-3.14c-1.98-2.66-0.1-5.21,1.43-7.26
        c3.54-4.77,8.12-8.67,9.8-14.84c1.28-4.71,2.16-8.64-1.21-13.07c-3.57-4.7-4.71-9.71-0.54-15.53c3.58-4.99,0.62-10.06-5.73-11.88
        c-7.39-2.12-13.66-7.17-21.53-8.08c-2.38-0.28-2.57-2.48-3.09-4.51c-1.72-6.73-4.05-13.25-7.96-19.08
        c-3.94-5.86-2.04-12.28-1.65-18.48c0.39-6.13,3.7-11.7,3.87-17.92c0.06-1.94,1.49-2.91,3-3.63c3.01-1.43,5.68-3.98,8.6-4.86
        c8.33-2.52,13.26-8.29,18.43-14.76c3.54-4.43,5.94-8.3,5.88-14.1c-0.09-8.29,3.78-10.59,11.37-7.49
        c6.74,2.75,10.45,1.07,10.29-5.98c-0.2-8.75,2.94-15.48,9.02-21.25c2.26-2.14,3.81-4.85,4.39-7.72c0.98-4.86,2.71-8.61,7.53-10.92
        c3.99-1.9,3.58-5.35,0.94-8.28c-2.6-2.88-5.16-6.77-9.95-3.71c-2.2,1.41-3.58,4.04-6.38,4.62c-3.03,0.63-6.1,0.75-8.27-1.94
        c-1.98-2.45-1.57-5.5,0.42-7.33c6.46-5.91,7.78-16.33,17.35-19.46c1.99-0.65,2.77-2.78,3.68-4.56c0.91-1.78,1.39-3.94,2.71-5.32
        c6.75-7.12,10.11-15.17,8.64-25.17c-0.51-3.48,2.85-5.86,4.28-8.82c3.04-6.31,2.3-8.43-4.21-11.62c-7.6-3.72-7.86-4.47-3.39-11.82
        c4.19-6.9,7.61-13.88,7.28-22.4c-0.2-5.28,1.73-6.2,7.04-3.72C1821.44,3029.78,1825.54,3031.69,1830.37,3030.01z"></path>
</g>

</svg>