I have SVG files structured like
<?xml version='1.0' encoding='UTF-8'?>
<svg
version='1.1'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
width='612pt'
height='792pt'
viewBox='0 -792 612 792'>
<g id='page1'>
<g transform='matrix(1 0 0 -1 0 0)'>
<path d='M142.133416 535.627968 146.46676 535.622034Z'/>
<!-- ... more paths... -->
</g>
</g>
</svg>
I would like to programatically set the background color of the SVG. I'm reading here that adding a background <rect>
is best, but that doesn't do anything. Setting fill
on the <g>
containers works neither:
<?xml version='1.0' encoding='UTF-8'?>
<svg
version='1.1'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
width='612pt'
height='792pt'
viewBox='0 -792 612 792'>
<rect width="100%" height="100%" fill="#ff0000"/>
<g id='page1' fill="#00ff00">
<g transform='matrix(1 0 0 -1 0 0)' fill="#0000ff">
<path d='M142.133416 535.627968 146.46676 535.622034Z'/>
</g>
</g>
</svg>
Any hints?