Can someone tell me what <g> and </g> in an svg? - svg

I have this svg. Can someone tell me what all the and are there for and can the be removed?
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 490.034 490.034" style="enable-background:new 0 0 490.034 490.034;" xml:space="preserve">
<g>
<g>
<path d="M435.667,54.311c-7-7.1-18.4-7-25.5,0l-64,64c-79.3-36-163.9-27.2-244.6,25.5c-60.1,39.2-96.6,88.5-98.1,90.6
c-4.8,6.6-4.6,15.6,0.5,22c34.2,42,70,74.7,106.6,97.5l-56.3,56.3c-7,7-7,18.4,0,25.5c3.5,3.5,8.1,5.3,12.7,5.3s9.2-1.8,12.7-5.3
l356-355.9C442.667,72.811,442.667,61.411,435.667,54.311z M200.467,264.011c-2.6-5.9-3.9-12.3-3.9-19c0-12.9,5-25.1,14.2-34.3
c14.4-14.4,35.7-17.8,53.3-10.3L200.467,264.011z M290.667,173.911c-32.7-21-76.8-17.2-105.3,11.3c-16,16-24.7,37.2-24.7,59.7
c0,16.4,4.7,32.1,13.4,45.6l-37.1,37.1c-32.5-18.8-64.5-46.6-95.6-82.9c13.3-15.6,41.4-45.7,79.9-70.8
c66.6-43.4,132.9-52.8,197.5-28.1L290.667,173.911z"/>
</g>
</g>
<g>
<g>
<path d="M486.067,233.611c-24.7-30.4-50.3-56-76.3-76.3c-7.9-6.1-19.2-4.7-25.4,3.1c-6.1,7.8-4.7,19.1,3.1,25.3
c20.6,16.1,41.2,36.1,61.2,59.5c-11.8,13.8-34.8,38.6-66,61.3c-60.1,43.7-120.8,59.5-180.3,46.9c-9.7-2.1-19.3,4.2-21.3,13.9
c-2.1,9.7,4.2,19.3,13.9,21.3c15.5,3.3,31.1,4.9,46.8,4.9c23.6,0,47.4-3.7,71.1-11.1c31.1-9.7,62-25.7,91.9-47.5
c50.4-36.9,80.5-77.6,81.8-79.3C491.367,249.011,491.167,240.011,486.067,233.611z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>


As Andrew Morton has hinted in the comments, the g element is a container element, to group together other elements and apply the same attributes to all child elements.
In your code snippet, it looks like the SVG was generated/exported using Adobe Illustrator, which might explain all the empty <g> elements, which can safely be removed. In fact, all the <g> elements in your code seem redundant, and the same output is produced without them:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490.034 490.034" style="enable-background:new 0 0 490.034 490.034;" xml:space="preserve">
<path d="M435.667,54.311c-7-7.1-18.4-7-25.5,0l-64,64c-79.3-36-163.9-27.2-244.6,25.5c-60.1,39.2-96.6,88.5-98.1,90.6
c-4.8,6.6-4.6,15.6,0.5,22c34.2,42,70,74.7,106.6,97.5l-56.3,56.3c-7,7-7,18.4,0,25.5c3.5,3.5,8.1,5.3,12.7,5.3s9.2-1.8,12.7-5.3
l356-355.9C442.667,72.811,442.667,61.411,435.667,54.311z M200.467,264.011c-2.6-5.9-3.9-12.3-3.9-19c0-12.9,5-25.1,14.2-34.3
c14.4-14.4,35.7-17.8,53.3-10.3L200.467,264.011z M290.667,173.911c-32.7-21-76.8-17.2-105.3,11.3c-16,16-24.7,37.2-24.7,59.7
c0,16.4,4.7,32.1,13.4,45.6l-37.1,37.1c-32.5-18.8-64.5-46.6-95.6-82.9c13.3-15.6,41.4-45.7,79.9-70.8
c66.6-43.4,132.9-52.8,197.5-28.1L290.667,173.911z"/>
<path d="M486.067,233.611c-24.7-30.4-50.3-56-76.3-76.3c-7.9-6.1-19.2-4.7-25.4,3.1c-6.1,7.8-4.7,19.1,3.1,25.3
c20.6,16.1,41.2,36.1,61.2,59.5c-11.8,13.8-34.8,38.6-66,61.3c-60.1,43.7-120.8,59.5-180.3,46.9c-9.7-2.1-19.3,4.2-21.3,13.9
c-2.1,9.7,4.2,19.3,13.9,21.3c15.5,3.3,31.1,4.9,46.8,4.9c23.6,0,47.4-3.7,71.1-11.1c31.1-9.7,62-25.7,91.9-47.5
c50.4-36.9,80.5-77.6,81.8-79.3C491.367,249.011,491.167,240.011,486.067,233.611z"/>
</svg>

Related

svg overlaps through other svgs - how to make SVG not being transparent?

I use this SVG in the animation but you can see other SVG in the background through this car, is it because it is transparent?
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g transform="translate(1 1)">
<g>
<g>
<path d="M101.4,314.733c-9.387,0-17.067,7.68-17.067,17.067s7.68,17.067,17.067,17.067c9.387,0,17.067-7.68,17.067-17.067
S110.787,314.733,101.4,314.733z"/>
<path d="M408.6,314.733c-9.387,0-17.067,7.68-17.067,17.067s7.68,17.067,17.067,17.067s17.067-7.68,17.067-17.067
S417.987,314.733,408.6,314.733z"/>
<path d="M297.667,255H255c-5.12,0-8.533,3.413-8.533,8.533s3.413,8.533,8.533,8.533h34.133v8.533c0,5.12,3.413,8.533,8.533,8.533
s8.533-3.413,8.533-8.533v-17.067C306.2,258.413,302.787,255,297.667,255z"/>
<path d="M483.693,212.333H403.48l-91.307-91.307c-3.413-3.413-8.533-3.413-11.947,0s-3.413,8.533,0,11.947l79.36,79.36h-81.92
v-25.6c0-5.12-3.413-8.533-8.533-8.533s-8.533,3.413-8.533,8.533v25.6h-59.733v-25.6c0-5.12-3.413-8.533-8.533-8.533
c-5.12,0-8.533,3.413-8.533,8.533v25.6h-59.733V178.2c0-14.507-11.093-25.6-25.6-25.6s-25.6,11.093-25.6,25.6v34.133h-66.56
C10.947,212.333-1,224.28-1,239.64v73.387c0,15.36,11.947,27.307,27.307,27.307h15.963c4.075,29.155,28.753,51.2,59.131,51.2
c30.378,0,55.056-22.045,59.131-51.2h188.938c4.075,29.155,28.753,51.2,59.131,51.2s55.056-22.045,59.131-51.2h15.963
c15.36,0,27.307-11.947,27.307-27.307V239.64C511,224.28,499.053,212.333,483.693,212.333z M109.933,178.2
c0-5.12,3.413-8.533,8.533-8.533S127,173.08,127,178.2v34.133h-17.067V178.2z M101.4,374.467
c-23.893,0-42.667-18.773-42.667-42.667c0-23.893,18.773-42.667,42.667-42.667c23.893,0,42.667,18.773,42.667,42.667
C144.067,355.693,125.293,374.467,101.4,374.467z M408.6,374.467c-23.893,0-42.667-18.773-42.667-42.667
c0-23.893,18.773-42.667,42.667-42.667c23.893,0,42.667,18.773,42.667,42.667C451.267,355.693,432.493,374.467,408.6,374.467z
M483.693,323.267h-15.963c-4.075-29.155-28.753-51.2-59.131-51.2c-0.138,0-0.274,0.009-0.412,0.01
c-0.148-0.001-0.294-0.01-0.441-0.01c-29.867,0-54.613,22.187-58.88,51.2H160.531c-3.821-27.339-25.761-48.416-53.528-50.936
c-0.203-0.019-0.409-0.029-0.613-0.046c-0.699-0.056-1.397-0.114-2.103-0.147c-0.957-0.046-1.919-0.072-2.887-0.072
s-1.93,0.026-2.887,0.072c-0.706,0.033-1.404,0.09-2.103,0.147c-0.204,0.017-0.41,0.027-0.613,0.046
c-27.767,2.52-49.707,23.597-53.528,50.936H26.307c-5.973,0-10.24-4.267-10.24-10.24V280.6h25.6c5.12,0,8.533-3.413,8.533-8.533
s-3.413-8.533-8.533-8.533h-25.6V239.64c0-5.973,4.267-10.24,10.24-10.24h66.56v0h51.2v0h68.265c0,0,0.001,0,0.001,0
s0.001,0,0.001,0h76.797c0,0,0.001,0,0.001,0s0.001,0,0.001,0h110.93c0,0,0.001,0,0.001,0s0.001,0,0.001,0h83.625
c5.973,0,10.24,4.267,10.24,10.24v23.893h-25.6c-5.12,0-8.533,3.413-8.533,8.533s3.413,8.533,8.533,8.533h25.6v32.427
C493.933,319,489.667,323.267,483.693,323.267z"/>
</g>
</g>
</g>
</svg>
https://www.svgrepo.com/svg/180002/car-transport
If I set the background color, the whole SVG will be in color, not just the car....
this is mind-boggling to me, what to do?

You have to duplicate the part of the path that draws the outside shape and draw it first as an underlay with a fill of white & a fill-rule: non-zero.
svg {
background: grey;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" >
<g transform="translate(1 1)">
<g stroke="none" stroke-width="5">
<path fill="white" fill-rule="nonzero" d="M109.933,178.2
c0-5.12,3.413-8.533,8.533-8.533S127,173.08,127,178.2v34.133h-17.067V178.2z M101.4,374.467
c-23.893,0-42.667-18.773-42.667-42.667c0-23.893,18.773-42.667,42.667-42.667c23.893,0,42.667,18.773,42.667,42.667
C144.067,355.693,125.293,374.467,101.4,374.467z M408.6,374.467c-23.893,0-42.667-18.773-42.667-42.667
c0-23.893,18.773-42.667,42.667-42.667c23.893,0,42.667,18.773,42.667,42.667C451.267,355.693,432.493,374.467,408.6,374.467z
M483.693,323.267h-15.963c-4.075-29.155-28.753-51.2-59.131-51.2c-0.138,0-0.274,0.009-0.412,0.01
c-0.148-0.001-0.294-0.01-0.441-0.01c-29.867,0-54.613,22.187-58.88,51.2H160.531c-3.821-27.339-25.761-48.416-53.528-50.936
c-0.203-0.019-0.409-0.029-0.613-0.046c-0.699-0.056-1.397-0.114-2.103-0.147c-0.957-0.046-1.919-0.072-2.887-0.072
s-1.93,0.026-2.887,0.072c-0.706,0.033-1.404,0.09-2.103,0.147c-0.204,0.017-0.41,0.027-0.613,0.046
c-27.767,2.52-49.707,23.597-53.528,50.936H26.307c-5.973,0-10.24-4.267-10.24-10.24V280.6h25.6c5.12,0,8.533-3.413,8.533-8.533
s-3.413-8.533-8.533-8.533h-25.6V239.64c0-5.973,4.267-10.24,10.24-10.24h66.56v0h51.2v0h68.265c0,0,0.001,0,0.001,0
s0.001,0,0.001,0h76.797c0,0,0.001,0,0.001,0s0.001,0,0.001,0h110.93c0,0,0.001,0,0.001,0s0.001,0,0.001,0h83.625
c5.973,0,10.24,4.267,10.24,10.24v23.893h-25.6c-5.12,0-8.533,3.413-8.533,8.533s3.413,8.533,8.533,8.533h25.6v32.427
C493.933,319,489.667,323.267,483.693,323.267z"/>
</g>
<path d="M101.4,314.733c-9.387,0-17.067,7.68-17.067,17.067s7.68,17.067,17.067,17.067c9.387,0,17.067-7.68,17.067-17.067
S110.787,314.733,101.4,314.733z"/>
<path d="M408.6,314.733c-9.387,0-17.067,7.68-17.067,17.067s7.68,17.067,17.067,17.067s17.067-7.68,17.067-17.067
S417.987,314.733,408.6,314.733z"/>
<path d="M297.667,255H255c-5.12,0-8.533,3.413-8.533,8.533s3.413,8.533,8.533,8.533h34.133v8.533c0,5.12,3.413,8.533,8.533,8.533
s8.533-3.413,8.533-8.533v-17.067C306.2,258.413,302.787,255,297.667,255z"/>
<path d="M483.693,212.333H403.48l-91.307-91.307c-3.413-3.413-8.533-3.413-11.947,0s-3.413,8.533,0,11.947l79.36,79.36h-81.92
v-25.6c0-5.12-3.413-8.533-8.533-8.533s-8.533,3.413-8.533,8.533v25.6h-59.733v-25.6c0-5.12-3.413-8.533-8.533-8.533
c-5.12,0-8.533,3.413-8.533,8.533v25.6h-59.733V178.2c0-14.507-11.093-25.6-25.6-25.6s-25.6,11.093-25.6,25.6v34.133h-66.56
C10.947,212.333-1,224.28-1,239.64v73.387c0,15.36,11.947,27.307,27.307,27.307h15.963c4.075,29.155,28.753,51.2,59.131,51.2
c30.378,0,55.056-22.045,59.131-51.2h188.938c4.075,29.155,28.753,51.2,59.131,51.2s55.056-22.045,59.131-51.2h15.963
c15.36,0,27.307-11.947,27.307-27.307V239.64C511,224.28,499.053,212.333,483.693,212.333z M109.933,178.2
c0-5.12,3.413-8.533,8.533-8.533S127,173.08,127,178.2v34.133h-17.067V178.2z M101.4,374.467
c-23.893,0-42.667-18.773-42.667-42.667c0-23.893,18.773-42.667,42.667-42.667c23.893,0,42.667,18.773,42.667,42.667
C144.067,355.693,125.293,374.467,101.4,374.467z M408.6,374.467c-23.893,0-42.667-18.773-42.667-42.667
c0-23.893,18.773-42.667,42.667-42.667c23.893,0,42.667,18.773,42.667,42.667C451.267,355.693,432.493,374.467,408.6,374.467z
M483.693,323.267h-15.963c-4.075-29.155-28.753-51.2-59.131-51.2c-0.138,0-0.274,0.009-0.412,0.01
c-0.148-0.001-0.294-0.01-0.441-0.01c-29.867,0-54.613,22.187-58.88,51.2H160.531c-3.821-27.339-25.761-48.416-53.528-50.936
c-0.203-0.019-0.409-0.029-0.613-0.046c-0.699-0.056-1.397-0.114-2.103-0.147c-0.957-0.046-1.919-0.072-2.887-0.072
s-1.93,0.026-2.887,0.072c-0.706,0.033-1.404,0.09-2.103,0.147c-0.204,0.017-0.41,0.027-0.613,0.046
c-27.767,2.52-49.707,23.597-53.528,50.936H26.307c-5.973,0-10.24-4.267-10.24-10.24V280.6h25.6c5.12,0,8.533-3.413,8.533-8.533
s-3.413-8.533-8.533-8.533h-25.6V239.64c0-5.973,4.267-10.24,10.24-10.24h66.56v0h51.2v0h68.265c0,0,0.001,0,0.001,0
s0.001,0,0.001,0h76.797c0,0,0.001,0,0.001,0s0.001,0,0.001,0h110.93c0,0,0.001,0,0.001,0s0.001,0,0.001,0h83.625
c5.973,0,10.24,4.267,10.24,10.24v23.893h-25.6c-5.12,0-8.533,3.413-8.533,8.533s3.413,8.533,8.533,8.533h25.6v32.427
C493.933,319,489.667,323.267,483.693,323.267z"/>
</g>
</svg>

Yes that image has no background; as you can see in F12 Developer tools
A background color will fill... the whole background
You can't paint only the car body because the SVG path doesn't allow it
Styling the path:
results in:

What is the purpose of trailing <g> tags at end of an SVG?

I often download icons from a site with tons of SVG files, and it always has a trail of SVGs at the end:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<g>
<g>
<path d="M503.839,395.379l-195.7-338.962C297.257,37.569,277.766,26.315,256,26.315c-21.765,0-41.257,11.254-52.139,30.102
L8.162,395.378c-10.883,18.85-10.883,41.356,0,60.205c10.883,18.849,30.373,30.102,52.139,30.102h391.398
c21.765,0,41.256-11.254,52.14-30.101C514.722,436.734,514.722,414.228,503.839,395.379z M477.861,440.586
c-5.461,9.458-15.241,15.104-26.162,15.104H60.301c-10.922,0-20.702-5.646-26.162-15.104c-5.46-9.458-5.46-20.75,0-30.208
L229.84,71.416c5.46-9.458,15.24-15.104,26.161-15.104c10.92,0,20.701,5.646,26.161,15.104l195.7,338.962
C483.321,419.836,483.321,431.128,477.861,440.586z"/>
</g>
</g>
<g>
<g>
<rect x="241.001" y="176.01" width="29.996" height="149.982"/>
</g>
</g>
<g>
<g>
<path d="M256,355.99c-11.027,0-19.998,8.971-19.998,19.998s8.971,19.998,19.998,19.998c11.026,0,19.998-8.971,19.998-19.998
S267.027,355.99,256,355.99z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
It seems to be benign, but it can be difficult when I need to copy and paste and modify and know where the ending tags are for my tags. I know what tags are for, but I'm not sure why there's so many. What's the purpose of all those tags?

The key thing to note is that SVG Generators are not perfect.
You can see this, not only from the trailing <g> elements but also from observing that some elements are double-nested inside <g> elements, like this:
<g>
<g>
<path />
</g>
</g>
to no obvious advantage.
As a quality-control practice I like to clean up my SVGs - not least for ease of future legibility and editing.
Consequently, faced with the SVG above, I'd edit it down to the following:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
lang="en-US"
viewBox="0 0 512.001 512.001">
<title>My SVG</title>
<path d="M503.839,395.379l 195.7-338.962C297.257,37.569,277.766,26.315,256,26.315c-21.765,0-41.257,11.254-52.139,30.102 L8.162,395.378c-10.883,18.85-10.883,41.356,0,60.205c10.883,18.849,30.373,30.102,52.139,30.102h391.398 c21.765,0,41.256-11.254,52.14-30.101C514.722,436.734,514.722,414.228,503.839,395.379z M477.861,440.586 c-5.461,9.458-15.241,15.104-26.162,15.104H60.301c-10.922,0-20.702-5.646-26.162-15.104c-5.46-9.458-5.46-20.75,0-30.208 L229.84,71.416c5.46-9.458,15.24-15.104,26.161-15.104c10.92,0,20.701,5.646,26.161,15.104l195.7,338.962 C483.321,419.836,483.321,431.128,477.861,440.586z" />
<rect x="241.001" y="176.01" width="29.996" height="149.982" />
<path d="M256,355.99c 11.027,0-19.998,8.971-19.998,19.998s8.971,19.998,19.998,19.998c11.026,0,19.998-8.971,19.998-19.998 S267.027,355.99,256,355.99z" />
</svg>

Why doesn't SVG tag <symbol> work properly?

I have svg:
<svg _ngcontent-c23="" xmlns="http://www.w3.org/2000/svg">
<symbol id="edeb4def-6ea8-3f8a-809d-40ca8ce3bddb" viewBox="0 0 200 200">
<g fill="none" fill-rule="evenodd" id="Chelsea" stroke="none" stroke-width="1" >
<path d="M119,3 L81,3 L81,3.78138753 C81,6.6620789 99.9873181,18 99.9873181,18 C99.9873181,18 119,6.6620789 119,3.78138753 L119,3 Z" fill="#D31818" id="inside-neck"></path>
</g>
</symbol>
</svg>
It doesn't work in my app and online svg viewers (exp1, exp2)
If I change <symbol> tag to <g>, it works.

White Space Around Adobe Illustrator Generated SVG

Thank you in advance for all the help, I have been trying various resources on the web but is still not able to make this work.
I am trying to create a 3D rectangle box using svg. I prepared the graphic in Adobe Illustrator by apply the 3D feature in the software to a regular rectangle shape and finally exported it as a SVG file. While it looks ok on the screen of illustrator, on browser; the object appears to have a small white border around each of its polygon.
The following is the svg code generated by illustrator. You Can see the whitespace around the polygon after running the snippet. I have to remove the whitespace around it.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="965px" height="720.3px" viewBox="0 0 965 720.3" enable-background="new 0 0 965 720.3" xml:space="preserve">
<g id="sections_2_">
<g>
<g enable-background="new ">
<g>
<polygon fill="#836EA6" points="595.6,337.1 596.8,344.9 581.8,357.8 580.6,349.9 "/>
</g>
<g>
<polygon fill="#8670A9" points="532,311.5 595.6,337.1 580.6,349.9 568.3,360.1 "/>
</g>
<g>
<polygon fill="#736092" points="568.3,360.1 569.4,368 533.1,319.3 532,311.5 "/>
</g>
<g>
<polygon fill="#BF4142" points="568.3,360.1 569.4,368 508,340.3 506.9,332.5 "/>
</g>
<g>
<polygon fill="#836EA6" points="580.6,349.9 581.8,357.8 569.4,368 568.3,360.1 "/>
</g>
<g>
<polygon fill="#DE4D4E" points="531.9,311.5 568.3,360.1 506.9,332.5 511.7,328.6 524.8,317.8 "/>
</g>
</g>
</g>
</g>
</svg>
The following image is how it look like on the screen which is the desired look. It has to be a .svg file, so exporting it as jpeg or png is not an option.

That white space is because your SVG viewBox attribute is set to an area much bigger than your design.
You can think of the viewBox in SVG as defining the page size. In Illustrator, that corresponds to what it calls the "Artboard".
Before you save in Illustrator, go to the Artboard settings (where you set the page size) and choose the option "Fit to Artwork Bounds". Now when you save, the viewBox should match the size of your design, and the white space should be gone.

Adjust the viewBox to get rid of the whitespace. I've added a black background rect so the whitespace around the shape is visible but you can remove that.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="400px" height="200.3px" viewBox="502 307 98 63" enable-background="new 0 0 965 720.3" xml:space="preserve" overflow="hidden">
<rect x="502" y="307" width="98" height="63"/>
<g id="sections_2_">
<g>
<g enable-background="new ">
<g>
<polygon fill="#836EA6" points="595.6,337.1 596.8,344.9 581.8,357.8 580.6,349.9 "/>
</g>
<g>
<polygon fill="#8670A9" points="532,311.5 595.6,337.1 580.6,349.9 568.3,360.1 "/>
</g>
<g>
<polygon fill="#736092" points="568.3,360.1 569.4,368 533.1,319.3 532,311.5 "/>
</g>
<g>
<polygon fill="#BF4142" points="568.3,360.1 569.4,368 508,340.3 506.9,332.5 "/>
</g>
<g>
<polygon fill="#836EA6" points="580.6,349.9 581.8,357.8 569.4,368 568.3,360.1 "/>
</g>
<g>
<polygon fill="#DE4D4E" points="531.9,311.5 568.3,360.1 506.9,332.5 511.7,328.6 524.8,317.8 "/>
</g>
</g>
</g>
</g>
</svg>

Define color of all paths in an SVG only once

Assume I have an SVG that contains multiple paths, i.e. more than one.
Now, usually when I want to define any other color than black for these paths, I'll have to add the attribute fill to each path, thus:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="626px" height="626px" viewBox="0 0 626 626" enable-background="new 0 0 626 626" xml:space="preserve">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#AAAAAA" d="M294,0c12.667,0,25.333,0,38,0c88.112,7.338,153.67,43.67,202,92
c48.323,48.323,84.693,113.876,92,202c0,12.667,0,25.333,0,38c-7.359,88.111-43.662,153.662-92,202
c-48.322,48.322-113.885,84.687-202,92c-12.667,0-25.333,0-38,0c-88.111-7.318-153.68-43.68-202-92
C43.668,485.668,7.337,420.11,0,332c0-12.667,0-25.333,0-38c6.457-85.974,43.913-153.913,92-202
C141.708,42.292,207.806,7.179,294,0z M194,88c-28.938,15.035-51.978,34.886-71,56c-38.683,42.939-69.556,103.898-63,189
c5.873,76.241,38.505,127.85,84,169c42.815,38.728,105.77,70.049,188,64c76.057-5.595,129.564-38.535,170-83
c39.96-43.942,69.723-105.461,64-188c-5.418-78.137-39.625-130.29-83-170c-42.661-39.056-105.909-71.144-189-65
C256.167,62.797,221.973,73.467,194,88z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#AAAAAA" d="M190,158c4.239-0.794,13.672-0.847,18,1c32.859,14.024,33.146,82.464,10,105
c-12.193,11.871-33.895,12.294-46-1C146.459,234.952,153.117,164.914,190,158z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#AAAAAA" d="M425,158c58.484-10.422,56.673,116.826,5,116
C380.189,273.204,378.901,166.215,425,158z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#AAAAAA" d="M118,315c52.16,27.927,115.198,51,196,51c74.84,0,142.62-22.48,194-51
c-9.593,93.905-69.282,171.673-156,190c-20.939,4.426-55.349,4.787-78,0c-86.549-18.291-143.611-93.224-156-187
C118,317,118,316,118,315z"/>
</g>
</svg>
Is there a way to define the fill color for all paths of an SVG, or for all paths in a group in an SVG, only once?
Sort of like:
<g fill="#AAAAAA">
...
</g>
I cannot use CSS.

Yes, like this http://jsfiddle.net/link2twenty/162y90L9
but you need to remove it from every other line or it will overwrite it.
<svg fill="darkgreen" version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="626px" height="626px" viewBox="0 0 626 626" enable-background="new 0 0 626 626" xml:space="preserve">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M294,0c12.667,0,25.333,0,38,0c88.112,7.338,153.67,43.67,202,92
c48.323,48.323,84.693,113.876,92,202c0,12.667,0,25.333,0,38c-7.359,88.111-43.662,153.662-92,202
c-48.322,48.322-113.885,84.687-202,92c-12.667,0-25.333,0-38,0c-88.111-7.318-153.68-43.68-202-92
C43.668,485.668,7.337,420.11,0,332c0-12.667,0-25.333,0-38c6.457-85.974,43.913-153.913,92-202
C141.708,42.292,207.806,7.179,294,0z M194,88c-28.938,15.035-51.978,34.886-71,56c-38.683,42.939-69.556,103.898-63,189
c5.873,76.241,38.505,127.85,84,169c42.815,38.728,105.77,70.049,188,64c76.057-5.595,129.564-38.535,170-83
c39.96-43.942,69.723-105.461,64-188c-5.418-78.137-39.625-130.29-83-170c-42.661-39.056-105.909-71.144-189-65
C256.167,62.797,221.973,73.467,194,88z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M190,158c4.239-0.794,13.672-0.847,18,1c32.859,14.024,33.146,82.464,10,105
c-12.193,11.871-33.895,12.294-46-1C146.459,234.952,153.117,164.914,190,158z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M425,158c58.484-10.422,56.673,116.826,5,116
C380.189,273.204,378.901,166.215,425,158z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M118,315c52.16,27.927,115.198,51,196,51c74.84,0,142.62-22.48,194-51
c-9.593,93.905-69.282,171.673-156,190c-20.939,4.426-55.349,4.787-78,0c-86.549-18.291-143.611-93.224-156-187
C118,317,118,316,118,315z" />
</g>
</svg>

Resources