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:

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

</head>

<body>

    <p>
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.585 5.267c1.834 0 3.558.811 4.824
            2.08v.004c0-.609.41-1.068.979-1.068h.145c.891 0
            1.073.842 1.073 1.109l.005 9.475c-.063.621.64.941
            1.029.543 1.521-1.564
            3.342-8.038-.946-11.79-3.996-3.497-9.357-2.921-12.209-.955-3.031 2.091-4.971
            6.718-3.086 11.064 2.054 4.74 7.931 6.152 11.424
            4.744 1.769-.715 2.586 1.676.749 2.457-2.776
            1.184-10.502 1.064-14.11-5.188C-.977 13.521-.847
            6.093 5.62 2.245 10.567-.698 17.09.117 21.022
            4.224c4.111 4.294 3.872 12.334-.139 15.461-1.816
            1.42-4.516.037-4.498-2.031l-.019-.678c-1.265
            1.256-2.948 1.988-4.782 1.988-3.625 0-6.813-3.189-6.813-6.812
            0-3.659 3.189-6.885 6.814-6.885zm4.561
            6.623c-.137-2.653-2.106-4.249-4.484-4.249h-.09c-2.745
            0-4.268 2.159-4.268 4.61 0 2.747 1.842 4.481 4.256
            4.481 2.693 0 4.464-1.973 4.592-4.306l-.006-.536z"/>
        </svg>
        <br/>
        Email me
    </p>

</body>

</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:

.reset {
    fill: currentColor;
}

.color-red {
    color: red;
}

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:

<!DOCTYPE html>

<html lang="en">
<head>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
        .reset {
            fill: currentColor;
        }
        .color-red {
            color: red;
        }
    </style>

</head>

<body class="reset">

    <p class="color-red">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.585 5.267c1.834 0 3.558.811 4.824
            2.08v.004c0-.609.41-1.068.979-1.068h.145c.891 0
            1.073.842 1.073 1.109l.005 9.475c-.063.621.64.941
            1.029.543 1.521-1.564
            3.342-8.038-.946-11.79-3.996-3.497-9.357-2.921-12.209-.955-3.031 2.091-4.971
            6.718-3.086 11.064 2.054 4.74 7.931 6.152 11.424
            4.744 1.769-.715 2.586 1.676.749 2.457-2.776
            1.184-10.502 1.064-14.11-5.188C-.977 13.521-.847
            6.093 5.62 2.245 10.567-.698 17.09.117 21.022
            4.224c4.111 4.294 3.872 12.334-.139 15.461-1.816
            1.42-4.516.037-4.498-2.031l-.019-.678c-1.265
            1.256-2.948 1.988-4.782 1.988-3.625 0-6.813-3.189-6.813-6.812
            0-3.659 3.189-6.885 6.814-6.885zm4.561
            6.623c-.137-2.653-2.106-4.249-4.484-4.249h-.09c-2.745
            0-4.268 2.159-4.268 4.61 0 2.747 1.842 4.481 4.256
            4.481 2.693 0 4.464-1.973 4.592-4.306l-.006-.536z"/>
        </svg>
        <br/>
        Email me
    </p>

</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.

You might also like:

If this post was enjoyable or useful for you, please share it! If you have comments, questions, or feedback, you can email my personal email. To get new posts, subscribe use the RSS feed.