I am attempting to utilize an svg for a new website background pattern that I'm developing. I came across one that I like and I am trying to customize it for my use.
The SVG I downloaded looks like this:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="199" viewBox="0 0 100 199"><g fill="#000"><path d="M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z"></path></g></svg>
When I set the background image like this:
.my-div {
background-image: url("mysvg-black.svg")
}
It works perfectly, but it's in black color. To change the color, I opened Photoshop, customized the SVG, and exported it. The updated SVG now looks like this:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="417" height="829" viewBox="0 0 417 829">
<image width="417" height="829" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaEAAAM9CAYAAAA1k8zTAAATG0lEQVR4nO3dzZEjSXaFUTSN4oxQQ1EoCSlUCzCaDI3VVdVZWQkgftz9Pnc/Z4kNAsDiswsgI...
However, when I try setting the background image to the red SVG like this:
.my-div {
background-image: url("mysvg-red.svg")
}
Nothing seems to show up on the background. It appears that the SVG exported from Photoshop contains more tags than the originally downloaded one.
If anyone can assist me with this issue, I would greatly appreciate it!
Thank you!