I do not have your HTML or your image, but this is what I know. With the Scalable Vector Graphics (SVG) image, you must add the exact height and width of the image. In your example, you have background-size set at 100%; which will not work. Below is a working example of proper SVG as a horizontal repeating background image. If you'd like to dig deeper, then here is a good article:
Using SVG | CSS-Tricks[
^]
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg/240px-SVG_logo.svg.png");
background-repeat: repeat-x;
background-size: 240px 240px;
}
</style>
</head>
<body>
<p>repeat-x will repeat a background image only horizontally.</p>
</body>
</html>