How to adjust space between SVG over an SVG path using CSS?

Question

I made a rookie DIY design for a saree. I used the SVG's to place over another SVG for it. Which works fine, but need to be able to adjust the distance between replicated SVG's (both vertical and horizontal).

Here's how it looks now:

In the above picture, I was able to add an SVG(design) over another plain SVG(saree) and the replicates. But how do I manipulate the distance between them using CSS.

Here's the code in JSFiddle :

<style>
.blowse-top-detailed {
    width: 500px;
    height: 300px;
    left: 40%;
    top: 5%;
    position: absolute;
}
</style>

<svg class="saree-top saree" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 243.000000 439.000000" preserveAspectRatio="xMidYMid meet">
  <g transform="translate(0.000000,439.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
    <pattern id="saree_pattern_img" patternUnits="userSpaceOnUse" width="100%" height="100%">
      <svg id="saree_img" xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 401.000000 254.000000" style="width: 30px;height: 30px;">
        <g xmlns="http://www.w3.org/2000/svg" transform="translate(0.000000,254.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
          <path d="M2865 2381 c-44 -10 -90 -23 -102 -29 -49 -27 -55 -80 -18 -160 37 -80 34 -113 -17 -166 -30 -30 -62 -50 -106 -66 -54 -20 -61 -25 -45 -34 26 -15 132 -10 176 8 20 9 62 39 92 66 40 36 69 53 112 65 90 25 121 42 139 76 20 40 16 62 -35 172 l-41 87 -37 -1 c-21 -1 -74 -9 -118 -18z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M992 2351 c-18 -11 -52 -133 -52 -183 0 -49 44 -100 102 -117 24 -8 57 -18 75 -23 18 -5 66 -36 107 -69 83 -66 118 -81 156 -67 l25 10 -25 10 c-93 37 -117 59 -127 121 -4 27 2 51 27 101 l32 66 -25 54 c-31 67 -56 81 -162 89 -44 3 -89 9 -100 12 -11 3 -26 1 -33 -4z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M3175 2136 c-35 -15 -90 -74 -112 -121 -15 -30 -14 -37 1 -75 l16 -42 -28 -26 c-49 -46 -135 -82 -246 -104 -58 -12 -106 -25 -106 -29 0 -15 150 -10 220 6 36 9 106 32 155 53 85 35 96 37 207 38 110 1 120 3 158 28 53 35 67 64 52 113 -6 21 -14 64 -18 96 -4 32 -10 60 -14 62 -5 3 -64 7 -132 10 -88 3 -132 0 -153 -9z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M557 2123 c-4 -3 -7 -14 -7 -23 0 -9 -11 -38 -25 -64 -14 -26 -25 -58 -25 -71 0 -31 43 -81 93 -107 36 -18 51 -19 141 -13 90 6 106 4 151 -15 28 -12 91 -33 140 -46 155 -43 432 -42 438 1 1 6 -52 12 -133 16 -142 6 -206 22 -314 76 -80 40 -88 50 -80 101 6 41 4 46 -32 84 -57 59 -85 68 -222 68 -65 0 -122 -3 -125 -7z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1933 2102 c-56 -31 -78 -69 -78 -139 0 -72 19 -105 81 -140 72 -42 153 -22 205 50 54 74 33 180 -43 227 -41 25 -121 26 -165 2z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1017 1974 c-8 -8 2 -35 22 -58 31 -36 205 -96 242 -84 13 4 -114 105 -169 134 -27 14 -84 19 -95 8z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2930 1949 c-14 -6 -41 -25 -60 -44 -20 -19 -65 -46 -100 -61 -84 -34 -94 -44 -43 -44 47 0 220 54 246 77 10 9 17 30 17 50 0 36 -13 41 -60 22z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1734 1876 l-39 -33 20 -38 c28 -52 90 -112 150 -143 44 -24 61 -27 150 -27 89 0 105 3 151 27 51 27 127 102 147 146 9 20 5 28 -28 62 -22 22 -46 40 -55 40 -8 0 -26 -20 -39 -44 -13 -25 -40 -57 -61 -71 -102 -71 -216 -46 -296 65 -20 27 -41 50 -48 50 -7 0 -30 -15 -52 -34z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M3524 1811 c-26 -12 -57 -40 -85 -77 -25 -33 -64 -69 -86 -82 -121 -67 -410 -70 -627 -6 -105 30 -50 -12 65 -50 85 -29 186 -41 404 -52 l149 -7 46 -47 c39 -40 55 -50 104 -60 32 -7 96 -10 141 -8 77 3 86 5 122 36 21 18 66 54 100 80 40 30 62 54 63 68 0 32 -175 199 -225 213 -59 16 -124 13 -171 -8z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1611 1784 c-27 -34 -27 -41 7 -95 54 -83 156 -160 255 -191 104 -32 246 -19 355 34 90 43 221 192 206 233 -4 8 -15 20 -25 25 -37 20 -58 11 -99 -45 -48 -65 -113 -115 -182 -140 -73 -26 -195 -18 -268 19 -59 29 -138 101 -171 154 -25 39 -51 41 -78 6z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M365 1768 c-11 -7 -64 -45 -117 -85 -119 -90 -123 -103 -47 -163 29 -22 64 -58 80 -79 34 -47 96 -71 186 -71 97 0 152 28 198 101 l23 36 134 7 c206 11 392 46 516 97 84 35 59 55 -29 23 -256 -90 -590 -60 -656 61 -33 61 -87 85 -187 85 -45 0 -90 -6 -101 -12z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M782 1768 c-19 -19 -15 -32 23 -71 32 -33 40 -36 93 -36 31 0 118 -3 192 -6 112 -5 147 -3 204 12 87 23 104 48 24 36 -83 -12 -258 -9 -315 5 -33 9 -60 24 -77 43 -23 25 -33 29 -79 29 -29 0 -58 -5 -65 -12z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M3150 1736 c-41 -22 -62 -24 -239 -29 -106 -3 -195 -8 -198 -11 -6 -6 1 -9 62 -26 47 -13 396 -26 447 -16 35 6 88 46 88 65 0 9 -83 41 -104 41 -6 -1 -31 -11 -56 -24z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1470 1730 c-24 -24 -24 -29 -4 -58 22 -31 69 -30 90 3 15 23 15 27 0 50 -20 31 -58 33 -86 5z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2482 1729 c-30 -11 -39 -54 -17 -79 25 -28 61 -25 81 5 30 47 -10 94 -64 74z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1532 1610 c-16 -27 -15 -41 7 -67 24 -29 42 -29 69 0 28 29 28 41 0 67 -28 25 -60 26 -76 0z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2400 1591 c-16 -31 -12 -49 15 -67 21 -14 31 -15 50 -6 24 11 30 27 25 62 -5 34 -73 42 -90 11z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2647 1581 c35 -29 166 -80 270 -106 51 -13 113 -31 137 -40 49 -19 99 -15 132 10 19 15 19 15 0 30 -20 15 -53 22 -257 54 -75 12 -169 32 -209 46 -87 30 -103 31 -73 6z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1325 1535 c-149 -55 -227 -71 -276 -56 -38 11 -45 10 -96 -15 -47 -23 -53 -28 -41 -41 35 -34 82 -28 277 36 103 35 206 73 227 86 55 34 20 30 -91 -10z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1639 1521 c-20 -16 -22 -23 -14 -47 6 -18 21 -33 39 -39 24 -8 31 -6 47 14 22 27 24 41 7 63 -21 27 -53 30 -79 9z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2580 1525 c26 -31 190 -131 307 -187 68 -32 127 -67 133 -78 5 -10 10 -34 10 -53 0 -42 41 -87 115 -124 l49 -26 121 18 c66 10 127 21 135 26 9 4 20 36 28 76 7 37 15 80 19 95 11 56 -3 78 -75 111 -86 39 -154 42 -232 8 -44 -19 -65 -22 -110 -18 -87 10 -293 73 -396 122 -99 48 -125 55 -104 30z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2306 1509 c-31 -25 -33 -49 -5 -74 19 -19 21 -19 55 0 37 20 42 39 18 73 -19 27 -34 28 -68 1z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1403 1465 c-87 -40 -264 -93 -354 -106 -80 -12 -91 -11 -165 10 l-79 23 -65 -22 c-107 -36 -126 -52 -170 -145 -42 -88 -49 -125 -27 -144 16 -13 123 -31 223 -38 64 -5 76 -2 130 25 71 36 79 44 93 97 6 22 16 49 24 58 7 10 111 69 232 131 120 62 221 118 223 125 5 16 -7 14 -65 -14z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1762 1437 c-29 -30 -28 -53 3 -73 48 -31 98 12 73 64 -17 35 -48 39 -76 9z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2181 1436 c-28 -30 -24 -57 12 -74 24 -12 31 -11 53 2 31 21 30 37 -2 70 -33 32 -35 32 -63 2z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2486 1429 c3 -6 61 -47 128 -90 66 -44 135 -96 152 -116 30 -34 35 -36 95 -37 58 -1 64 1 67 20 5 35 -57 81 -120 89 -52 7 -124 41 -235 112 -50 32 -102 45 -87 22z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1896 1414 c-33 -32 -10 -94 35 -94 23 0 59 34 59 55 0 21 -36 55 -59 55 -11 0 -27 -7 -35 -16z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2036 1404 c-21 -21 -20 -47 2 -67 23 -21 56 -22 76 -1 32 32 8 84 -39 84 -13 0 -31 -7 -39 -16z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1462 1360 c-66 -35 -100 -46 -240 -80 -49 -13 -82 -41 -82 -70 0 -18 7 -20 60 -20 37 0 74 7 93 17 58 30 267 173 267 183 0 16 -21 10 -98 -30z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2350 1357 c0 -16 53 -64 212 -190 54 -43 105 -89 114 -103 9 -13 20 -58 24 -98 7 -76 22 -107 73 -154 19 -18 56 -30 147 -48 68 -14 137 -24 154 -22 28 3 31 7 33 38 2 19 8 65 14 101 14 82 8 109 -37 158 -52 58 -112 82 -226 91 -92 7 -103 11 -200 62 -90 48 -213 119 -285 166 -20 13 -23 12 -23 -1z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1518 1277 c-193 -126 -227 -142 -312 -139 -84 2 -146 -23 -213 -87 -48 -46 -56 -79 -51 -201 l3 -75 99 -9 c121 -10 158 0 217 58 51 50 58 69 52 129 -9 76 7 98 171 234 149 124 176 149 176 165 0 15 -16 7 -142 -75z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2276 1321 c-9 -13 56 -139 102 -199 18 -24 47 -70 64 -102 33 -63 67 -87 129 -92 l34 -3 -2 48 c-2 56 -25 97 -54 97 -35 0 -53 16 -144 122 -124 144 -122 142 -129 129z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1664 1221 c-48 -46 -109 -92 -150 -113 -76 -40 -97 -59 -113 -100 -21 -57 12 -73 88 -42 24 10 51 32 72 62 19 26 69 91 112 145 43 54 77 104 75 112 -2 8 -36 -19 -84 -64z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2180 1281 c0 -30 46 -152 112 -296 72 -155 78 -186 49 -243 -28 -55 -26 -98 7 -162 40 -79 64 -93 180 -101 53 -4 116 -11 138 -14 23 -4 44 -3 47 1 3 5 12 61 22 125 15 103 15 120 2 150 -41 94 -112 149 -194 149 -41 0 -58 5 -83 27 -38 31 -160 202 -222 308 -44 76 -58 90 -58 56z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1986 1208 c-3 -29 -8 -120 -11 -203 -7 -166 -21 -299 -36 -328 -9 -15 -18 -17 -67 -11 -49 5 -61 3 -85 -16 -36 -28 -60 -78 -82 -167 -17 -71 -17 -73 4 -116 17 -34 33 -50 77 -73 59 -31 108 -73 162 -142 18 -23 41 -42 50 -42 10 0 40 17 68 38 27 20 89 66 137 101 67 49 89 72 96 97 17 63 -9 198 -50 256 -19 26 -68 49 -99 46 -32 -3 -48 3 -54 17 -7 18 -72 444 -81 533 -4 34 -11 62 -15 62 -5 0 -11 -24 -14 -52z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1755 1144 c-164 -224 -207 -264 -281 -264 -26 0 -53 -8 -75 -23 -44 -30 -106 -112 -113 -151 -5 -32 25 -231 38 -243 4 -4 60 -6 124 -4 134 3 135 4 203 105 45 67 49 101 19 176 -11 28 -20 61 -20 73 0 12 43 108 96 213 53 105 94 199 93 209 -3 13 -28 -15 -84 -91z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1904 1239 c-6 -8 -25 -57 -43 -109 -34 -96 -79 -194 -112 -242 -35 -48 -20 -158 21 -158 29 0 77 27 90 49 5 11 10 52 10 92 0 40 12 132 26 205 26 137 29 190 8 163z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2094 1233 c3 -10 15 -70 27 -133 23 -124 27 -204 15 -261 -8 -34 -5 -40 34 -83 23 -25 48 -46 56 -46 13 0 74 98 74 118 0 6 -11 21 -24 34 -16 14 -46 79 -80 171 -31 82 -63 164 -72 183 -17 35 -39 48 -30 17z" style="fill: rgb(255, 255, 255);"></path>
        </g>
      </svg>
    </pattern>
  </g>
</svg>
<svg class="saree-top-detailed saree detailed_indi" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 121.000000 95.000000" preserveAspectRatio="xMidYMid meet" style="display: block;">
  <g transform="translate(0.000000,95.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
    <rect class="path_saree" x="10" y="10" width="1200px" height="500px" fill="black" stroke="black" style="fill: rgb(25, 36, 112);"></rect>
    <rect class="path_saree_img" x="10" y="10" width="1200px" height="500px" fill="black" stroke="black" style="display: block; fill: url(&quot;#saree_pattern_img&quot;);"></rect>
  </g>
</svg>

Any help is greatly appreciated.

Answer 1

In order to simplify the code I've made a few changes. I've put the lothus flower in a symbol. Inside the pattern I'm using the symbol with <use> . Since the symbol has a viewBox you can resize it as you need. In this case I'm using width="37.7" height="22.9" . Please observe that I'm keeping the same aspect ratio. (symbol's viewBox="150 110 3770 2290 ")

Also the pattern has a width="37.7" height="22.9". In this case I'm using the same width and height as the use element and the lothus flowers are apearing one next to each other.

 <svg class="saree-top saree" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 1220 500" preserveAspectRatio="xMidYMid meet"> <symbol id="saree_img" viewBox="150 110 3770 2290"> <path d="M2865 2381 c-44 -10 -90 -23 -102 -29 -49 -27 -55 -80 -18 -160 37 -80 34 -113 -17 -166 -30 -30 -62 -50 -106 -66 -54 -20 -61 -25 -45 -34 26 -15 132 -10 176 8 20 9 62 39 92 66 40 36 69 53 112 65 90 25 121 42 139 76 20 40 16 62 -35 172 l-41 87 -37 -1 c-21 -1 -74 -9 -118 -18z" ></path> <path d="M992 2351 c-18 -11 -52 -133 -52 -183 0 -49 44 -100 102 -117 24 -8 57 -18 75 -23 18 -5 66 -36 107 -69 83 -66 118 -81 156 -67 l25 10 -25 10 c-93 37 -117 59 -127 121 -4 27 2 51 27 101 l32 66 -25 54 c-31 67 -56 81 -162 89 -44 3 -89 9 -100 12 -11 3 -26 1 -33 -4z" ></path> <path d="M3175 2136 c-35 -15 -90 -74 -112 -121 -15 -30 -14 -37 1 -75 l16 -42 -28 -26 c-49 -46 -135 -82 -246 -104 -58 -12 -106 -25 -106 -29 0 -15 150 -10 220 6 36 9 106 32 155 53 85 35 96 37 207 38 110 1 120 3 158 28 53 35 67 64 52 113 -6 21 -14 64 -18 96 -4 32 -10 60 -14 62 -5 3 -64 7 -132 10 -88 3 -132 0 -153 -9z" ></path> <path d="M557 2123 c-4 -3 -7 -14 -7 -23 0 -9 -11 -38 -25 -64 -14 -26 -25 -58 -25 -71 0 -31 43 -81 93 -107 36 -18 51 -19 141 -13 90 6 106 4 151 -15 28 -12 91 -33 140 -46 155 -43 432 -42 438 1 1 6 -52 12 -133 16 -142 6 -206 22 -314 76 -80 40 -88 50 -80 101 6 41 4 46 -32 84 -57 59 -85 68 -222 68 -65 0 -122 -3 -125 -7z" ></path> <path d="M1933 2102 c-56 -31 -78 -69 -78 -139 0 -72 19 -105 81 -140 72 -42 153 -22 205 50 54 74 33 180 -43 227 -41 25 -121 26 -165 2z" ></path> <path d="M1017 1974 c-8 -8 2 -35 22 -58 31 -36 205 -96 242 -84 13 4 -114 105 -169 134 -27 14 -84 19 -95 8z" ></path> <path d="M2930 1949 c-14 -6 -41 -25 -60 -44 -20 -19 -65 -46 -100 -61 -84 -34 -94 -44 -43 -44 47 0 220 54 246 77 10 9 17 30 17 50 0 36 -13 41 -60 22z" ></path> <path d="M1734 1876 l-39 -33 20 -38 c28 -52 90 -112 150 -143 44 -24 61 -27 150 -27 89 0 105 3 151 27 51 27 127 102 147 146 9 20 5 28 -28 62 -22 22 -46 40 -55 40 -8 0 -26 -20 -39 -44 -13 -25 -40 -57 -61 -71 -102 -71 -216 -46 -296 65 -20 27 -41 50 -48 50 -7 0 -30 -15 -52 -34z" ></path> <path d="M3524 1811 c-26 -12 -57 -40 -85 -77 -25 -33 -64 -69 -86 -82 -121 -67 -410 -70 -627 -6 -105 30 -50 -12 65 -50 85 -29 186 -41 404 -52 l149 -7 46 -47 c39 -40 55 -50 104 -60 32 -7 96 -10 141 -8 77 3 86 5 122 36 21 18 66 54 100 80 40 30 62 54 63 68 0 32 -175 199 -225 213 -59 16 -124 13 -171 -8z" ></path> <path d="M1611 1784 c-27 -34 -27 -41 7 -95 54 -83 156 -160 255 -191 104 -32 246 -19 355 34 90 43 221 192 206 233 -4 8 -15 20 -25 25 -37 20 -58 11 -99 -45 -48 -65 -113 -115 -182 -140 -73 -26 -195 -18 -268 19 -59 29 -138 101 -171 154 -25 39 -51 41 -78 6z"></path> <path d="M365 1768 c-11 -7 -64 -45 -117 -85 -119 -90 -123 -103 -47 -163 29 -22 64 -58 80 -79 34 -47 96 -71 186 -71 97 0 152 28 198 101 l23 36 134 7 c206 11 392 46 516 97 84 35 59 55 -29 23 -256 -90 -590 -60 -656 61 -33 61 -87 85 -187 85 -45 0 -90 -6 -101 -12z"></path> <path d="M782 1768 c-19 -19 -15 -32 23 -71 32 -33 40 -36 93 -36 31 0 118 -3 192 -6 112 -5 147 -3 204 12 87 23 104 48 24 36 -83 -12 -258 -9 -315 5 -33 9 -60 24 -77 43 -23 25 -33 29 -79 29 -29 0 -58 -5 -65 -12z" ></path> <path d="M3150 1736 c-41 -22 -62 -24 -239 -29 -106 -3 -195 -8 -198 -11 -6 -6 1 -9 62 -26 47 -13 396 -26 447 -16 35 6 88 46 88 65 0 9 -83 41 -104 41 -6 -1 -31 -11 -56 -24z" ></path> <path d="M1470 1730 c-24 -24 -24 -29 -4 -58 22 -31 69 -30 90 3 15 23 15 27 0 50 -20 31 -58 33 -86 5z" ></path> <path d="M2482 1729 c-30 -11 -39 -54 -17 -79 25 -28 61 -25 81 5 30 47 -10 94 -64 74z"></path> <path d="M1532 1610 c-16 -27 -15 -41 7 -67 24 -29 42 -29 69 0 28 29 28 41 0 67 -28 25 -60 26 -76 0z"></path> <path d="M2400 1591 c-16 -31 -12 -49 15 -67 21 -14 31 -15 50 -6 24 11 30 27 25 62 -5 34 -73 42 -90 11z" ></path> <path d="M2647 1581 c35 -29 166 -80 270 -106 51 -13 113 -31 137 -40 49 -19 99 -15 132 10 19 15 19 15 0 30 -20 15 -53 22 -257 54 -75 12 -169 32 -209 46 -87 30 -103 31 -73 6z"></path> <path d="M1325 1535 c-149 -55 -227 -71 -276 -56 -38 11 -45 10 -96 -15 -47 -23 -53 -28 -41 -41 35 -34 82 -28 277 36 103 35 206 73 227 86 55 34 20 30 -91 -10z"></path> <path d="M1639 1521 c-20 -16 -22 -23 -14 -47 6 -18 21 -33 39 -39 24 -8 31 -6 47 14 22 27 24 41 7 63 -21 27 -53 30 -79 9z"></path> <path d="M2580 1525 c26 -31 190 -131 307 -187 68 -32 127 -67 133 -78 5 -10 10 -34 10 -53 0 -42 41 -87 115 -124 l49 -26 121 18 c66 10 127 21 135 26 9 4 20 36 28 76 7 37 15 80 19 95 11 56 -3 78 -75 111 -86 39 -154 42 -232 8 -44 -19 -65 -22 -110 -18 -87 10 -293 73 -396 122 -99 48 -125 55 -104 30z"></path> <path d="M2306 1509 c-31 -25 -33 -49 -5 -74 19 -19 21 -19 55 0 37 20 42 39 18 73 -19 27 -34 28 -68 1z"></path> <path d="M1403 1465 c-87 -40 -264 -93 -354 -106 -80 -12 -91 -11 -165 10 l-79 23 -65 -22 c-107 -36 -126 -52 -170 -145 -42 -88 -49 -125 -27 -144 16 -13 123 -31 223 -38 64 -5 76 -2 130 25 71 36 79 44 93 97 6 22 16 49 24 58 7 10 111 69 232 131 120 62 221 118 223 125 5 16 -7 14 -65 -14z"></path> <path d="M1762 1437 c-29 -30 -28 -53 3 -73 48 -31 98 12 73 64 -17 35 -48 39 -76 9z" ></path> <path d="M2181 1436 c-28 -30 -24 -57 12 -74 24 -12 31 -11 53 2 31 21 30 37 -2 70 -33 32 -35 32 -63 2z" ></path> <path d="M2486 1429 c3 -6 61 -47 128 -90 66 -44 135 -96 152 -116 30 -34 35 -36 95 -37 58 -1 64 1 67 20 5 35 -57 81 -120 89 -52 7 -124 41 -235 112 -50 32 -102 45 -87 22z" ></path> <path d="M1896 1414 c-33 -32 -10 -94 35 -94 23 0 59 34 59 55 0 21 -36 55 -59 55 -11 0 -27 -7 -35 -16z" ></path> <path d="M2036 1404 c-21 -21 -20 -47 2 -67 23 -21 56 -22 76 -1 32 32 8 84 -39 84 -13 0 -31 -7 -39 -16z"></path> <path d="M1462 1360 c-66 -35 -100 -46 -240 -80 -49 -13 -82 -41 -82 -70 0 -18 7 -20 60 -20 37 0 74 7 93 17 58 30 267 173 267 183 0 16 -21 10 -98 -30z" ></path> <path d="M2350 1357 c0 -16 53 -64 212 -190 54 -43 105 -89 114 -103 9 -13 20 -58 24 -98 7 -76 22 -107 73 -154 19 -18 56 -30 147 -48 68 -14 137 -24 154 -22 28 3 31 7 33 38 2 19 8 65 14 101 14 82 8 109 -37 158 -52 58 -112 82 -226 91 -92 7 -103 11 -200 62 -90 48 -213 119 -285 166 -20 13 -23 12 -23 -1z" ></path> <path d="M1518 1277 c-193 -126 -227 -142 -312 -139 -84 2 -146 -23 -213 -87 -48 -46 -56 -79 -51 -201 l3 -75 99 -9 c121 -10 158 0 217 58 51 50 58 69 52 129 -9 76 7 98 171 234 149 124 176 149 176 165 0 15 -16 7 -142 -75z" ></path> <path d="M2276 1321 c-9 -13 56 -139 102 -199 18 -24 47 -70 64 -102 33 -63 67 -87 129 -92 l34 -3 -2 48 c-2 56 -25 97 -54 97 -35 0 -53 16 -144 122 -124 144 -122 142 -129 129z" ></path> <path d="M1664 1221 c-48 -46 -109 -92 -150 -113 -76 -40 -97 -59 -113 -100 -21 -57 12 -73 88 -42 24 10 51 32 72 62 19 26 69 91 112 145 43 54 77 104 75 112 -2 8 -36 -19 -84 -64z" ></path> <path d="M2180 1281 c0 -30 46 -152 112 -296 72 -155 78 -186 49 -243 -28 -55 -26 -98 7 -162 40 -79 64 -93 180 -101 53 -4 116 -11 138 -14 23 -4 44 -3 47 1 3 5 12 61 22 125 15 103 15 120 2 150 -41 94 -112 149 -194 149 -41 0 -58 5 -83 27 -38 31 -160 202 -222 308 -44 76 -58 90 -58 56z" ></path> <path d="M1986 1208 c-3 -29 -8 -120 -11 -203 -7 -166 -21 -299 -36 -328 -9 -15 -18 -17 -67 -11 -49 5 -61 3 -85 -16 -36 -28 -60 -78 -82 -167 -17 -71 -17 -73 4 -116 17 -34 33 -50 77 -73 59 -31 108 -73 162 -142 18 -23 41 -42 50 -42 10 0 40 17 68 38 27 20 89 66 137 101 67 49 89 72 96 97 17 63 -9 198 -50 256 -19 26 -68 49 -99 46 -32 -3 -48 3 -54 17 -7 18 -72 444 -81 533 -4 34 -11 62 -15 62 -5 0 -11 -24 -14 -52z" ></path> <path d="M1755 1144 c-164 -224 -207 -264 -281 -264 -26 0 -53 -8 -75 -23 -44 -30 -106 -112 -113 -151 -5 -32 25 -231 38 -243 4 -4 60 -6 124 -4 134 3 135 4 203 105 45 67 49 101 19 176 -11 28 -20 61 -20 73 0 12 43 108 96 213 53 105 94 199 93 209 -3 13 -28 -15 -84 -91z" ></path> <path d="M1904 1239 c-6 -8 -25 -57 -43 -109 -34 -96 -79 -194 -112 -242 -35 -48 -20 -158 21 -158 29 0 77 27 90 49 5 11 10 52 10 92 0 40 12 132 26 205 26 137 29 190 8 163z" ></path> <path d="M2094 1233 c3 -10 15 -70 27 -133 23 -124 27 -204 15 -261 -8 -34 -5 -40 34 -83 23 -25 48 -46 56 -46 13 0 74 98 74 118 0 6 -11 21 -24 34 -16 14 -46 79 -80 171 -31 82 -63 164 -72 183 -17 35 -39 48 -30 17z" ></path> </symbol> <pattern id="saree_pattern_img" width="37.7" height="22.9" x="15" y="11" patternUnits="userSpaceOnUse" > <use href="#saree_img" width="37.7" height="22.9" fill="white"/> </pattern> <rect class="path_saree" x="10" y="10" width="1200" height="500" stroke="black" style="fill: rgb(25, 36, 112);"></rect> <rect class="path_saree" x="10" y="10" width="1200" height="500" fill="url(#saree_pattern_img)"></rect> </svg>

In order to increase the space between the flowers you can change the width and the height of the pattern. Try for example width="50" height="50".

In the next demo you can use the sliders to change the width and the height of the pattern.

 w.addEventListener("input", ()=>{saree_pattern_img.setAttribute("width",w.value)}) h.addEventListener("input", ()=>{saree_pattern_img.setAttribute("height",h.value)})

 <p>width:<input type="range" id="w" min="37.7" max="200" value="50" /></p> <p>height:<input type="range" id="h" min="22.9" max="200" value="50" /></p> <svg class="saree-top saree" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 1220 500" preserveAspectRatio="xMidYMid meet"> <symbol id="saree_img" viewBox="150 110 3770 2290"> <path d="M2865 2381 c-44 -10 -90 -23 -102 -29 -49 -27 -55 -80 -18 -160 37 -80 34 -113 -17 -166 -30 -30 -62 -50 -106 -66 -54 -20 -61 -25 -45 -34 26 -15 132 -10 176 8 20 9 62 39 92 66 40 36 69 53 112 65 90 25 121 42 139 76 20 40 16 62 -35 172 l-41 87 -37 -1 c-21 -1 -74 -9 -118 -18z"></path> <path d="M992 2351 c-18 -11 -52 -133 -52 -183 0 -49 44 -100 102 -117 24 -8 57 -18 75 -23 18 -5 66 -36 107 -69 83 -66 118 -81 156 -67 l25 10 -25 10 c-93 37 -117 59 -127 121 -4 27 2 51 27 101 l32 66 -25 54 c-31 67 -56 81 -162 89 -44 3 -89 9 -100 12 -11 3 -26 1 -33 -4z"></path> <path d="M3175 2136 c-35 -15 -90 -74 -112 -121 -15 -30 -14 -37 1 -75 l16 -42 -28 -26 c-49 -46 -135 -82 -246 -104 -58 -12 -106 -25 -106 -29 0 -15 150 -10 220 6 36 9 106 32 155 53 85 35 96 37 207 38 110 1 120 3 158 28 53 35 67 64 52 113 -6 21 -14 64 -18 96 -4 32 -10 60 -14 62 -5 3 -64 7 -132 10 -88 3 -132 0 -153 -9z"></path> <path d="M557 2123 c-4 -3 -7 -14 -7 -23 0 -9 -11 -38 -25 -64 -14 -26 -25 -58 -25 -71 0 -31 43 -81 93 -107 36 -18 51 -19 141 -13 90 6 106 4 151 -15 28 -12 91 -33 140 -46 155 -43 432 -42 438 1 1 6 -52 12 -133 16 -142 6 -206 22 -314 76 -80 40 -88 50 -80 101 6 41 4 46 -32 84 -57 59 -85 68 -222 68 -65 0 -122 -3 -125 -7z"></path> <path d="M1933 2102 c-56 -31 -78 -69 -78 -139 0 -72 19 -105 81 -140 72 -42 153 -22 205 50 54 74 33 180 -43 227 -41 25 -121 26 -165 2z"></path> <path d="M1017 1974 c-8 -8 2 -35 22 -58 31 -36 205 -96 242 -84 13 4 -114 105 -169 134 -27 14 -84 19 -95 8z"></path> <path d="M2930 1949 c-14 -6 -41 -25 -60 -44 -20 -19 -65 -46 -100 -61 -84 -34 -94 -44 -43 -44 47 0 220 54 246 77 10 9 17 30 17 50 0 36 -13 41 -60 22z"></path> <path d="M1734 1876 l-39 -33 20 -38 c28 -52 90 -112 150 -143 44 -24 61 -27 150 -27 89 0 105 3 151 27 51 27 127 102 147 146 9 20 5 28 -28 62 -22 22 -46 40 -55 40 -8 0 -26 -20 -39 -44 -13 -25 -40 -57 -61 -71 -102 -71 -216 -46 -296 65 -20 27 -41 50 -48 50 -7 0 -30 -15 -52 -34z"></path> <path d="M3524 1811 c-26 -12 -57 -40 -85 -77 -25 -33 -64 -69 -86 -82 -121 -67 -410 -70 -627 -6 -105 30 -50 -12 65 -50 85 -29 186 -41 404 -52 l149 -7 46 -47 c39 -40 55 -50 104 -60 32 -7 96 -10 141 -8 77 3 86 5 122 36 21 18 66 54 100 80 40 30 62 54 63 68 0 32 -175 199 -225 213 -59 16 -124 13 -171 -8z"></path> <path d="M1611 1784 c-27 -34 -27 -41 7 -95 54 -83 156 -160 255 -191 104 -32 246 -19 355 34 90 43 221 192 206 233 -4 8 -15 20 -25 25 -37 20 -58 11 -99 -45 -48 -65 -113 -115 -182 -140 -73 -26 -195 -18 -268 19 -59 29 -138 101 -171 154 -25 39 -51 41 -78 6z"></path> <path d="M365 1768 c-11 -7 -64 -45 -117 -85 -119 -90 -123 -103 -47 -163 29 -22 64 -58 80 -79 34 -47 96 -71 186 -71 97 0 152 28 198 101 l23 36 134 7 c206 11 392 46 516 97 84 35 59 55 -29 23 -256 -90 -590 -60 -656 61 -33 61 -87 85 -187 85 -45 0 -90 -6 -101 -12z"></path> <path d="M782 1768 c-19 -19 -15 -32 23 -71 32 -33 40 -36 93 -36 31 0 118 -3 192 -6 112 -5 147 -3 204 12 87 23 104 48 24 36 -83 -12 -258 -9 -315 5 -33 9 -60 24 -77 43 -23 25 -33 29 -79 29 -29 0 -58 -5 -65 -12z"></path> <path d="M3150 1736 c-41 -22 -62 -24 -239 -29 -106 -3 -195 -8 -198 -11 -6 -6 1 -9 62 -26 47 -13 396 -26 447 -16 35 6 88 46 88 65 0 9 -83 41 -104 41 -6 -1 -31 -11 -56 -24z"></path> <path d="M1470 1730 c-24 -24 -24 -29 -4 -58 22 -31 69 -30 90 3 15 23 15 27 0 50 -20 31 -58 33 -86 5z"></path> <path d="M2482 1729 c-30 -11 -39 -54 -17 -79 25 -28 61 -25 81 5 30 47 -10 94 -64 74z"></path> <path d="M1532 1610 c-16 -27 -15 -41 7 -67 24 -29 42 -29 69 0 28 29 28 41 0 67 -28 25 -60 26 -76 0z"></path> <path d="M2400 1591 c-16 -31 -12 -49 15 -67 21 -14 31 -15 50 -6 24 11 30 27 25 62 -5 34 -73 42 -90 11z"></path> <path d="M2647 1581 c35 -29 166 -80 270 -106 51 -13 113 -31 137 -40 49 -19 99 -15 132 10 19 15 19 15 0 30 -20 15 -53 22 -257 54 -75 12 -169 32 -209 46 -87 30 -103 31 -73 6z"></path> <path d="M1325 1535 c-149 -55 -227 -71 -276 -56 -38 11 -45 10 -96 -15 -47 -23 -53 -28 -41 -41 35 -34 82 -28 277 36 103 35 206 73 227 86 55 34 20 30 -91 -10z"></path> <path d="M1639 1521 c-20 -16 -22 -23 -14 -47 6 -18 21 -33 39 -39 24 -8 31 -6 47 14 22 27 24 41 7 63 -21 27 -53 30 -79 9z"></path> <path d="M2580 1525 c26 -31 190 -131 307 -187 68 -32 127 -67 133 -78 5 -10 10 -34 10 -53 0 -42 41 -87 115 -124 l49 -26 121 18 c66 10 127 21 135 26 9 4 20 36 28 76 7 37 15 80 19 95 11 56 -3 78 -75 111 -86 39 -154 42 -232 8 -44 -19 -65 -22 -110 -18 -87 10 -293 73 -396 122 -99 48 -125 55 -104 30z"></path> <path d="M2306 1509 c-31 -25 -33 -49 -5 -74 19 -19 21 -19 55 0 37 20 42 39 18 73 -19 27 -34 28 -68 1z"></path> <path d="M1403 1465 c-87 -40 -264 -93 -354 -106 -80 -12 -91 -11 -165 10 l-79 23 -65 -22 c-107 -36 -126 -52 -170 -145 -42 -88 -49 -125 -27 -144 16 -13 123 -31 223 -38 64 -5 76 -2 130 25 71 36 79 44 93 97 6 22 16 49 24 58 7 10 111 69 232 131 120 62 221 118 223 125 5 16 -7 14 -65 -14z"></path> <path d="M1762 1437 c-29 -30 -28 -53 3 -73 48 -31 98 12 73 64 -17 35 -48 39 -76 9z"></path> <path d="M2181 1436 c-28 -30 -24 -57 12 -74 24 -12 31 -11 53 2 31 21 30 37 -2 70 -33 32 -35 32 -63 2z"></path> <path d="M2486 1429 c3 -6 61 -47 128 -90 66 -44 135 -96 152 -116 30 -34 35 -36 95 -37 58 -1 64 1 67 20 5 35 -57 81 -120 89 -52 7 -124 41 -235 112 -50 32 -102 45 -87 22z"></path> <path d="M1896 1414 c-33 -32 -10 -94 35 -94 23 0 59 34 59 55 0 21 -36 55 -59 55 -11 0 -27 -7 -35 -16z"></path> <path d="M2036 1404 c-21 -21 -20 -47 2 -67 23 -21 56 -22 76 -1 32 32 8 84 -39 84 -13 0 -31 -7 -39 -16z"></path> <path d="M1462 1360 c-66 -35 -100 -46 -240 -80 -49 -13 -82 -41 -82 -70 0 -18 7 -20 60 -20 37 0 74 7 93 17 58 30 267 173 267 183 0 16 -21 10 -98 -30z"></path> <path d="M2350 1357 c0 -16 53 -64 212 -190 54 -43 105 -89 114 -103 9 -13 20 -58 24 -98 7 -76 22 -107 73 -154 19 -18 56 -30 147 -48 68 -14 137 -24 154 -22 28 3 31 7 33 38 2 19 8 65 14 101 14 82 8 109 -37 158 -52 58 -112 82 -226 91 -92 7 -103 11 -200 62 -90 48 -213 119 -285 166 -20 13 -23 12 -23 -1z"></path> <path d="M1518 1277 c-193 -126 -227 -142 -312 -139 -84 2 -146 -23 -213 -87 -48 -46 -56 -79 -51 -201 l3 -75 99 -9 c121 -10 158 0 217 58 51 50 58 69 52 129 -9 76 7 98 171 234 149 124 176 149 176 165 0 15 -16 7 -142 -75z"></path> <path d="M2276 1321 c-9 -13 56 -139 102 -199 18 -24 47 -70 64 -102 33 -63 67 -87 129 -92 l34 -3 -2 48 c-2 56 -25 97 -54 97 -35 0 -53 16 -144 122 -124 144 -122 142 -129 129z"></path> <path d="M1664 1221 c-48 -46 -109 -92 -150 -113 -76 -40 -97 -59 -113 -100 -21 -57 12 -73 88 -42 24 10 51 32 72 62 19 26 69 91 112 145 43 54 77 104 75 112 -2 8 -36 -19 -84 -64z"></path> <path d="M2180 1281 c0 -30 46 -152 112 -296 72 -155 78 -186 49 -243 -28 -55 -26 -98 7 -162 40 -79 64 -93 180 -101 53 -4 116 -11 138 -14 23 -4 44 -3 47 1 3 5 12 61 22 125 15 103 15 120 2 150 -41 94 -112 149 -194 149 -41 0 -58 5 -83 27 -38 31 -160 202 -222 308 -44 76 -58 90 -58 56z"></path> <path d="M1986 1208 c-3 -29 -8 -120 -11 -203 -7 -166 -21 -299 -36 -328 -9 -15 -18 -17 -67 -11 -49 5 -61 3 -85 -16 -36 -28 -60 -78 -82 -167 -17 -71 -17 -73 4 -116 17 -34 33 -50 77 -73 59 -31 108 -73 162 -142 18 -23 41 -42 50 -42 10 0 40 17 68 38 27 20 89 66 137 101 67 49 89 72 96 97 17 63 -9 198 -50 256 -19 26 -68 49 -99 46 -32 -3 -48 3 -54 17 -7 18 -72 444 -81 533 -4 34 -11 62 -15 62 -5 0 -11 -24 -14 -52z"></path> <path d="M1755 1144 c-164 -224 -207 -264 -281 -264 -26 0 -53 -8 -75 -23 -44 -30 -106 -112 -113 -151 -5 -32 25 -231 38 -243 4 -4 60 -6 124 -4 134 3 135 4 203 105 45 67 49 101 19 176 -11 28 -20 61 -20 73 0 12 43 108 96 213 53 105 94 199 93 209 -3 13 -28 -15 -84 -91z"></path> <path d="M1904 1239 c-6 -8 -25 -57 -43 -109 -34 -96 -79 -194 -112 -242 -35 -48 -20 -158 21 -158 29 0 77 27 90 49 5 11 10 52 10 92 0 40 12 132 26 205 26 137 29 190 8 163z"></path> <path d="M2094 1233 c3 -10 15 -70 27 -133 23 -124 27 -204 15 -261 -8 -34 -5 -40 34 -83 23 -25 48 -46 56 -46 13 0 74 98 74 118 0 6 -11 21 -24 34 -16 14 -46 79 -80 171 -31 82 -63 164 -72 183 -17 35 -39 48 -30 17z"></path> </symbol> <pattern id="saree_pattern_img" width="50" height="50" x="15" y="11" patternUnits="userSpaceOnUse"> <use href="#saree_img" width="37.7" height="22.9" fill="white" /> </pattern> <rect class="path_saree" x="10" y="10" width="1200" height="500" stroke="black" style="fill: rgb(25, 36, 112);"></rect> <rect class="path_saree" x="10" y="10" width="1200" height="500" fill="url(#saree_pattern_img)"></rect> </svg>

Observation: In order to avoid the pattern to begin outside the filled rect and since the symbol's viewBox=" 150 110 3770 2290" the pattern is using ax and ay attributes. x="15" y="11". If this is not important for you you can remove those attributes.