How would I add svg to a button code?

JavaScript
1

I’m confused on how I would do this.

Instead of the letters, Play, I wanted to put this svg instead of that.

Play
<svg width="100" height="100" viewBox="0 0 85 100"><path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"><title>PLAY</title></path></svg>

Pause:
<svg width="100" height="100" viewBox="0 0 60 100"><path fill="currentColor" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"><title>PAUSE</title></path></svg>


1st, can this be done, what I’m trying to do, using the code I have set up below?

Code:

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: transparent; background-repeat: no-repeat; border: 3px solid #E77D19; border-radius:0px;font-family:Tahoma; font-weight: bold;font-size:30px; color:#E77D19;" onclick="  
var button = document.getElementById('playButton');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
   playButton2.innerHTML = '';
    player.play();
playButton2.style.border='none' 
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
  } else {
 playButton2.innerHTML = '';
    player.pause();
playButton2.style.border='none' 
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
  }">
  Play</button>



<audio id="player2" style="display:none;">
  <source src='' type='audio/mpeg' />
</source></audio>
2

Can someone help me understand hows I would set this up.

How to create SVG using DOM
http://people.apache.org/~clay/batik/domapi.html

Play
<svg width="100" height="100" viewBox="0 0 85 100"><path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"><title>PLAY</title></path></svg>

Pause:
<svg width="100" height="100" viewBox="0 0 60 100"><path fill="currentColor" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"><title>PAUSE</title></path></svg>
3

Something like this?

playButton2.setAttributeNS(null, "width", "100");
playButton2.setAttributeNS(null, "height", "100");
playButton2.setAttributeNS(null, "style", "fill:#E77D19");
playButton2.setAttributeNS(null, "viewBox", "0 0 60 100");
playButton2.setAttributeNS(null, "path fill", "currentColor");
playButton2.setAttributeNS(null, "d", "M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z");

That doesn’t exactly work, I must be doing something wrong.

Some help please.

I’m trying to fit it inside the code I set up above.

4

Doesn’t Work.

How would I get it to work?

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: transparent; background-repeat: no-repeat; border: 3px solid #E77D19; border-radius:0px;font-family:Tahoma; font-weight: bold;font-size:30px; color:#E77D19;" onclick="  
var button = document.getElementById('playButton');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
   playButton2.innerHTML = '';
    player.play();
playButton2.style.border='none' 
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')'
playButton2.setAttributeNS(null, 'width', '100');
playButton2.setAttributeNS(null, 'height', '100');
playButton2.setAttributeNS(null, 'style', 'fill:#E77D19')
playButton2.setAttributeNS(null, 'viewBox', '0 0 60 100')
playButton2.setAttributeNS(null, 'path fill', 'currentColor')
playButton2.setAttributeNS(null, 'd', 'M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z')';
  } else {
 playButton2.innerHTML = '';
    player.pause();
playButton2.style.border='none' 
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
  }">
  Play</button>
5

Do you have a pic of what it should look like in the end?

6

All I’m doing is taking out the Text: Play, and Pause, and putting in its place, the svg images. That’s it.

I need someone to show me How to create SVG using DOM so it will work inside the code I have set up.

7

I want to use, SVG

Play:
<svg width="100" height="100" style="color:#E77D19;" viewBox="0 0 85 100"><path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"><title>PLAY</title></path></svg>

Pause:
<svg width="100" height="100" style="color:#E77D19;" viewBox="0 0 60 100"><path fill="currentColor" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"><title>PAUSE</title></path></svg>



Instead of, Text

Using This Code:

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: transparent; background-repeat: no-repeat; border: 3px solid #E77D19; border-radius:0px;font-family:Tahoma; font-weight: bold;font-size:30px; color:#E77D19;" onclick="  
var button = document.getElementById('playButton');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
   playButton2.innerHTML = '';
    player.play();
playButton2.style.border='none' 
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
  } else {
 playButton2.innerHTML = '';
    player.pause();
playButton2.style.border='none' 
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
  }">
  Play</button>

<audio id="player2" style="display:none;">
  <source src='' type='audio/mpeg' />
</source></audio>
8

You might just put the svg elements right inside the button:

<button id="playButton">
  <svg class="play" width="100" height="100" viewBox="0 0 85 100"><path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"><title>PLAY</title></path></svg>
  <svg class="pause" width="100" height="100" viewBox="0 0 60 100"><path fill="currentColor" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"><title>PAUSE</title></path></svg>
</button>

And then toggle the two svgs with JS and CSS like

JS

var playButton = document.getElementById('playButton')

playButton.addEventListener('click', function () {
	this.classList.toggle('is-playing')
})

CSS

.pause {
  display: none;
}

.is-playing .play {
  display: none;
}

.is-playing .pause {
  display: block;
}

Here’s a fiddle.

1 Like
9

What if I want to do it using my code, then how would I set it up?

SVG using DOM would be the method I assume, and so, how would I work that into this code?

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: transparent; background-repeat: no-repeat; border: 3px solid #E77D19; border-radius:0px;font-family:Tahoma; font-weight: bold;font-size:30px; color:#E77D19;" onclick="  
var button = document.getElementById('playButton');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
   playButton2.innerHTML = 'Pause';
    player.play();
playButton2.style.border='none' 
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
  } else {
 playButton2.innerHTML = 'Play';
    player.pause();
playButton2.style.border='none' 
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
  }">
  Play</button>

<audio id="player2" style="display:none;">
  <source src='' type='audio/mpeg' />
</source></audio>
10

I suppose could show/hide the SVGs with JS then by setting their .style properties inside the onclick inline script.

11

The usual way is to replace the text inside of the anchor, with the svg code.

So, where you have “Play” at the button end tag, replace that Play with the SVG code instead.

12

Where would I put the pause svg then? And then the other Play svg?

1st see: Play

Click: Pause

Click: Back to Play

This is what it looks like now.

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: transparent; background-repeat: no-repeat; border: 3px solid #E77D19; border-radius:0px;font-family:Tahoma; font-weight: bold;font-size:30px; color:#E77D19;" onclick="  
var button = document.getElementById('playButton');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
   playButton2.innerHTML = 'Pause';
    player.play();
playButton2.style.border='none' 
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
  } else {
 playButton2.innerHTML = 'Play';
    player.pause();
playButton2.style.border='none' 
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
  }">
<svg width="100" height="100" style="color:#E77D19;" viewBox="0 0 85 100"><path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"><title>PLAY</title></path></svg></button>

<audio id="player2" style="display:none;">
  <source src='' type='audio/mpeg' />
</source></audio>
13

You would put them all inside of the button, and hide the ones that you’re not using.

1 Like
14

Can you show me cause I tried millions of times.

I might be putting them in the wrong spot.

How would I put them inside the button?

Play:
<svg width="100" height="100" style="color:#E77D19;" viewBox="0 0 85 100"><path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"><title>PLAY</title></path></svg>

Pause:
<svg width="100" height="100" style="color:#E77D19;" viewBox="0 0 60 100"><path fill="currentColor" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"><title>PAUSE</title></path></svg>

15

Like this:

<button ...><svg ...><svg ...></button>
16

That doesn’t help, can you show me it working using my code?

I don’t understand where I place the other 2 svg’s within the code.

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: transparent; background-repeat: no-repeat; border: 3px solid #E77D19; border-radius:0px;font-family:Tahoma; font-weight: bold;font-size:30px; color:#E77D19;" onclick="  
var button = document.getElementById('playButton');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
   playButton2.innerHTML = 'Pause';
    player.play();
playButton2.style.border='none' 
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
  } else {
 playButton2.innerHTML = 'Play';
    player.pause();
playButton2.style.border='none' 
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
  }">
<svg width="100" height="100" style="color:#E77D19;" viewBox="0 0 85 100"><path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"><title>PLAY</title></path></svg></button>

<audio id="player2" style="display:none;">
  <source src='' type='audio/mpeg' />
</source></audio>
17

It’s not working, I don’t understand. I still don’t get it.

I don’t understand where I place the other 2 svg’s within the code.

18

[quote=“asasass, post:16, topic:276694, full:true”]
That doesn’t help, can you show me it working using my code?[/quote]

Your code is too hard to work with, so no I cannot show it working with your code.
Please follow some standards and your code will be much easier for us all to understand, and help you with.
You have been given plenty of advice before on how to make your code easier to work with.

Until then, good luck.

1 Like
19

What you’re telling me to do doesn’t work.

Doing this doesn’t work at all.
<button ...><svg ...><svg ...></button>

21

Why would you tell me to do this if it doesn’t work with my code?