Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use splash vector graphics on your Responsive Site?
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 −
130 Views
