0

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?

Nico Schlömer
  • 53,797
  • 27
  • 201
  • 249

0 Answers0