Repeating an SVG, is this possible?

[asasass]

This is how it’s done for images, how is it done for SVG’s?
background-repeat: repeat;

Edit fiddle - JSFiddle - Code Playground

<svg width="170" height="170" viewBox="0 0 170 170">
  <rect x="0" y="0" width="204" height="204" fill="red" />
  <rect x="5" y="5" width="160" height="160" fill="black" />
  <rect x="10" y="10" width="150" height="150" fill="green" />
  <rect x="15" y="15" width="140" height="140" fill="red" />
  <rect x="20" y="20" width="130" height="130" fill="black" />
  <rect x="25" y="25" width="120" height="120" fill="blue" />
  <rect x="30" y="30" width="110" height="110" fill="orange" />
  <rect x="35" y="35" width="100" height="100" fill="black" />
  <rect x="40" y="40" width="90" height="90" fill="yellow" />
  <rect x="45" y="45" width="80" height="80" fill="pink" />
  <rect x="50" y="50" width="70" height="70" fill="#1155cc" />
  <rect x="55" y="55" width="60" height="60" fill="teal" />
  <rect x="60" y="60" width="50" height="50" fill="purple" />
  <rect x="65" y="65" width="40" height="40" fill="red" />
  <rect x="70" y="70" width="30" height="30" fill="orange" />
  <rect x="75" y="75" width="20" height="20" fill="black" />
  <rect x="80" y="80" width="10" height="10" fill="#38761d" />
</svg>

[praneybehl]

Could you please try and add more details of what you are trying to do and what the issue is?

[asasass]

I just wanted to know if it were possible to have an svg repeat itself like how you would do it with an image.

[coothead]

Hi there asasass,

check out the attachment to see the method.

asasassSvgTest.zip (1.7 KB)

coothead

[coothead]

 
 
…or if you want a repeating background, check out version 2…

asasassSvgTestVer2.zip (1.7 KB)

coothead

[praneybehl]

@asasass, Yes its possible. You can use an svg image as the background url:

background-image: url('../path/to/your/svg.file');

in the css, it should work fine.

Hope it helps.