A common usage of SVG is as a background image in CSS. There are benefits to this approach in terms of file size and scalability in responsive web design (RWD). In today's multi-device, multi-form factor world, the ability to offer high-quality images at a range of device sizes and resolutions (including high pixel density devices) is an important one. While there are optimized solutions for raster display images (in the form of the picture element and the srcset and sizes attributes) and you can use media queries to present different images or image sizes in CSS, the ability to do one image for all devices is huge. SVG in CSS allows us to do that easily
While you'll learn about the intersection of SVG and CSS in Chapter 5, Working with SVG and CSS, let's take a look at a basic example now to whet your appetite.
The following page has a div tag with a class of header. The only thing to really note here is a reference to an SVG file in the url value of the background property:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mastering SVG- Using SVG images in CSS</title>
<style type="text/css">
.header {
color: #ffffff;
background: url(1-3-gradient.svg) repeat-x;
width: 500px;
height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div class="header"><h1>CSS!</h1></div>
</body>
</html>
This code produces the following when run in a browser. This simple example, which is no different than any other CSS implementation, will scale to the highest points-per-inch display without any loss of smoothness in the gradient. This is achieved simply by using SVG:Â Â
