Convert symbol to single svg icon - HTML CSS SVG

HTML CSS examples for SVG:Symbol

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

Description

Convert symbol to single svg icon

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--from www.  ja  v  a 2s  .c o m-->
 <body> 
  <svg xmlns="http://www.w3.org/2000/svg" style="width:500px; height:500px;"> 
   <g viewbox="0 0 500 500" id="test-icon"> 
    <title>test</title> 
    <ellipse class="background" id="test-background" fill="#fff" cx="248.8" cy="251.4" rx="246.2" ry="244.8" /> 
    <path class="test-frame" d="M249.4 18C121.1 18 16.8 122.3 16.8 250.6S121.3 483 249.4 483 482 378.8 482 250.5 377.7 18 249.4 18m0 480.8c-66 0-128.3-26.4-176.2-73.1C27.6 378.9 1.3 316.5 1.3 249.3s26.3-128.2 73.1-175 109.1-73.1 175-73.1 128.3 26.4 176.2 73.1c46.7 46.8 73.1 109.2 73.1 176.2s-26.4 128.3-73.1 176.2c-46.7 45.6-109 72.1-176.2 72.1" /> 
    <path class="test-figure" d="M133.8 103.5v293h2.5V148.9l-22-22-23.4-23.4H1.8zm17.9 22h108.7v12.4H151.7v-12.4zm0 24.8h108.7v12.4H151.7v-12.4zm192.5 211.8H151.7v-24.7h191.2v24.7h1.3zm0-41.2H151.7v-24.7h191.2v24.7h1.3zm0-42.7H151.7v-24.7h191.2v24.7h1.3zm0-44H151.7v-23.4h191.2v23.4h1.3z" /> 
   </g> 
  </svg>  
 </body>
</html>

Related Tutorials