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:
As you continue to learn about basic SVG usage, I'm going to continue to tease new concepts in authoring SVG itself. The next features I'm going to introduce you to will be the definitions (defs) section, the gradient element, and the rect element.
The following example shows the source of the SVG element in the previous example. Everything beyond the root svg element itself is different to the previous example.
First up, there's the defs element. defs is an organizational element designed to hold definitions of graphical objects to be used later in the document. We immediately meet the linearGradient element, which defines (you guessed it!) a linear gradient. x1, x2, y1, and y2 define the gradient vector of the gradient. You'll learn more about that in Chapter 2, Working with SVG and CSS, but for now, just know that it defines the direction of the gradients. The default is 0 at the left and 1 to the right. Setting x2 to 0 and y2 to 1 changes the angle from a horizontal left-to-right gradient to a vertical top-to-bottom gradient.
The look of the gradient is actually defined as child stop elements. Each has two attributes, offset and stop-color. The offset accepts either a percentage or a number between 0 and 1, representing the placement of the gradient stop on the totality of the gradient vector. This example is the simplest: one color at 0% and another at 100%. stop-color accepts any valid color value:
<svg width="10" height="40" viewBox="0 0 10 40" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="#999999"/> <stop offset="100%" stop-color="#000000"/> </linearGradient> </defs> <rect x="0" y="0" width="10" height="40" fill="url(#gradient)"/> </svg>
As these are just instructions on how to render the gradient, it's possible to stretch and shift the background image in this case with zero loss of fidelity. The browser will just calculate new values and render a new, perfect gradient.
The following example shows a tweak to the CSS that stretches the header to be half of the height of the browser (using the vh unit) and forces the header background image to fill the available space (background: size: contain):
<!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: 50vh;
text-align: center;
background-size: contain;
}
</style>
</head>
<body>
<div class="header"><h1>CSS!</h1></div>
</body>
</html>As you can see in the following screenshot, the same background image handles the resizing with flying colors. This is true (as you'll learn) for anything else you can do with SVG.
