color the whole image in SVG - HTML CSS SVG

HTML CSS examples for SVG:Image

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

Description

color the whole image in 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">

.stroked {<!--from  w w  w . j  a va 2 s  . c  om-->
   fill: red;
   stroke: green
}


      </style> 
 </head> 
 <body> 
  <svg width="90px" height="61px" viewbox="0 0 90 61"> 
   <g> 
    <path id="video-svg_3_" fill="#00648F" d="M50.9,61H10.1C4.5,61,0,56.5,0,50.9V10.1C0,4.5,4.5,0,10.1,0h40.8C56.5,0,61,4.5,61,10.1
      v40.8C61,56.5,56.5,61,50.9,61z" /> 
    <path id="video-svg_2_" fill="red" d="M87.5,51.9c-0.5,0-1-0.1-1.4-0.4L69.2,40.1c-0.7-0.5-1.1-1.2-1.1-2V23
      c0-0.8,0.4-1.6,1.1-2L86.1,9.5c0.8-0.5,1.7-0.6,2-0.1c0.8,0.4,1.3,1,1.3,2.2v38c0,0.9-0.5,1.8-1.3,2.2
      C88.3,51.9,87.9,51.9,87.5,5.9z" /> 
   </g> 
  </svg> 
  <svg class="stroked" width="89.5px" height="60.4px" viewbox="0 0 89.5 60.4"> 
   <path stroke-width="5.0282" stroke-miterlimit="10" d="M52.5,57.9H7.9c-3,0-5.4-2.4-5.4-5.4V7.9
   c0-3,2.4-5.4,5.4-5.4h44.6c3,0,5.4,2.4,5.4,5.4v44.6C57.9,55.5,55.5,57.9,52.5,57.9z" /> 
   <polygon stroke-width="5.0282" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
   69.7,35.7 87,46.9 87,12.1 69.7,23.3 " /> 
  </svg>  
 </body>
</html>

Related Tutorials