Repeating an SVG, is this possible?

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

<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" />

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

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

Hi there asasass,

check out the attachment to see the method. :winky: (1.7 KB)



…or if you want a repeating background, check out version 2… (1.7 KB)



@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. :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.