Book Image

Responsive Web Design with HTML5 and CSS3, Second Edition

By : Ben Frain
5 (1)
Book Image

Responsive Web Design with HTML5 and CSS3, Second Edition

5 (1)
By: Ben Frain

Overview of this book

Table of Contents (17 chapters)
Responsive Web Design with HTML5 and CSS3 Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Chapter 7. Using SVGs for Resolution Independence

Entire books have, are being, and will be written about SVG (an abbreviation for scalable vector graphics). SVG is an important technology for responsive web design as it provides pin-sharp and future-proof graphical assets for all screen resolutions.

Images on the web, with formats such as JPEG, GIF, or PNG have their visual data saved as set pixels. If you save a graphic in any of those formats with a set width and height, and zoom the image to twice its original size or more, their limitations can be easily exposed.

Here's a screen grab of just that. A PNG image I've zoomed into in the browser:

Can you see how the image looks obviously pixelated? Here is the exact same image saved as a vector image, in SVG format, and zoomed to a similar level:

Hopefully the difference is obvious.

Beyond the smallest graphical assets, where at all possible, using SVG rather than JPEG, GIF, or PNG will produce resolution independent graphics that require far...