Repeating an inline svg pattern - svg

Question

How is this done?
Code:
https://jsfiddle.net/p1rwuzf8/1/
This pattern svg when repeated.
https://i.imgur.com/sTACtMT.png
Should look like this.
https://i.imgur.com/E68BQFo.png
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>

Answer 1

One way of doing this would be using the image as background-image. For this you would need first to encode the svg image, for example using this tool: SVG encoder
div{width:200px;
height:300px;
border:1px solid;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23000'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
<div></div>
An other way of doing it would be using SVG patterns. For this you need to take the group used to draw the "brick" and use it in a pattern like so:
<svg width="200" height="300" viewBox="0 0 200 300">
<defs>
<pattern id="brick" width='42' height='44' patternUnits='userSpaceOnUse'> >
<g id="Page-1" fill="none" fill-rule="evenodd"><g id="brick-wall" fill="#000"><path d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/></g></g>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#brick)"></rect>
</svg>