Using an SVG and Apply CSS for the same svg - HTML CSS SVG

HTML CSS examples for SVG:Symbol

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

Description

Using an SVG and Apply CSS for the same svg

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{<!--   www .j  ava 2s  . c  om-->
   display:inline-block;
   fill:currentColor;
   width:200px;
   height:200px;
}
.Red{
   fill:red;
}
.Blue{
   fill:blue;
}
.I100{
   height:100px;
   width:100px;
}
.I50{
   height:50px;
   width:50px;
}
}


      </style> 
 </head> 
 <body> 
  <div style="height:0;width:0;position:absolute;visibility:hidden;"> 
   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <symbol id="Icon" viewbox="0 0 512 512"> 
     <title>Document</title> 
     <path d="M4.344,2L261.063,466.25c-43.656,43.688-114.7,43.6-158.391,0L57.422,4c-43.672-43.625-43.672-114.75,0-158.375 l2.266-226.25c31.188-31.188,81.938-31.188,113.125,0l45.281,45.25c31.188,31.188,31.188,81.938,0,113.125l-181.031,181 c-31.203,31.25-81.953,31.188-113.141,0c-15.109-15.125-23.438-35.188-23.438-56.563c0.016-21.375,8.344-41.438,23.438-56.563 l181.016-181l22.625,22.625l-181.016,181c-9.047,9.063-14.063,21.125-14.063,33.938s5,24.875,14.063,33.938 c18.719,18.75,49.172,18.75,67.891,0l181.031-181c18.688-18.688,18.688-49.125,0-67.875L374.188,59 c-18.719-18.75-49.156-18.75-67.875,0L80.047,285.25c-31.203,31.25-31.188,81.938,0,113.125l45.25,45.25 c31.203,31.25,81.938,31.25,113.141,0l226.281-226.25L487.344,240z" /> 
    </symbol> 
   </svg> 
  </div> 
  <svg class="Icon"> 
   <use xlink:href="#Icon" /> 
  </svg> 
  <svg class="Icon Red I100"> 
   <use xlink:href="#Icon" /> 
  </svg> 
  <svg class="Icon Blue I50"> 
   <use xlink:href="#Icon" /> 
  </svg>  
 </body>
</html>

Related Tutorials