Raster to PNG coding discrepancy

[asasass]

My question is concerning the pause Raster to PNG

I converted the play raster to png, and that went through smoothly without an issue.

I do the pause one next and they both don’t look the same.

How do I fix that? And can it be fixed?

Can something be adjusted in the code to fix/address the issue?

Edit fiddle - JSFiddle - Code Playground

<div style="
        width: 36px;
        height: 36px;
      
      background-color: rgba(0,0,0,.7);
    background-image: url('https://i.imgur.com/DP1EiiG.png');
        background-repeat: no-repeat;
        background-size: 14px 18px;
        background-position: 50%;
        border-radius: 500px;
        border: 1px solid red;
        cursor: pointer;
    "> </div>

<div style="
        width: 36px;
        height: 36px;
      
      background-color: rgba(0,0,0,.7);
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTI2MCAxNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0yNTIgMEgxMjZDOTEuMyAwIDYxLjcgMTIuMyAzNyAzNyAxMi4zIDYxLjcgMCA5MS4zIDAgMTI2djEyNjBjMCAzNC43IDEyLjMgNjQuMyAzNyA4OSAyNC43IDI0LjcgNTQuMyAzNyA4OSAzN2gxMjZjMzQuNyAwIDY0LjMtMTIuMyA4OS0zNyAyNC43LTI0LjcgMzctNTQuMyAzNy04OVYxMjZjMC0zNC43LTEyLjMtNjQuMy0zNy04OS0yNC43LTI0LjctNTQuMy0zNy04OS0zN3ptODgyIDBoLTEyNmMtMzQuNyAwLTY0LjMgMTIuMy04OSAzNy0yNC43IDI0LjctMzcgNTQuMy0zNyA4OXYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6IiBmaWxsPSIjZmZmIi8+PC9zdmc+');
        background-repeat: no-repeat;
        background-size: 14px 18px;
        background-position: 50%;
        border-radius: 500px;
        border: 1px solid red;
        cursor: pointer;
    "> </div>

<div style="
        width: 36px;
        height: 36px;
      
      background-color: rgba(0,0,0,.7);
    background-image: url('https://i.imgur.com/ef35w1e.png');
        background-repeat: no-repeat;
        background-size: 14px 18px;
        background-position: 58% 50%;
        border-radius: 500px;
        border: 1px solid red;
        cursor: pointer;
    "> </div>

<div style="
        width: 36px;
        height: 36px;
      
      background-color: rgba(0,0,0,.7);
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIyNiAxNDgxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=');
        background-repeat: no-repeat;
        background-size: 14px 18px;
        background-position: 58% 50%;
        border-radius: 500px;
        border: 1px solid red;
        cursor: pointer;
    "> </div>

[ronpat]

I’m sorry, but I don’t understand what you are talking about:

There is probably another meaning…?

[TechnoBear]

@ronpat

There is probably another meaning…?

Raster graphics

However, I’m also confused, because PNG is a raster file format, so I don’t understand what’s being converted here (or why).

PNG

[StevenHu]

So you don’t like the difference between the 2 pause buttons? One has narrow bars and the other has wide, well-spaced bars?

[asasass]

Converting Base64 String to .SVG

Perfect.

Edit fiddle - JSFiddle - Code Playground

The mistake I made was, I used internet explorer to convert an svg path to a png image. Wrong thing to do. I was supposed to convert the Base64 string, not the svg path.

This was the correct way.

Converting data:image/svg+xml;base64 to a PNG

I put the string in here Save as .svg Then upload to here: http://svgtopng.com/ This is one way I just found. Anyone know of any others?

<style>
  #playButton2 {
    width: 78px;
    height: 78px;
    cursor: pointer;
    border: 1px solid #0059dd;
    background-color: black;
    background-image: url('https://i.imgur.com/ltrxz9z.jpg');
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  #playButton2 div:hover {
    border-radius: 50%;
    border: 1px solid red;
  }
  
  .initial {
    width: 36px;
    height: 36px;
    margin: 20px 20px;
    background-color: rgba(0, 0, 0, .7);
    background-image: url('https://i.imgur.com/Z6NjnxX.png');
    background-size: 14px 18px;
    background-repeat: no-repeat;
    background-position: 58% 45%;
    border-radius: 50%;
    border: 1px solid white;
    cursor: pointer;
  }
  
  .pause {
    display: none;
    width: 36px;
    height: 36px;
    margin: 20px 20px;
    background-color: rgba(0, 0, 0, .7);
    background-image: url('https://i.imgur.com/rzG5iBH.png');
    background-repeat: no-repeat;
    background-size: 14px 18px;
    background-position: 50%;
    border-radius: 500px;
    border: 1px solid white;
    cursor: pointer;
  }
  
  .play {
    display: none;
    width: 36px;
    height: 36px;
    margin: 20px 20px;
    background-color: rgba(0, 0, 0, .7);
    background-image: url('https://i.imgur.com/Z6NjnxX.png');
    background-size: 14px 18px;
    background-repeat: no-repeat;
    background-position: 58% 45%;
    border-radius: 50%;
    border: 1px solid white;
    cursor: pointer;
  }

</style>


<div id="playButton2" onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
  document.querySelector('#playButton2 .initial').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .play').style.display='none';
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton2 .pause').style.display='inline-block';
player.play();
} else {
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}">

  <div class="initial"> </div>

  <div class="pause"> </div>

  <div class="play"> </div>

</div>

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>