<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     height="260" width="250">
   <title> Example showing a blue circle with 3D highlighting effect
           and shadow </title>
   <desc> Picture of a blue sphere (circle with 3D highlighting),
          with a blurred shadow
   </desc>
   <style type="text/css"><![CDATA[
      .Border { fill: lightGray; stroke: black; stroke-width: 4; }
      .Label { font-size:18pt; font-family:Arial; fill:black; }
   ]]></style>
   
   <defs>
      <radialGradient id="sphereHighlight" gradientUnits="objectBoundingBox"
       fx="30%" fy="30%">
         <stop offset="0%"   style="stop-color:#FFFFFF"/>
         <stop offset="40%"  style="stop-color:#0000AA"/>
         <stop offset="100%" style="stop-color:#000077"/>
      </radialGradient>

      <circle id="circle" cx="0" cy="0" r="80" />

      <filter id="blurryShadow" filterUnits="userSpaceOnUse"
              x="0" y="0" width="100%" height="100%">
              <feGaussianBlur stdDeviation="8" />
      </filter>
   </defs>

   <g>
      <!-- Show outline of canvas using 'rect' element -->
      <rect class="Border" x="2" y="2" height="256" width="246" />
      
      <!-- Draw shadow element -->
      <use xlink:href="#circle" x="130" y="130"
           style="fill:black" filter="url(#blurryShadow)" />

      <!-- Draw 3D sphere -->
      <use xlink:href="#circle" style="fill:url(#sphereHighlight)"
           x="100" y="100" width="100%" height="100%" />

      <text class="Label" x="20" y="240">Blue Sphere with Shadow</text>
   </g>
</svg>

