How does the bootstrap 4 svg toggle item work?

HTML & CSS
1

I am trying to customise the Bootstrap 4 toggler or hamburger menu item. I have tried googling but really cannot understand it. I understand Bootstrap 4 uses SVG graphics for the icon and has pre-defined classes for dark and light and I have found the following code in bootstrap.css

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

Where is this graphic actually located, it looks like a url but it still works when I am not connected to the internet, where is the graphic actually located and what does the rest of the string do - it seems a very complicated way of using a graphic, what are the benefits if any. This code is really confusing me and I cant even make out what the actual image is called so I could search my hard drive for it.
Cheers guys

2

It is not located anywhere as such because its drawn using co-ordinates that are contained within the markup of the svg (Scalable Vector Graphics) and inserted into a data uri. The strange numbers in the background data url are instructions on how to draw the image shape.

The data uri means that you don’t go to the server to get your data as the raw data of the svg (or indeed an image) is encoded in the string that follows.

It’s very useful for small images like icons to save going to the server. (If you encoded a large image the data to describe it would be enormous and would bloat the css file which is why its generally used for small images like icons etc.)

3

wow! thanks - that’s a whole new learning curve for me !!

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.