How to use splash vector graphics on your Responsive Site?

HTMLWeb DevelopmentFront End Technology

Graphics for your responsive site can make it slower, but balancing it with vector graphics can help in minimizing the bandwidth. Through this, amazing graphics work great on mobile site too. Generally, canvas and SVG is used for this purpose.

Use HTML5 Scalable Vector Graphics (SVG) to create a design for multiple screen sizes, since it handles it perfectly. Easily present vector based line drawings and do not worry about the pixels on your device since the graphics created with SVG are resolution independent. It scales the result and looks great in the browser.

Here, we will look how to work with Vector Background for our responsive site. Right now, we have a demo SVG. Let us see how we can use a vector file. Firstly, we will perform CSS fixed positioning, with width 100%

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo {
            position:fixed;
            top:0;
            left:0;
            width:100%;
            z-index: -1;
         }
      </style>
   </head>
   <body>
      <img src="/html5/src/svg/extensions/imagelib/smiley.svg" id="demo" alt="smiley">
   </body>
</html>

Here, you can see the output. Our SVG file looks great and works fine without distortion even when the browser is repositioned. It’s still not looking blurry and is perfect.

For adding it to the background, we have done the changes above. But, you need to also add opacity, since background images are generally transparent. Let us add it

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: -1;
            opacity: 0.1;
         }
      </style>
   </head>
   <body>
      <img src="https://www.tutorialspoint.com/html5/src/svg/extensions/imagelib/smiley.svg" id="demo" alt="smiley ">
   </body>
</html>

Here, you can see the output. Our SVG file looks great and the opacity is visible to be added as a background image −

raja
Published on 07-Feb-2018 13:04:53
Advertisements