Css base64 background color

Set Fill Color of SVG Background-image

A quick guide explaining how to change the color of an SVG when it’s used as a CSS background-image.

If you want you can jump to the code, else we can explore how this works together.

SVG Background Color Fill Demo

We’ll start with a live demo, focus, hover, or click on the circle below and the background color will animate.

I’ll let the cat out of the bag.

This is just a normal button with an SVG used as a CSS mask

Instead of changing the fill color of the SVG we change the background-color of the button. But that shouldn’t spoil the fun as it opens up a world of possibilities but we’ll get to that.

Using An SVG As A CSS Mask

We can see our cool smiley SVG below 😎

svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> g stroke-linecap="round" stroke-width="4" stroke="rgb(0, 0, 0)" fill="none" > circle cx="12" cy="12" r="10" /> path d="M7 11 H17" /> g> svg>

What’s amazing about the timeline we live in is that we can pass the SVG to the CSS url() function without base64 encoding it or escaping all kinds of characters.

1. Prefix the SVG with data:image/svg+xml,
2. Add some structure by ending a line with \
3. Just like that a readable SVG has appeared in our CSS.

Allright, let’s first assign the SVG to the background property so we can see it, we’ll turn it into a mask in a couple minutes.

button  /* . Other styles */ /* Color */ background-color: Crimson; /* Store the SVG in a variable so it's easy to re-use */ --svg: url('data:image/svg+xml,\  '); /* Assign the SVG variable */ background-image: var(--svg); > button:hover, button:focus  background-color: Turquoise; > button:active  background-color: Gold; >

We can interact with the live demo below to see the SVG has loaded and the styles are correctly applied.

Now it’s time to remove the background property and assign the —svg variable to the mask property.

The black parts of the SVG will be the visible parts of the element and the transparent parts will become invisible.

button  /* . Other styles */ /* Chrome, still requires prefix in 2022 */ -webkit-mask: var(--svg); /* Firefox and Safari */ mask: var(--svg); >

If you have trouble getting the mask to work, a handy trick is to temporarily assign the mask to the background-image property.

This allows us to visually see where the black and transparent parts of your mask are, this becomes especially useful when building more complex masks.

Any Background Goes

Because we’re masking the button we can use any background style or effect we can think of.

The Complete SVG Background-image Style Code Snippet

You can find the copy button on the right hand side of the code snippet, enjoy!

button type="button">I'm a cool circle buttonbutton> style> button  /* Base styles */ display: block; width: 4rem; height: 4rem; border: none; cursor: pointer; /* Hide button caption text */ overflow: hidden; color: transparent; /* The fill animation */ background-color: Crimson; transition: background-color 0.2s; /* Store the SVG in a variable so it's easy to use */ --svg: url('data:image/svg+xml,\  '); /* Chrome, still requires prefix in 2022 */ -webkit-mask: var(--svg); /* Firefox and Safari */ mask: var(--svg); > button:hover, button:focus  background-color: Turquoise; > button:active  background-color: Gold; > style>

Conclusion

We learned a nice trick where we used the CSS mask property to change the fill color of a SVG when it’s used as a background-image

On top of that we learned that the mask property is identical to the background property so we can switch them out to make debugging the mask image easier.

I share web dev tips on Twitter, if you found this interesting and want to learn more, follow me there

At PQINA I design and build highly polished web components.

Make sure to check out FilePond a free file upload component, and Pintura an image editor that works on every device.

Источник

A look Into: Using Encoded Image In CSS (background-image)

As designers, adding background image via CSS is definetely a no-brainer to you. Traditionally, or typically, here’s how we do it – using background-image property and link directly to the image source file.

However, each image url that we add in that way will cause the browsers to run more requests. In other words, if we have 10 different urls, the browser require 10 HTTP requests for images.

There are few workarounds for this – we either adopt CSS Image Sprite approach or we can use Encoded Image.

Encoded Image

The encoded image consists of some random characters and it looks like the following.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDUxRjY0ODgyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDUxRjY0ODkyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENTFGNjQ4NjJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENTFGNjQ4NzJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB/CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg==

We are able to embed this encoded image in element and also through the background-image property.

Since, it is directly embedded on the document and does not point out to other sources, the browser doesn’t need to load HTTP requests to deliver the output.

How codes look like in HTML

 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDUxRjY0ODgyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDUxRjY0ODkyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENTFGNjQ4NjJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENTFGNjQ4NzJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB/CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg==);

How to Convert Images to Code Format

There are many online tools to convert images into code, but one of my prefered of choice is Duri.me. It’s a simple tool. Simply drag and drop your image, then we can copy the output as image, CSS or plain code.

Downsides

However, every technique as its own downsides and using encoded images is no exception. Some of the drawbacks of encoded images are:

• Maintainability: This is somewhat the hardest part when using encoded image. We need to pass through more technical steps than using just the actual image itself.
• Browser Support: This encoded image is not supported in Internet Explorer 6 and 7. But, Internet Explorer 9 should be just fine.
• Internet Explorer 8: Regarding Internet Explorer 8, it limits the code size to 32768 Bytes only.

How to Apply

Here is an example to show you how to apply this. This time, we are going to create noise texture. This screenshot below shows how it looks like.

1. Create Noise with Transparency

First, we need a noise texture in PNG format with transparency. Fortunately, there is a handy tool to create it easil,y called NoisePNG. We are able to set the output dimension, the noise intensity and the image opacity.

In this case, I have set the background color to #333333 , then lower the Opacity to 50 and lastly turning the image texture to Monochrome. Download the image.

2. Convert Noise to Code

Now, let’s go to Duri.me. Drag and drop the downloaded PNG image above, and then select «copy code as CSS».

3. Add Code in CSS

Lastly, place the code in the stylesheet, like so:

To compare, we have also attached the PNG image with CSS in another document. Then, if we load it in the browser and see the request log, you will see that the one that uses encoded image has less HTTP requests than the document that points out to the image source directly.

Now, you can see the demo and download the source from the below links. Thanks for reading, I hope you find this tip helpful.

Источник