XML/SVG/Style

Inheriting a SVG style Attribute

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%"
     xmlns="http://www.w3.org/2000/svg">
  <g>
    <g style="fill:red;stroke:blue;stroke-width:4;">
      <rect x="100" y="50"
            width="200" height="100"/>
      <rect x="350" y="50"
            stroke-dasharray="4 4 4 4"
            width="200" height="100"/>
   </g>
  </g>
</svg>

use style to fill red to a rectangle

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" 
 "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> 
<svg width="800" height="400" viewBox="50 25 0 0">
<g> 
  <rect style="fill:red;"
    x="0" y="0" width="100" height="50"/>
  <line x1="0" y1="24" x2="100" y2="24"
        style="stroke:white;stroke-width:2"/>
  <line x1="49" y1="0" x2="49" y2="50"
        style="stroke:white;stroke-width:2"/>
</g>
</svg>

Using External Stylesheets

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
 "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<?xml-stylesheet type="text/css" href="externalStyle1.css" ?>
<svg width="800" height="500">
  <rect x="50"  y="50"  width="200" height="200"/>
  <rect x="100" y="100" width="100" height="100"/>
</svg>

externalStyle1.svg
rect {
  stroke-width:4;
  stroke:blue;
  fill:red;
}

Using style

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="100%" height="100%">
  <g transform="translate(50,50)">
    <rect x="0" y="0" width="150" height="50"
      style="fill:red;stroke-width:4;stroke:blue" />
  </g>
</svg>

Using SVG Embedded Stylesheets

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
 "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="800" height="500">
  <style type="text/css">
    rect { stroke-width:4; stroke:blue; fill:red; }
  </style>
  <rect x="50" y="50" width="200" height="200" />
  <rect x="100" y="100" width="100" height="100" />
</svg>