XML/SVG/Style

Inheriting a SVG style Attribute

   <source lang="xml">

<?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>

</source>
   
  

use style to fill red to a rectangle

   <source lang="xml">

<?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>

</source>
   
  

Using External Stylesheets

   <source lang="xml">

<?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;

}

</source>
   
  

Using style

   <source lang="xml">

<?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>

</source>
   
  

Using SVG Embedded Stylesheets

   <source lang="xml">

<?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>

</source>