<?xml version="1.0"?>

 <svg width="1000" height="1000"

      xmlns="http://www.w3.org/2000/svg"

      xmlns:xlink="http://www.w3.org/1999/xlink">

     <style type="text/css">

 	rect.ne {

 	fill:  url(#ne_prechod);

 	stroke: black;

 	}

 	rect.ano {

 	fill: url(#ano_prechod);

 	stroke: black;

 	}

 	a:hover rect.ano, a:hover rect.ne {

 	fill: url(#zvyrazneny_prechod);

 	}

 	a:hover text {

 	fill: green;

 	}

 	line.ramecek {

 	stroke: black;

 	stroke-width: 2;

 	}

 	rect.pozadi {

 	fill: url(#pozadi_prechod);

 	}

 	text {

 	font-size: 12px;

 	font-family: Sans;

 	}

     </style>

     <!-- pozadí – přechod -->

     <defs>

 	<linearGradient id="pozadi_prechod" x1="0%" y1="0%" x2="100%" y2="100%">

 	    <stop offset="20%" style="stop-color:rgb(245,245,255); stop-opacity:0.5"/>

 	    <stop offset="100%" style="stop-color:silver; stop-opacity:0.8"/>

 	</linearGradient>

     </defs>

     <!-- nekuřácký graf – přechod -->

     <defs>

 	<linearGradient id="ne_prechod" x1="0%" y1="0%" x2="100%" y2="100%">

 	    <stop offset="0%" style="stop-color:white; stop-opacity:1"/>

 	    <stop offset="100%" style="stop-color:blue; stop-opacity:1"/>

 	</linearGradient>

     </defs>

     <!-- zvýrazněný graf – přechod -->

     <defs>

 	<linearGradient id="zvyrazneny_prechod" x1="0%" y1="0%" x2="100%" y2="100%">

 	    <stop offset="0%" style="stop-color:white; stop-opacity:1"/>

 	    <stop offset="100%" style="stop-color:green; stop-opacity:1"/>

 	</linearGradient>

     </defs>

     <!-- kuřácký graf – přechod -->

     <defs>

 	<linearGradient id="ano_prechod" x1="0%" y1="0%" x2="100%" y2="100%">

 	    <stop offset="0%" style="stop-color:white; stop-opacity:1"/>

 	    <stop offset="100%" style="stop-color:red; stop-opacity:1"/>

 	</linearGradient>

     </defs>

     <!-- pozadí a linka -->

     <rect x="0" y="0" width="200" height="200" class="pozadi"/>

     <line x1="10" y1="180" x2="190" y2="180" class="ramecek"/>

     <!-- Nadpis grafu -->

     <text x="60" y="20">Mělo by se tu:</text>

     <!-- nekuřáci -->

     <a xlink:href="javascript:alert('To čumíš, co? :-)')" xlink:title="xxx nekouřit">

 	<text x="30" y="195" class="ne">nekouřit</text>

 	<rect x="30" y="30" width="50" height="150" class="ne"/>

     </a>

     <!-- kuřáci -->

     <a xlink:href="javascript:alert('To čumíš, co? :-)')" xlink:title="xxx kouřit">

 	<text x="130" y="195" class="ano">kouřit</text>

 	<rect x="120" y="30" width="50" height="150" class="ano"/>

     </a>

 </svg>