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
<!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
<!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 −
