Repeating an inline svg pattern

How is this done?

Code:

https://jsfiddle.net/p1rwuzf8/1/

This pattern svg when repeated.

Should look like this.

svg {
  background-repeat: repeat;
}

<svg width="42" height="44" viewBox="0 0 42 44" xmlns="http://www.w3.org/2000/svg"><g id="Page-1" fill="none" fill-rule="evenodd"><g id="brick-wall" fill="#000"><path d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/></g></g>

Where did you get the SVG from? Then what environment was it run in? What is supposed to parse the fill rule? The brick isn’t filled with black. I don’t see white mentioned in there. Does it rely on a white background showing through? When HTML got put together with SVG I don’t think the full SVG spec was supported. In HTML5 it’s possible to provide the colors with CSS. If you can’t work out the color in SVG then you may have to use CSS. There are like 5 or 6 ways to include SVG in HTML5. One is inside an image tag. Then you’d use CSS to repeat the image horizontally with an offset every other row. CSS Zen Garden did that a lot with bit maps. I’m concerned that where ever this SVG came from had a parser that understood all the attributes.

  • background-repeat repeats a background image, and in your case you’re trying to apply it to the svg element itself. There is no image there.
  • you can apply a background colour of black to the SVG.
  • you need the stroke colour of the path to be white because that’s what it is in the example image.
  • you need a <defs> element in your svg.
  • nested in that you need a <pattern> element which specifies how you want the pattern to repeat. It should be given an ID that you’ll reference.
  • nested in that should be your path.
  • outside the defs element, have a rect that’s the size you want, apply the pattern to it using the ID of the pattern.

The structure of the above:

<svg>
  <defs>
    <pattern id="myPattern">
      <path stroke="white"/>
    </pattern>
  </defs>
  <rect fill="url(#myPattern)" />
</svg>
1 Like