A Guide on Effectively Using CSS Background Image SVGs

Posted on by Colvin Robert
A team of programmers talking about an algorithm running on a laptop screen

Scalable Vector Graphics (SVGs) are increasingly popular in modern web design due to their scalability and resolution independence. Integrating SVGs as background images using pure CSS is entirely feasible and a useful skill to add to your web development repertoire. To achieve this, you’ll need to translate your SVG code into a Data URL string.

Let’s consider a practical example to explain the process step by step.

Imagine you have the initial SVG code like so:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
  <g>
    <g>
      <g>
        <path d="M213.333,106.667c-58.88,0-106.667,47.787-106.667,106.667S154.453,320,213.333,320S320,272.213,320,213.333     S272.213,106.667,213.333,106.667z" fill="gold"/>
        <path d="M213.333,0C95.467,0,0,95.467,0,213.333s95.467,213.333,213.333,213.333S426.667,331.2,426.667,213.333     S331.2,0,213.333,0z M213.333,384c-94.293,0-170.667-76.373-170.667-170.667S119.04,42.667,213.333,42.667     S384,119.04,384,213.333S307.627,384,213.333,384z" fill="gold"/>
      </g>
    </g>
  </g>
</svg>

In order to convert this SVG code into a Data URL string, you can use online tools such as URL-encoders for SVG. The resulting encoded SVG string would look something like this:

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 426.667 426.667' style='enable-background:new 0 0 426.667 426.667;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M213.333,106.667c-58.88,0-106.667,47.787-106.667,106.667S154.453,320,213.333,320S320,272.213,320,213.333 S272.213,106.667,213.333,106.667z' fill='gold'/%3E%3Cpath d='M213.333,0C95.467,0,0,95.467,0,213.333s95.467,213.333,213.333,213.333S426.667,331.2,426.667,213.333 S331.2,0,213.333,0z M213.333,384c-94.293,0-170.667-76.373-170.667-170.667S119.04,42.667,213.333,42.667 S384,119.04,384,213.333S307.627,384,213.333,384z' fill='gold'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E

Now, once we’ve translated the SVG code into an encoded string, it can be set as a background property in CSS.

If we have an HTML div element like:

<div class="svg-background"></div>

It can be styled using the following CSS:

.svg-background {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 426.667 426.667' style='enable-background:new 0 0 426.667 426.667;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M213.333,106.667c-58.88,0-106.667,47.787-106.667,106.667S154.453,320,213.333,320S320,272.213,320,213.333 S272.213,106.667,213.333,106.667z' fill='gold'/%3E%3Cpath d='M213.333,0C95.467,0,0,95.467,0,213.333s95.467,213.333,213.333,213.333S426.667,331.2,426.667,213.333 S331.2,0,213.333,0z M213.333,384c-94.293,0-170.667-76.373-170.667-170.667S119.04,42.667,213.333,42.667 S384,119.04,384,213.333S307.627,384,213.333,384z' fill='gold'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

This way, the div will have the SVG image as its background.

Integrating SVG as background images in CSS can seem complex at first, but once you understand the process and practice a few times, it becomes a breeze. You’ll discover the method’s versatility and how it can contribute to creating engaging, interactive, and responsive designs. Keep experimenting and perfecting your skills – the world of web design awaits your creativity.

Practical Applications Embedding an SVG in CSS for background images is quite handy when CSS can be edited, but HTML cannot. This is a frequent scenario for those working on WordPress sites.

Lists

Custom Symbols for Lists Imagine a list with default bullet points. Replacing these default bullets with a personalized icon can make the list more attractive. CSS’s list-style-image property comes to the rescue here. This property accepts a URL value, which can be the encoded SVG image.

Here’s a simple HTML list:

<ul>
  <li>Banana</li>
  <li>Apple</li>
  <li>Kiwi</li>
</ul>

The CSS that can be used to introduce SVG images as bullet points is:

li {
  list-style-image: url("data:image/svg+xml, encoded-svg");
}

Hover effects

Hover effects with SVGs SVGs as background images have another delightful feature: they can be manipulated while hovering. The SVG properties can be altered to create various effects. For example, we can change the fill color of the SVG image.

Utilizing the same list element, we can add a hover pseudo-class with a small color alteration. The newly encoded SVG will contain the code with the updated color. Here’s an example:

li:hover {
  list-style-image: url("data:image/svg+xml, updated-encoded-svg");
}

Replace “updated-encoded-svg” with the new encoded SVG string where the fill color has been changed as per your preference.

Inputs and select element

Styling Inputs and Select Elements The SVG-background-image technique is also useful for iconifying inputs and select elements. For instance, to stylize the select tag, the native arrow can be hidden and replaced with an SVG image:

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  
  background-image: url("data:image/svg+xml, encoded-svg");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px;
}

Again, replace “encoded-svg” with the actual encoded SVG string.

Conclusion

In the ever-evolving world of web development, SVG images as background in CSS is an empowering tool. Whether you’re customizing bullet points of a list, adding hover effects, or styling inputs, embedding SVG in CSS offers a plethora of opportunities for making your websites visually appealing and interactive. As a developer, mastering this skill will allow you to enhance user experience significantly. So, keep exploring and implementing this technique in your projects!

Related Posts