Earlier, we looked what SVG images are and why they are great for a large class of images that we may want to use in our web apps/sites. In this article, we are going to take a bit of a detour. We are going to look at the variety of ways we have across HTML, CSS, and JavaScript for getting our SVGs to actually display in our browsers. This is going to be a hoot, so grab some soda (or other preferred beverage) and let's go.
Onwards!
In the next many sections, we're going to be looking at wall after wall of markup and code that highlight the variety of ways we have to display SVGs on a web page. The result of all of these approaches will be something that looks as follows:
If you want to follow-along, all you have to do is copy/paste each example into a new HTML document and preview in your browser. That's it. Now, without any further delay, let's get rolling.
The most direct way to use an SVG is by treating it as an image - similar to how we would deal with JPG, PNG, and GIF files. For using it in HTML, we can always rely on our trusty old friend, the img tag:
<!DOCTYPE html>
<html>
<head>
<title>SVGs and the IMG Tag</title>
<style>
.rocketContainer {
background-color: #FFEB3B;
width: 100px;
height: 100px;
display: flex;
align-content: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="rocketContainer">
<img alt="rocket" width=50 src="https://www.kirupa.com/images/rocket.svg" />
</div>
</body>
</html>If we want to display our SVG using CSS, there are a handful of properties that we can use. The most common one is typically background-image:
<!DOCTYPE html>
<html>
<head>
<title>SVGs in CSS</title>
<style>
.rocket {
width: 100px;
height: 100px;
background-image: url(https://www.kirupa.com/images/rocket.svg);
background-color: #FFEB3B;
background-size: 50px;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div class="rocket"></div>
</body>
</html>The other approach for displaying an SVG involves the object tag:
<!DOCTYPE html>
<html>
<head>
<title>SVG files and the Object tag!</title>
<style>
.rocketContainer {
background-color: #FFEB3B;
width: 100px;
height: 100px;
display: flex;
align-content: center;
justify-content: center;
}
.rocketContainer object {
width: 50px;
}
</style>
</head>
<body>
<div class="rocketContainer">
<object type="image/svg+xml"
data="https://www.kirupa.com/images/rocket.svg">
it's a rocketship!
</object>
</div>
</body>
</html>In all of these cases, you should note that the size of the SVG will be whatever dimensions were used when the image was created/saved. This means you could have a really large image or a really small image if you don't explicitly define the size you want. You can define the size using CSS (which is my preferred approach) or by setting the width or height attribute directly in the HTML.
If you've ever looked at what exactly makes up an SVG file (just open one up in your favorite text or code editor), you'll notice that it is a bunch of weird brackets and text that looks similar to HTML content:
There is a reason for this similarity. Both SVG and HTML are XML based. To use this direct / inline representation of an SVG image in our document, all we have to do is copy/paste the entire svg content from a SVG file into the DOM:
<!DOCTYPE html>
<html>
<head>
<title>SVGs Inline in HTML</title>
<style>
.rocketContainer {
background-color: #FFEB3B;
width: 100px;
height: 100px;
display: flex;
align-content: center;
justify-content: center;
}
.rocketContainer svg {
width: 50px;
}
</style>
</head>
<body>
<div class="rocketContainer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#A0041E" d="M1 17l8-7 16 1 1 16-7 8s.001-5.999-6-12-12-6-12-6z" />
<path fill="#FFAC33"
d="M.973 35s-.036-7.979 2.985-11S15 21.187 15 21.187 14.999 29 11.999 32c-3 3-11.026 3-11.026 3z" />
<circle fill="#FFCC4D" cx="8.999" cy="27" r="4" />
<path fill="#55ACEE" d="M35.999 0s-10 0-22 10c-6 5-6 14-4 16s11 2 16-4c10-12 10-22 10-22z" />
<path
d="M26.999 5c-1.623 0-3.013.971-3.641 2.36.502-.227 1.055-.36 1.641-.36 2.209 0 4 1.791 4 4 0 .586-.133 1.139-.359 1.64 1.389-.627 2.359-2.017 2.359-3.64 0-2.209-1.791-4-4-4z" />
<path fill="#A0041E" d="M8 28s0-4 1-5 13.001-10.999 14-10-9.001 13-10.001 14S8 28 8 28z" />
</svg>
</div>
</body>
</html>You can use inline SVGs in CSS as well. There are a few hoops you need to jump through, and you can see those hoops in the following example where we specify the value of our background-image property:
<!DOCTYPE html>
<html>
<head>
<title>SVGs Inline in CSS</title>
<style>
.rocket {
width: 100px;
height: 100px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23A0041E' d='M1 17l8-7 16 1 1 16-7 8s.001-5.999-6-12-12-6-12-6z'/%3E%3Cpath fill='%23FFAC33' d='M.973 35s-.036-7.979 2.985-11S15 21.187 15 21.187 14.999 29 11.999 32c-3 3-11.026 3-11.026 3z'/%3E%3Ccircle fill='%23FFCC4D' cx='8.999' cy='27' r='4'/%3E%3Cpath fill='%2355ACEE' d='M35.999 0s-10 0-22 10c-6 5-6 14-4 16s11 2 16-4c10-12 10-22 10-22z'/%3E%3Cpath d='M26.999 5c-1.623 0-3.013.971-3.641 2.36.502-.227 1.055-.36 1.641-.36 2.209 0 4 1.791 4 4 0 .586-.133 1.139-.359 1.64 1.389-.627 2.359-2.017 2.359-3.64 0-2.209-1.791-4-4-4z'/%3E%3Cpath fill='%23A0041E' d='M8 28s0-4 1-5 13.001-10.999 14-10-9.001 13-10.001 14S8 28 8 28z'/%3E%3C/svg%3E");
background-color: #FFEB3B;
background-size: 50px;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div class="rocket"></div>
</body>
</html>There are three parts to what we need to specify when wishing to use an inline SVG as a CSS property value:
You put all of these together, you get the secret sauce for displaying an inline SVG as part of a CSS property value.
One tricky part is taking the SVG's default markup and url-encoding it to make it work in CSS. The URL-Encoder for SVG page makes that tricky part a breeze, so you should use that page instead of trying to figure this out on your own and manually replacing characters.
What we saw earlier with the inline CSS representation is a little special. It represented our SVG in a common format known as a data URI. The blob of data we provide to the data URI is just multiple variations of our SVG content. One variant is the fully URL encoded version we saw earlier for CSS. We can replicate that for HTML as well:
<!DOCTYPE html>
<html>
<head>
<title>SVGs as Data URIs in HTML</title>
<style>
.rocketContainer {
background-color: #FFEB3B;
width: 100px;
height: 100px;
display: flex;
align-content: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="rocketContainer">
<img alt="rocket"
width=50
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23A0041E' d='M1 17l8-7 16 1 1 16-7 8s.001-5.999-6-12-12-6-12-6z'/%3E%3Cpath fill='%23FFAC33' d='M.973 35s-.036-7.979 2.985-11S15 21.187 15 21.187 14.999 29 11.999 32c-3 3-11.026 3-11.026 3z'/%3E%3Ccircle fill='%23FFCC4D' cx='8.999' cy='27' r='4'/%3E%3Cpath fill='%2355ACEE' d='M35.999 0s-10 0-22 10c-6 5-6 14-4 16s11 2 16-4c10-12 10-22 10-22z'/%3E%3Cpath d='M26.999 5c-1.623 0-3.013.971-3.641 2.36.502-.227 1.055-.36 1.641-.36 2.209 0 4 1.791 4 4 0 .586-.133 1.139-.359 1.64 1.389-.627 2.359-2.017 2.359-3.64 0-2.209-1.791-4-4-4z'/%3E%3Cpath fill='%23A0041E' d='M8 28s0-4 1-5 13.001-10.999 14-10-9.001 13-10.001 14S8 28 8 28z'/%3E%3C/svg%3E" />
</div>
</body>
</html>Another representation is our SVG data in a base64 format. In the url-encoded version, the resulting data looks a little human readable. When you turn any SVG data into a base64 format, what you get looks a bit like the world's most secure password:
The result of turning our normal SVG into a base64 version is just some bizarre letter and number arrangements...that our browser totally knows what to do with. Here is what this looks like in HTML:
<!DOCTYPE html>
<html>
<head>
<title>SVGs as base64 Data URIs in HTML</title>
<style>
.rocketContainer {
background-color: #FFEB3B;
width: 100px;
height: 100px;
display: flex;
align-content: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="rocketContainer">
<img alt="rocket"
width=50
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iI0EwMDQxRSIgZD0iTTEgMTdsOC03IDE2IDEgMSAxNi03IDhzLjAwMS01Ljk5OS02LTEyLTEyLTYtMTItNnoiLz48cGF0aCBmaWxsPSIjRkZBQzMzIiBkPSJNLjk3MyAzNXMtLjAzNi03Ljk3OSAyLjk4NS0xMVMxNSAyMS4xODcgMTUgMjEuMTg3IDE0Ljk5OSAyOSAxMS45OTkgMzJjLTMgMy0xMS4wMjYgMy0xMS4wMjYgM3oiLz48Y2lyY2xlIGZpbGw9IiNGRkNDNEQiIGN4PSI4Ljk5OSIgY3k9IjI3IiByPSI0Ii8+PHBhdGggZmlsbD0iIzU1QUNFRSIgZD0iTTM1Ljk5OSAwcy0xMCAwLTIyIDEwYy02IDUtNiAxNC00IDE2czExIDIgMTYtNGMxMC0xMiAxMC0yMiAxMC0yMnoiLz48cGF0aCBkPSJNMjYuOTk5IDVjLTEuNjIzIDAtMy4wMTMuOTcxLTMuNjQxIDIuMzYuNTAyLS4yMjcgMS4wNTUtLjM2IDEuNjQxLS4zNiAyLjIwOSAwIDQgMS43OTEgNCA0IDAgLjU4Ni0uMTMzIDEuMTM5LS4zNTkgMS42NCAxLjM4OS0uNjI3IDIuMzU5LTIuMDE3IDIuMzU5LTMuNjQgMC0yLjIwOS0xLjc5MS00LTQtNHoiLz48cGF0aCBmaWxsPSIjQTAwNDFFIiBkPSJNOCAyOHMwLTQgMS01IDEzLjAwMS0xMC45OTkgMTQtMTAtOS4wMDEgMTMtMTAuMDAxIDE0UzggMjggOCAyOHoiLz48L3N2Zz4=" />
</div>
</body>
</html>In CSS, here is what you will see when we assign this base64 content to our background-image property:
<!DOCTYPE html>
<html>
<head>
<title>SVGs Inline as Base64 in CSS</title>
<style>
.rocket {
width: 100px;
height: 100px;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iI0EwMDQxRSIgZD0iTTEgMTdsOC03IDE2IDEgMSAxNi03IDhzLjAwMS01Ljk5OS02LTEyLTEyLTYtMTItNnoiLz48cGF0aCBmaWxsPSIjRkZBQzMzIiBkPSJNLjk3MyAzNXMtLjAzNi03Ljk3OSAyLjk4NS0xMVMxNSAyMS4xODcgMTUgMjEuMTg3IDE0Ljk5OSAyOSAxMS45OTkgMzJjLTMgMy0xMS4wMjYgMy0xMS4wMjYgM3oiLz48Y2lyY2xlIGZpbGw9IiNGRkNDNEQiIGN4PSI4Ljk5OSIgY3k9IjI3IiByPSI0Ii8+PHBhdGggZmlsbD0iIzU1QUNFRSIgZD0iTTM1Ljk5OSAwcy0xMCAwLTIyIDEwYy02IDUtNiAxNC00IDE2czExIDIgMTYtNGMxMC0xMiAxMC0yMiAxMC0yMnoiLz48cGF0aCBkPSJNMjYuOTk5IDVjLTEuNjIzIDAtMy4wMTMuOTcxLTMuNjQxIDIuMzYuNTAyLS4yMjcgMS4wNTUtLjM2IDEuNjQxLS4zNiAyLjIwOSAwIDQgMS43OTEgNCA0IDAgLjU4Ni0uMTMzIDEuMTM5LS4zNTkgMS42NCAxLjM4OS0uNjI3IDIuMzU5LTIuMDE3IDIuMzU5LTMuNjQgMC0yLjIwOS0xLjc5MS00LTQtNHoiLz48cGF0aCBmaWxsPSIjQTAwNDFFIiBkPSJNOCAyOHMwLTQgMS01IDEzLjAwMS0xMC45OTkgMTQtMTAtOS4wMDEgMTMtMTAuMDAxIDE0UzggMjggOCAyOHoiLz48L3N2Zz4=");
background-color: #FFEB3B;
background-size: 50px;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div class="rocket"></div>
</body>
</html>We can also assign the base64 version of the SVG to the object tag:
<!DOCTYPE html>
<html>
<head>
<title>SVGs as base64 Data URIs for an Object in HTML</title>
<style>
.rocketContainer {
background-color: #FFEB3B;
width: 100px;
height: 100px;
display: flex;
align-content: center;
justify-content: center;
}
.rocketContainer object {
width: 50px;
}
</style>
</head>
<body>
<div class="rocketContainer">
<object type="image/svg+xml"
data="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iI0EwMDQxRSIgZD0iTTEgMTdsOC03IDE2IDEgMSAxNi03IDhzLjAwMS01Ljk5OS02LTEyLTEyLTYtMTItNnoiLz48cGF0aCBmaWxsPSIjRkZBQzMzIiBkPSJNLjk3MyAzNXMtLjAzNi03Ljk3OSAyLjk4NS0xMVMxNSAyMS4xODcgMTUgMjEuMTg3IDE0Ljk5OSAyOSAxMS45OTkgMzJjLTMgMy0xMS4wMjYgMy0xMS4wMjYgM3oiLz48Y2lyY2xlIGZpbGw9IiNGRkNDNEQiIGN4PSI4Ljk5OSIgY3k9IjI3IiByPSI0Ii8+PHBhdGggZmlsbD0iIzU1QUNFRSIgZD0iTTM1Ljk5OSAwcy0xMCAwLTIyIDEwYy02IDUtNiAxNC00IDE2czExIDIgMTYtNGMxMC0xMiAxMC0yMiAxMC0yMnoiLz48cGF0aCBkPSJNMjYuOTk5IDVjLTEuNjIzIDAtMy4wMTMuOTcxLTMuNjQxIDIuMzYuNTAyLS4yMjcgMS4wNTUtLjM2IDEuNjQxLS4zNiAyLjIwOSAwIDQgMS43OTEgNCA0IDAgLjU4Ni0uMTMzIDEuMTM5LS4zNTkgMS42NCAxLjM4OS0uNjI3IDIuMzU5LTIuMDE3IDIuMzU5LTMuNjQgMC0yLjIwOS0xLjc5MS00LTQtNHoiLz48cGF0aCBmaWxsPSIjQTAwNDFFIiBkPSJNOCAyOHMwLTQgMS01IDEzLjAwMS0xMC45OTkgMTQtMTAtOS4wMDEgMTMtMTAuMDAxIDE0UzggMjggOCAyOHoiLz48L3N2Zz4=">
it's a rocketship!
</object>
</div>
</body>
</html>In the image, css, and object cases, notice how we specify the base64-encoded value. It is the same for every case, so we can generalize this approach as:
"data:image/svg+xml;base64,[base64blob]"Just replace the [base64blob] text with the actual base64-encoded value.
There are more ways beyond base64 and full-on url-encoding to encode our SVG and have it work as part of a data URI. Chris Coyier runs down some of the other flavors.
Now, here is where things get even more interesting. Because of the close relationship between JavaScript and the DOM, all of the approaches we saw earlier can be made to work using code. Whether you are creating the entire HTML element (with the SVG defined) and adding it to the DOM or whether you are just setting values for the src attribute, data attribute, or background-image property individually, some basic DOM manipulation can get the job done. Let's look at what all this would look like across a variety of common scenarios.
First, let's look at the direct case of using JavaScript to load a SVG file into an image element on the page:
<!DOCTYPE html>
<html>
<head>
<title>SVG, Image Source, and JavaScript</title>
<style>
.rocketContainer {
background-color: #FFEB3B;
width: 100px;
height: 100px;
display: flex;
align-content: center;
justify-content: center;
}
.rocketContainer img {
width: 50px;
}
</style>
</head>
<body>
<div class="rocketContainer">
<img/>
</div>
<script>
var imageElement = document.querySelector(".rocketContainer img");
imageElement.src = "https://www.kirupa.com/images/rocket.svg";
</script>
</body>
</html>In this case, we have an empty image element in the HTML that we then point to the SVG file. If you don't have an empty image element and need to create it entirely in JS, you can do something similar to the following instead:
<!DOCTYPE html>
<html>
<head>
<title>SVG, Dynamic Image Source, and JavaScript</title>
<style>
.rocketContainer {
background-color: #FFEB3B;
width: 100px;
height: 100px;
display: flex;
align-content: center;
justify-content: center;
}
.rocketContainer img {
width: 50px;
}
</style>
</head>
<body>
<div class="rocketContainer">
</div>
<script>
var container = document.querySelector(".rocketContainer");
var imageElement = document.createElement("img");
imageElement.src = "https://www.kirupa.com/images/rocket.svg";
container.appendChild(imageElement);
</script>
</body>
</html>Both approaches are pretty flexible. While you may not always write all of this code to load just a single image, you can extend this to an array of SVG image paths and dynamically assign the image source on multiple elements all at once. The only bottleneck is your imagination.
The next approach is one where we specify the SVG file in CSS. We'll continue to rely on the background-image property:
<!DOCTYPE html>
<html>
<head>
<title>SVGs in CSS via JavaScript</title>
<style>
.rocket {
width: 100px;
height: 100px;
background-color: #FFEB3B;
background-size: 50px;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div class="rocket"></div>
<script>
var rocketElement = document.querySelector(".rocket");
rocketElement.style.backgroundImage = `url(https://www.kirupa.com/images/rocket.svg)`;
</script>
</body>
</html>What we specify in JavaScript as the value for the backgroundImage property is nearly identical to what we specified directly in CSS earlier. That's convenient, right?
In many cases, even though you are in JavaScript land, you'll still be dealing with SVG data in its raw XML-like form. Here is how you can still display SVGs in this situation:
<!DOCTYPE html>
<html>
<head>
<title>Inline SVGs Specified via JavaScript</title>
<style>
.rocketContainer {
background-color: #FFEB3B;
width: 100px;
height: 100px;
display: flex;
align-content: center;
justify-content: center;
}
.rocketContainer svg {
width: 50px;
}
</style>
</head>
<body>
<div class="rocketContainer">
</div>
<script>
var rocketSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#A0041E" d="M1 17l8-7 16 1 1 16-7 8s.001-5.999-6-12-12-6-12-6z"/><path fill="#FFAC33" d="M.973 35s-.036-7.979 2.985-11S15 21.187 15 21.187 14.999 29 11.999 32c-3 3-11.026 3-11.026 3z"/><circle fill="#FFCC4D" cx="8.999" cy="27" r="4"/><path fill="#55ACEE" d="M35.999 0s-10 0-22 10c-6 5-6 14-4 16s11 2 16-4c10-12 10-22 10-22z"/><path d="M26.999 5c-1.623 0-3.013.971-3.641 2.36.502-.227 1.055-.36 1.641-.36 2.209 0 4 1.791 4 4 0 .586-.133 1.139-.359 1.64 1.389-.627 2.359-2.017 2.359-3.64 0-2.209-1.791-4-4-4z"/><path fill="#A0041E" d="M8 28s0-4 1-5 13.001-10.999 14-10-9.001 13-10.001 14S8 28 8 28z"/></svg>`;
var container = document.querySelector(".rocketContainer");
container.innerHTML = rocketSVG;
</script>
</body>
</html>Because an inline SVG is a DOM element in a string/text-based form, we can get away with setting innerHTML on whatever parent element we want our SVG to be displayed inside.
Earlier, we looked at the basic approach for specifying our inline SVG in CSS as a Data URI format. A part of that involved encoding our SVG into a url-encoded format. We do something similar in the JavaScript scenario as well:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript, SVG, and CSS!</title>
<style>
.rocketContainer {
background-color: #FFEB3B;
width: 100px;
height: 100px;
background-size: 50px;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div class="rocketContainer">
</div>
<script>
var rocketSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#A0041E" d="M1 17l8-7 16 1 1 16-7 8s.001-5.999-6-12-12-6-12-6z"/><path fill="#FFAC33" d="M.973 35s-.036-7.979 2.985-11S15 21.187 15 21.187 14.999 29 11.999 32c-3 3-11.026 3-11.026 3z"/><circle fill="#FFCC4D" cx="8.999" cy="27" r="4"/><path fill="#55ACEE" d="M35.999 0s-10 0-22 10c-6 5-6 14-4 16s11 2 16-4c10-12 10-22 10-22z"/><path d="M26.999 5c-1.623 0-3.013.971-3.641 2.36.502-.227 1.055-.36 1.641-.36 2.209 0 4 1.791 4 4 0 .586-.133 1.139-.359 1.64 1.389-.627 2.359-2.017 2.359-3.64 0-2.209-1.791-4-4-4z"/><path fill="#A0041E" d="M8 28s0-4 1-5 13.001-10.999 14-10-9.001 13-10.001 14S8 28 8 28z"/></svg>`;
var encodedSVG = encodeURIComponent(rocketSVG);
var container = document.querySelector(".rocketContainer");
container.style.backgroundImage = `url("data:image/svg+xml,${encodedSVG}")`;
</script>
</body>
</html>What we don't do is provide the SVG in its url-encoded format from the beginning. That isn't reasonable to expect when the SVG could be coming from any host of places (like a web request) where we have no control over the encoding. Instead, we can rely on the built-in encodeURIComponent method to convert our raw SVG and turn into a more digestible url-encoded format. Once we have done that conversion, the rest of the work is setting the backgroundImage property on the element we want the SVG to appear in - similar to what we have done several times in the past.
The other way to specify our SVGs in both HTML and CSS is by taking the base64 encoded route. To go from just a regular SVG to a base64 version of a regular SVG, you have the btoa function. In HTML if we need to set the image element source, this is what our approach might look like:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and a base64 SVG in HTML</title>
<style>
.rocketContainer {
background-color: #FFEB3B;
width: 100px;
height: 100px;
display: flex;
align-content: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="rocketContainer">
<img alt="rocket" width=50/>
</div>
<script>
var rocketSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#A0041E" d="M1 17l8-7 16 1 1 16-7 8s.001-5.999-6-12-12-6-12-6z"/><path fill="#FFAC33" d="M.973 35s-.036-7.979 2.985-11S15 21.187 15 21.187 14.999 29 11.999 32c-3 3-11.026 3-11.026 3z"/><circle fill="#FFCC4D" cx="8.999" cy="27" r="4"/><path fill="#55ACEE" d="M35.999 0s-10 0-22 10c-6 5-6 14-4 16s11 2 16-4c10-12 10-22 10-22z"/><path d="M26.999 5c-1.623 0-3.013.971-3.641 2.36.502-.227 1.055-.36 1.641-.36 2.209 0 4 1.791 4 4 0 .586-.133 1.139-.359 1.64 1.389-.627 2.359-2.017 2.359-3.64 0-2.209-1.791-4-4-4z"/><path fill="#A0041E" d="M8 28s0-4 1-5 13.001-10.999 14-10-9.001 13-10.001 14S8 28 8 28z"/></svg>`;
var base64version = window.btoa(rocketSVG);
var imgElement = document.querySelector(".rocketContainer img");
imgElement.src = `data:image/svg+xml;base64,${base64version}`;
</script>
</body>
</html>Notice that we store the base64 version of our SVG into the base64version variable, which then is fed into the Data URI format for our image element's src property. Things aren't too different in the CSS case:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript, Base64-encoded SVG, and CSS</title>
<style>
.rocketContainer {
background-color: #FFEB3B;
width: 100px;
height: 100px;
background-size: 50px;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div class="rocketContainer">
</div>
<script>
var rocketSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#A0041E" d="M1 17l8-7 16 1 1 16-7 8s.001-5.999-6-12-12-6-12-6z"/><path fill="#FFAC33" d="M.973 35s-.036-7.979 2.985-11S15 21.187 15 21.187 14.999 29 11.999 32c-3 3-11.026 3-11.026 3z"/><circle fill="#FFCC4D" cx="8.999" cy="27" r="4"/><path fill="#55ACEE" d="M35.999 0s-10 0-22 10c-6 5-6 14-4 16s11 2 16-4c10-12 10-22 10-22z"/><path d="M26.999 5c-1.623 0-3.013.971-3.641 2.36.502-.227 1.055-.36 1.641-.36 2.209 0 4 1.791 4 4 0 .586-.133 1.139-.359 1.64 1.389-.627 2.359-2.017 2.359-3.64 0-2.209-1.791-4-4-4z"/><path fill="#A0041E" d="M8 28s0-4 1-5 13.001-10.999 14-10-9.001 13-10.001 14S8 28 8 28z"/></svg>`;
var base64version = window.btoa(rocketSVG);
var container = document.querySelector(".rocketContainer");
container.style.backgroundImage = `url(data:image/svg+xml;base64,${base64version})`;
</script>
</body>
</html>We still use the btoa function to turn our SVG into a base64-encoded version that we can then specify, in this case, to the CSS backgroundImage property.
And with this...
I did say we will look at a billion ways to get a SVG to appear on our pages, and I'm sure if we enumerated every variation, we'll get pretty close. At this point, I don't know about you, but the list of approaches we've looked at across HTML, CSS, and JavaScript should cover any use case you would run into. If there is an approach that you really think I should list here, comment below.
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
:: Copyright KIRUPA 2024 //--