Make an image displayed with SVG element to cover the entire width and height - HTML CSS SVG

HTML CSS examples for SVG:Image

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

Description

Make an image displayed with SVG element to cover the entire width and height

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">

svg {<!--from   w ww.  ja  v a  2s .  c  om-->
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}


      </style> 
 </head> 
 <body> 
  <svg class="blur" viewbox="0 0 4288 2848" preserveaspectratio="xMidYMid slice"> 
   <filter id="filter"> 
    <fegaussianblur stdDeviation="5" /> 
   </filter> 
   <image xlink:href="https://www.java2s.com/style/demo/Firefox.png" filter="url(#filter)" width="4288" height="2848"></image> 
  </svg>  
 </body>
</html>

Related Tutorials