Use HTML5 CSS & SVG To Draw

Simply copy & paste into your html editor and then view in your browser.

Googles chrome definitely supports everything here, as yet untested on the new IE9.

You can read my blog to see my opinions on it all.

blueflux.eu

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	width:861px;
	height:133px;
	z-index:1;
}
#Layer2 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:2;
	left: 71px;
	top: 2px;
}
-->
</style>
</head>

<body>
<div id="Layer2">
  <title>Layer 2</title>
  <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <!--gradient for main radio panel-->
  <radialGradient fy="0.64063" fx="0.51953" r="0.57959" cy="0.39063" cx="0.51953" id="svg_45">
   <stop stop-color="#ffffff" offset="0"/>
   <stop stop-color="#000000" offset="1"/>
  </radialGradient>
  <!--gradient for drop down panel-->
  <linearGradient y2="0.99219" x2="0.45703" y1="0.01172" x1="0.48438" id="svg_118">
   <stop stop-color="#fffcfc" offset="0"/>
   <stop stop-color="#020202" offset="1"/>
  </linearGradient>
  <!--gradient for display orange backlight-->
  <linearGradient y2="0.10938" x2="0.55078" y1="0.96094" x1="0.51563" id="svg_121">
   <stop stop-color="#ff7f00" offset="0"/>
   <stop stop-color="#000000" offset="1"/>
  </linearGradient>
 </defs>
 <g>
 <!-- drop down panel-->
  <rect id="svg_116" height="31" width="420.99999" y="268" x="108.00002" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#020202" fill="url(#svg_118)"/>
  <!--main radio panel-->
  <path id="svg_17" d="m38.36671,205l559.63738,0c50.27472,0.86185 51.59778,74.94226 0,73.99365l-559.63738,0c-46.30569,-1.37958 -46.30569,-73.73528 0,-73.99365z" stroke-linecap="null" stroke-linejoin="null" stroke="#ff7f00" fill="url(#svg_45)"/>
  <!--radio display orange backlight-->
  <path id="svg_2" d="m107.99999,237c140.66666,0 281.33335,0 422.00001,0c0,11.66667 0,23.33334 0,35c-140.66666,0 -281.33334,0 -422.00001,0l0,-35z" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#fcfcfc" fill="url(#svg_121)"/>
  <!--top line of main panel-->
  <line id="svg_52" y2="207" x2="598" y1="207" x1="34" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="3" stroke="#ffffff" fill="none"/>
  <!--bottom line of main panel-->
  <line id="svg_53" y2="277" x2="598" y1="277" x1="34" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="3" stroke="#ffffff" fill="none"/>
  <!--left hand circle plain-->
  <circle id="svg_56" r="22.5899" cy="241.5" cx="58" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#ffffff" fill="none"/>
  <!--right hand circle plain-->
  <circle id="svg_57" r="22.5899" cy="242.5" cx="576" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#ffffff" fill="none"/>
  <!--right hand orange circle-->
  <circle id="svg_58" r="9.0899" cy="224" cx="88" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#ffffff" fill="#7f3f00"/>
  <!--right hand orange circle-->
  <circle id="svg_59" r="9.0899" cy="223" cx="548" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#ffffff" fill="#7f3f00"/>
  <!--text-->
  <text id="svg_70" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="14" y="295" x="311" stroke-width="0" stroke="#ffffff" fill="#ffffff">SVG Radio</text>
   <!--button background-->
  <rect id="svg_71" height="22" width="119" y="214" x="110" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" stroke="#000000" fill="#ff7f00"/>
   <!--button text-->
  <text xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="16" id="svg_3" y="230" x="169" stroke-width="0" stroke="#000000" fill="#020202">HTML5</text>
  <!--button background-->
  <rect id="svg_72" height="22" width="119" y="214" x="261" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" stroke="#000000" fill="#ff7f00"/>
   <!--button text-->
  <text id="svg_9" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="16" y="230" x="320" stroke-width="0" stroke="#000000" fill="#020202">CSS3</text>
  <!--button background-->
  <rect id="svg_73" height="22" width="119" y="214" x="409" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" stroke="#000000" fill="#ff7f00"/>
  <!--button text-->
  <text id="svg_11" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="16" y="230" x="469" stroke-width="0" stroke="#000000" fill="#020202">HOME</text>
<!--left hand dial dash stroke-->
  <circle id="svg_76" r="19.0899" cy="241.5" cx="58" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="5,5" stroke-width="2" stroke="#ffffff" fill="none"/>
  <!--right hand circle dash stroke-->
  <circle id="svg_77" r="19.0899" cy="242.5" cx="576" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="5,5" stroke-width="2" stroke="#ffffff" fill="none"/>
  <!--orange graphic equaliser bars-->
  <rect id="svg_95" height="29" width="15" y="242" x="120" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_96" height="23" width="15" y="248" x="139" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_97" height="23" width="15" y="248" x="158" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_98" height="24" width="15" y="247" x="177" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_99" height="29" width="15" y="242" x="196" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_100" height="19" width="15" y="252" x="215" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_101" height="23" width="15" y="248" x="234" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_102" height="29" width="15" y="242" x="253" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_103" height="29" width="15" y="242" x="272" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_104" height="9" width="15" y="262" x="291" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_105" height="22" width="15" y="249" x="310" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_106" height="27" width="15" y="244" x="329" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_107" height="17" width="15" y="254" x="348" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_108" height="26" width="15" y="245" x="367" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
</div>
</body>
</html>

Articles

Use HTML5 CSS & SVG To Draw