SVG <g> or <symbol>

[FlyFrosty]

I have multiple groups of items which are displayed together.  I want to change the color of these groups without having to change each one by name.  Can I do this with <g> or <symbol>?

For example, if I want to change the outline of my battery and its' head...

    <g id="batShell">
      <rect id="batBody"/>
      <rect id="batHead"/>
    </g>

When I try and do...

batShell.style.fill = "green";

I get an error.   

Should this work (meaning, my error is caused by not completely applying it correctly), or would I be better off using <symbol>, or should I just keep defining each one?

Thanks

[EmTe · Accepted solution]

Use another SVG.

<svg>
  <svg fill="red">
    <line fill="inherit" />
    <line fill="inherit" />
  </svg>
</svg>