How to Inline SVG in CSS

In many cases, an inlined SVG feels like a bit of noise in HTML. An icon feels more like styling than content that should be part of the DOM structure. The good news is, we can move SVG images entirely into CSS.

Let’s take the hamburger menu button on this page in the top right corner. In HTML, the button is simply an anchor element with a class.

<a href="/" class="menu"></a>

Then, in CSS, we can set a background-image property. For this CSS property, we usually provide a link to an image, but we can also inline an SVG.

.menu {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background-color: #f0f0f0;

  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 100 100'><path d='M 30 30 L 70 70 M 30 70 L 70 30' stroke='white' stroke-width='10' /></svg>");
}

Some characters need to be escaped when inlining an SVG in CSS’s url function. The # character for instance, becomes %23.

The inlined SVG above is the same hamburger menu icon as we created in the basic paths chapter. The only difference is that we changed its width and height to match the button’s size, and we set the XML namespace.

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="50"
  height="50"
  viewBox="-100 -100 200 200"
>
  <path
    d="
      M -45 -45
      L  45 -45
      M -45   0
      L  45   0
      M -45  45
      L  45  45"
    stroke="black"
    stroke-width="15"
    stroke-linecap="round"
  />
</svg>

When we inline an SVG in CSS, we need to set the XML namespace property. Earlier we inlined SVGs into HTML and in that case it’s optional. In CSS we have to set the xmlns property.

Custom Mouse Cursor with SVG in CSS

Have you ever wondered how to make your website stand out? One way is to set custom mouse cursors. Take a look at this page. Do you notice how the cursor isn’t the usual one? I’ve taken over the custom cursors from figma.com.

Here’s an example of a custom mouse cursor that’s a simple arrow.

<svg width='26' height='31'>
  <path
    d='
      M 3 3
      L 7 26
      L 12 16
      L 23 14
      Z'
    fill='white'
    stroke='black'
    stroke-width='2.5'
  />
</svg>

Then, you can override the value of the default cursor in the following way. Note that changing the default cursor will override all types of cursors on your page.

body {
  cursor: url("data:image/svg+xml,<svg width='26' height='31' xmlns='http://www.w3.org/2000/svg'><path fill='white' stroke='black' stroke-width='2.5' d='M 2.549 2.935 L 6.993 26.043 L 11.646 16.041 L 22.993 14.425 Z' /></svg>"),
    auto;
}

Changing the cursor the above way will override all types of cursors on your page. Be sure to set the cursor back to the initial value for HTML elements that require something else (this list is not comprehensive).

p,
h1,
h2,
input[type="text"] {
  cursor: text;
}

a,
a *,
button,
button * {
  cursor: pointer;
}

Background Patterns with SVG in CSS

We can also use this technique to generate a background pattern. By default if the image we define in background-image is smaller than the element itself, then the image will repeat itself.

In the main example for today we simply repeat the following SVG:

<svg
  xmlns='http://www.w3.org/2000/svg'
  width='50'
  height='50'
  viewBox='0 0 120 120'
>
  <polyline
    fill='none'
    stroke='#0c5c4c'
    stroke-width='42.4'
    points='-30 0 60 90 150 0'
  />
</svg>

In this example we encode some special characters in the inlined string. In the example below we encode the pointy brackets (< and >) and the # key in the color value to make sure it works in every browser. This makes it hard to read, but what we have here is still a simple SVG.

<div class="background" />

.background {
  background-color: #38755b;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 120 120'%3E%3Cpolyline fill='none' stroke='%230c5c4c' stroke-width='42.4' points='-30 0 60 90 150 0' /%3E%3C/svg%3E");
}

You might also note that this SVG image doesn’t even have a background color set. We set that in CSS.

This is a great way to create background patterns with only a few lines of code in CSS. If you like this idea check out svgbackgrounds.com for a lot more great patterns.

How to Inline SVG in CSS

Hamburger Menu Button

Custom Mouse Cursor with SVG in CSS

Background Patterns with SVG in CSS