SVG Icon - HTML CSS SVG

HTML CSS examples for SVG:Symbol

  1. HOME
  2. HTML CSS
  3. SVG
  4. Symbol

Description

SVG Icon

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.icon {<!--   w  w w  .ja va 2 s .co  m-->
   display:inline-block;
   width:16px;
   height:16px;
}
a {
   text-decoration:none;
}


      </style> 
 </head> 
 <body> 
  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> 
   <symbol id="icon-home" viewbox="0 0 16 16"> 
    <path d="M16 9.5l-3-3v-4.5h-2v2.5l-3-3-8 8v0.5h2v5h5v-3h2v3h5v-5h2z"></path> 
   </symbol> 
   <symbol id="icon-android" viewbox="0 0 16 16"> 
    <path d="M13.5 5c-0.55 0-1 0.45-1 1v4c0 0.55 0.45 1 1 1s1-0.45 1-1v-4c0-0.55-0.45-1-1-1zM1.5 5c-0.55 0-1 0.45-1 1v4c0 0.55 0.45 1 1 1s1-0.45 1-1v-4c0-0.55-0.45-1-1-1zM3 11.5c0 0.828 0.672 1.5 1.5 1.5h0.5v2c0 0.55 0.45 1 1 1s1-0.45 1-1v-2h1v2c0 0.55 0.45 1 1 1s1-0.45 1-1v-2h0.5c0.828 0 1.5-0.672 1.5-1.5v-5.5h-9v5.5zM9.353 1.398l0.633-1.216c0.032-0.061 0.008-0.137-0.053-0.169s-0.137-0.008-0.169 0.053l-0.642 1.234c-0.503-0.195-1.050-0.301-1.622-0.301s-1.119 0.107-1.622 0.301l-0.642-1.234c-0.032-0.061-0.108-0.085-0.169-0.053s-0.085 0.108-0.053 0.169l0.633 1.216c-1.416 0.641-2.441 1.994-2.619 3.602h8.944c-0.178-1.608-1.203-2.961-2.619-3.602zM5.5 4.225c-0.4 0-0.725-0.325-0.725-0.725s0.325-0.725 0.725-0.725 0.725 0.325 0.725 0.725c-0 0.4-0.325 0.725-0.725 0.725zM9.5 4.225c-0.4 0-0.725-0.325-0.725-0.725s0.325-0.725 0.725-0.725 0.725 0.325 0.725 0.725c0 0.4-0.325 0.725-0.725 0.725z"></path> 
   </symbol> 
  </svg> 
  <div class="home-icon" title="Home"> 
   <a href="/"> 
    <svg class="icon icon-home" viewbox="0 0 16 16"> 
     <use xlink:href="#icon-home"></use> 
    </svg> </a> 
   <a href="/"> 
    <svg class="icon icon-android" viewbox="0 0 16 16"> 
     <use xlink:href="#icon-android"></use> 
    </svg> </a> 
  </div>  
 </body>
</html>

Related Tutorials