CSS || How To Use Inline SVG Image As Background Image Icon Using CSS

Print Friendly, PDF & Email

The following is a module which demonstrates how to use Inline SVG image as Data URL background image icon using CSS.


1. Usage

The example below demonstrates the use of the icon CSS class to display an SVG image as an image icon.

Sample:

Sample


2. Icon CSS

The SVG image used in this example is the following:

Make sure to URL encode your entire SVG, and then simply insert the encoded string as the css background-image.

You can use any online converter to URL encode the SVG string.

The following is the Icon css file.


3. More Examples

Below are more examples demonstrating the use of the ‘Icon‘ css. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

Leave a Reply