The Billion Ways to Display an SVG

programming
1

by kirupa | filed under UI Stuff

This is a companion discussion topic for the original entry at https://www.kirupa.com/tricks/billion_ways_display_svg.htm
2

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.

3

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

<!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>
4

Hmm … no mention of Canvas and Path2D. :thinking:

1 Like
5

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

1 Like
6

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

1 Like
7

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

1 Like
8

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

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>");
1 Like
9

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

10

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.

11

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

12

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

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

13

i think, “SVG use” can userful