# The Billion Ways to Display an SVG

**URL:** <https://forum.kirupa.com/t/the-billion-ways-to-display-an-svg/639705>\
**Category:** programming\
**Created:** [April 24, 2019, 6:06am UTC](https://forum.kirupa.com/t/the-billion-ways-to-display-an-svg/639705 "2019-04-24T06:06:48Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 24, 2019, 6:06am UTC](https://forum.kirupa.com/t/the-billion-ways-to-display-an-svg/639705/1 "2019-04-24T06:06:48Z")

</div>

by [kirupa](https://www.kirupa.com/www.kirupa.com/about/whatiskirupa.htm) | filed under [UI Stuff](https://www.kirupa.com/learn/ui_index.htm)

* * *
This is a companion discussion topic for the original entry at [https://www.kirupa.com/tricks/billion\_ways\_display\_svg.htm](https://www.kirupa.com/tricks/billion_ways_display_svg.htm)

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [April 24, 2019, 5:22pm UTC](https://forum.kirupa.com/t/the-billion-ways-to-display-an-svg/639705/2 "2019-04-24T17:22:36Z")

</div>

Any reason you didn’t use the unencoded form for the first data URI example? That seems like the clearest way to see what’s going on.

If compatibility is a concern, you could introduce the more complex forms right after.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 25, 2019, 3:10am UTC](https://forum.kirupa.com/t/the-billion-ways-to-display-an-svg/639705/3 "2019-04-25T03:10:13Z")

</div>

I tried that initially, but I wasn’t able to get it to work ☹

```
<!DOCTYPE html>
<html>

<head>
  <title>SVGs Inline in CSS</title>

  <style>
    .rocket {
      width: 100px;
      height: 100px;
      background-image: url("data:image/svg+xml,<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>");
      background-color: #FFEB3B;
      background-size: 50px;
      background-repeat: no-repeat;
      background-position: center;
    }
  </style>
</head>

<body>
  <div class="rocket"></div>
</body>

</html>
```

---

<div class="post-metadata">

**Author:** ![prg9](https://avatars.discourse-cdn.com/v4/letter/p/8dc957/32.png) [@prg9](https://forum.kirupa.com/u/prg9)\
**Post date:** [April 25, 2019, 4:05am UTC](https://forum.kirupa.com/t/the-billion-ways-to-display-an-svg/639705/4 "2019-04-25T04:05:05Z")

</div>

Hmm … no mention of Canvas and Path2D. 🤔

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 25, 2019, 4:24am UTC](https://forum.kirupa.com/t/the-billion-ways-to-display-an-svg/639705/5 "2019-04-25T04:24:56Z")

</div>

Good point! I stuck almost exclusively to the DOM. That’s something to fix in the future 🙂

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [April 25, 2019, 4:36am UTC](https://forum.kirupa.com/t/the-billion-ways-to-display-an-svg/639705/6 "2019-04-25T04:36:22Z")

</div>

> [@kirupa](#):
>
> I tried that initially, but I wasn’t able to get it to work ☹

Ah, I must have only needed to support Safari when I poked at this in the past.

---

<div class="post-metadata">

**Author:** ![prg9](https://avatars.discourse-cdn.com/v4/letter/p/8dc957/32.png) [@prg9](https://forum.kirupa.com/u/prg9)\
**Post date:** [April 25, 2019, 1:18pm UTC](https://forum.kirupa.com/t/the-billion-ways-to-display-an-svg/639705/7 "2019-04-25T13:18:47Z")

</div>

Just trying to nudge you one method closer towards the billion. 🙂

---

<div class="post-metadata">

**Author:** ![chriskirknielsen](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/chriskirknielsen/32/9614_2.png) [@chriskirknielsen](https://forum.kirupa.com/u/chriskirknielsen)\
**Post date:** [April 29, 2019, 2:01pm UTC](https://forum.kirupa.com/t/the-billion-ways-to-display-an-svg/639705/8 "2019-04-29T14:01:19Z")

</div>

If you encode the hexidecimal colour codes, replacing `%23` instead of `#` in the data URI, it should work. 👍

```auto
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'><path fill='%23A0041E' d='M1 17l8-7 16 1 1 16-7 8s.001-5.999-6-12-12-6-12-6z'/><path 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'/><circle fill='%23FFCC4D' cx='8.999' cy='27' r='4'/><path fill='%2355ACEE' 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='%23A0041E' d='M8 28s0-4 1-5 13.001-10.999 14-10-9.001 13-10.001 14S8 28 8 28z'/></svg>");

```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 30, 2019, 7:43pm UTC](https://forum.kirupa.com/t/the-billion-ways-to-display-an-svg/639705/9 "2019-04-30T19:43:47Z")

</div>

Wow. That’s one additional form of “cleaning-up data to work in different contexts” that I never encountered until now 🙂

---

<div class="post-metadata">

**Author:** ![Husna\_Khan](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/husna_khan/32/9616_2.png) [@Husna\_Khan](https://forum.kirupa.com/u/Husna_Khan)\
**Post date:** [May 2, 2019, 7:38am UTC](https://forum.kirupa.com/t/the-billion-ways-to-display-an-svg/639705/10 "2019-05-02T07:38:55Z")

</div>

I have an SVG image inside div I want to change SVG color when we hovers on div `<img src="search.svg" id="search">` i have tried like this .test: hover img#search { fill: blue; } this is not working.

---

<div class="post-metadata">

**Author:** ![Yury\_S](https://avatars.discourse-cdn.com/v4/letter/y/a5b964/32.png) [@Yury\_S](https://forum.kirupa.com/u/Yury_S)\
**Post date:** [May 2, 2019, 10:40am UTC](https://forum.kirupa.com/t/the-billion-ways-to-display-an-svg/639705/11 "2019-05-02T10:40:07Z")

</div>

In one case I was needed to _style_ SVG with CSS, but it’s only possible when SVG code is inline. But I like to keep my html clean and readable without giant blob of svg stuff. So I found another way to insert SVG into HTML. The solution is using JS template literals. At the end you store all your SVG code in JS file and it loads to HTML when DOM loaded. Potential use case for that method:  
you have bunch of icons that needed to change color on hover, or have another interaction (it can be animated as well), so for that you need to put those SVG icons inline. Also it loaded only once that should be good for performance.

So I wrote the simple script for that stuff, it can be handy [https://github.com/shimanovsky/svginjector](https://github.com/shimanovsky/svginjector)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 2, 2019, 6:14pm UTC](https://forum.kirupa.com/t/the-billion-ways-to-display-an-svg/639705/12 "2019-05-02T18:14:50Z")

</div>

@Yury_S - that is 100% my favorite way to use SVGs when I need to make styling changes to them, especially on user interaction! 🙂

@Husna_Khan - as Yury mentions, you need to specify your SVGs inline in your HTML.

---

<div class="post-metadata">

**Author:** ![Tolerant](https://avatars.discourse-cdn.com/v4/letter/t/e79b87/32.png) [@Tolerant](https://forum.kirupa.com/u/Tolerant)\
**Post date:** [May 6, 2019, 12:26pm UTC](https://forum.kirupa.com/t/the-billion-ways-to-display-an-svg/639705/13 "2019-05-06T12:26:54Z")

</div>

i think, “SVG use” can userful

> **[Styling SVG Content with CSS | Codrops](https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/)**
>
> An in-depth article on how to style the contents of the SVG element and overcome some challenges it brings.