#css #html

One of the reasons I like SVG images more than their pixel-based variants is their flexibility.

Since SVG is based on XML, you can embed them straight into your HTML:

 1<!DOCTYPE html>
 2<html lang="en">
 3
 4<head>
 5
 6    <meta charset="UTF-8" />
 7    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8
 9</head>
10
11<body>
12
13    <p>
14        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
15            <path d="M11.585 5.267c1.834 0 3.558.811 4.824
16            2.08v.004c0-.609.41-1.068.979-1.068h.145c.891 0
17            1.073.842 1.073 1.109l.005 9.475c-.063.621.64.941
18            1.029.543 1.521-1.564
19            3.342-8.038-.946-11.79-3.996-3.497-9.357-2.921-12.209-.955-3.031 2.091-4.971
20            6.718-3.086 11.064 2.054 4.74 7.931 6.152 11.424
21            4.744 1.769-.715 2.586 1.676.749 2.457-2.776
22            1.184-10.502 1.064-14.11-5.188C-.977 13.521-.847
23            6.093 5.62 2.245 10.567-.698 17.09.117 21.022
24            4.224c4.111 4.294 3.872 12.334-.139 15.461-1.816
25            1.42-4.516.037-4.498-2.031l-.019-.678c-1.265
26            1.256-2.948 1.988-4.782 1.988-3.625 0-6.813-3.189-6.813-6.812
27            0-3.659 3.189-6.885 6.814-6.885zm4.561
28            6.623c-.137-2.653-2.106-4.249-4.484-4.249h-.09c-2.745
29            0-4.268 2.159-4.268 4.61 0 2.747 1.842 4.481 4.256
30            4.481 2.693 0 4.464-1.973 4.592-4.306l-.006-.536z"/>
31        </svg>
32        <br/>
33        Email me
34    </p>
35
36</body>
37
38</html>

This avoids an extra request to get the SVG image but also adds another big advantage: you can apply CSS to them.

By default, the SVG is colored black, but imagine we want to have it in red along with the text.

One option might be to change the color in the SVG itself, but that's not very flexible.

It would be much easier if we could make it follow the color of the text.

To do this, we can play around with some CSS. Let's start with defining some CSS classes:

1.reset {
2    fill: currentColor;
3}
4
5.color-red {
6    color: red;
7}

The trick is the fill which we have set to currentColor. It allows us to cascade the color to all the sub-elements to which you apply this. So, if we change the HTML to:

 1<!DOCTYPE html>
 2
 3<html lang="en">
 4<head>
 5
 6    <meta charset="UTF-8" />
 7    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8
 9    <style>
10        .reset {
11            fill: currentColor;
12        }
13        .color-red {
14            color: red;
15        }
16    </style>
17
18</head>
19
20<body class="reset">
21
22    <p class="color-red">
23        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
24            <path d="M11.585 5.267c1.834 0 3.558.811 4.824
25            2.08v.004c0-.609.41-1.068.979-1.068h.145c.891 0
26            1.073.842 1.073 1.109l.005 9.475c-.063.621.64.941
27            1.029.543 1.521-1.564
28            3.342-8.038-.946-11.79-3.996-3.497-9.357-2.921-12.209-.955-3.031 2.091-4.971
29            6.718-3.086 11.064 2.054 4.74 7.931 6.152 11.424
30            4.744 1.769-.715 2.586 1.676.749 2.457-2.776
31            1.184-10.502 1.064-14.11-5.188C-.977 13.521-.847
32            6.093 5.62 2.245 10.567-.698 17.09.117 21.022
33            4.224c4.111 4.294 3.872 12.334-.139 15.461-1.816
34            1.42-4.516.037-4.498-2.031l-.019-.678c-1.265
35            1.256-2.948 1.988-4.782 1.988-3.625 0-6.813-3.189-6.813-6.812
36            0-3.659 3.189-6.885 6.814-6.885zm4.561
37            6.623c-.137-2.653-2.106-4.249-4.484-4.249h-.09c-2.745
38            0-4.268 2.159-4.268 4.61 0 2.747 1.842 4.481 4.256
39            4.481 2.693 0 4.464-1.973 4.592-4.306l-.006-.536z"/>
40        </svg>
41        <br/>
42        Email me
43    </p>
44
45</body>

The first class, reset basically applies the fill setting to all elements. I added this class to the body tag to ensure that any SVG I place follows this rule.

Then, I applied the class color-red to the paragraph tag to make the text and the SVG show up in the correct color.

It might sound like magic, but the following quote from here explains it very clearly:

In CSS3, you can use this value to indicate you want to use the value of color for other properties that accept a color value: borders, box shadows, outlines, or backgrounds.

Nowadays, every major browser supports this.

One additional trick, before you paste in the SVG code, run it through this optimizer to get it as small and clean as possible.