How would I convert this svg code into button code format?

asasass · October 3, 2017, 8:35pm

It’s multiple strokes so I’m confused on how to do this.

jsfiddle:

This:

<svg width='100' height='77' viewBox='0 0 100 77'>
  <path stroke='#9E7818' d='M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13' fill='none' stroke-width='5' stroke-linecap='round'
  stroke-linejoin='round' stroke-miterlimit='10' />
  <path stroke='#F4AF0A' d='M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13' fill='none' stroke-width='5' stroke-linecap='round'
  stroke-linejoin='round' stroke-miterlimit='10' />
  <path stroke='#F4AF0A' d='M72.2,64.1C81.1,59,87,49.4,87,38.5c0-10.9-5.9-20.5-14.8-25.6' fill='none' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' />
  <path stroke='#F4AF0A' d='M59,51.3c4.4-2.6,7.4-7.4,7.4-12.8s-3-10.3-7.4-12.8' fill='none' stroke-width='5' />
</svg>

Into this:


playButton2.innerHTML = '&lt;svg width=\'266\' height=\'77\' style=\'background-color:#000000;color:black; stroke: #0059dd; stroke-width:3px;\' viewBox=\'-1 0 62 100\'&gt;&lt;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\'&gt;&lt;/svg&gt;';

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: black; border: 3px solid #0059dd;"
  onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
playButton2.innerHTML = '&lt;svg width=\'65\' height=\'109\' style=\'stroke: #0059dd; stroke-width:3px;\' viewBox=\'-1 0 62 100\'&gt;&lt;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\'&gt;&lt;/svg&gt;';
player.play();
} else {
playButton2.innerHTML = '&lt;svg width=\'92\' height=\'109\' style=\'stroke: #0059dd; stroke-width:3px;\' viewBox=\'0 -3 85 106\'&gt;&lt;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\'&gt;&lt;/svg&gt;';
player.pause();
}">
<svg width="92" height="109" viewBox="0 -3 85 106">
  <path fill="currentColor" style="stroke: #0059dd; stroke-width:3px;" 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"></path>
</svg>
</button>

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

I got this far:

<svg width=\'100\' height=\'77\' viewBox=\'0 0 100 77\'>
  <path stroke=\'#9E7818\' d=\'M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13\' fill=\'none\' stroke-width=\'5\' stroke-linecap=\'round\'
  stroke-linejoin=\'round\' stroke-miterlimit=\'10\' />
  <path stroke=\'#F4AF0A\' d=\'M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13\' fill=\'none\' stroke-width=\'5\' stroke-linecap=\'round\'
  stroke-linejoin=\'round\' stroke-miterlimit=\'10\' />
  <path stroke=\'#F4AF0A\' d=\'M72.2,64.1C81.1,59,87,49.4,87,38.5c0-10.9-5.9-20.5-14.8-25.6\' fill=\'none\' stroke-width=\'5\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'10\' />
  <path stroke=\'#F4AF0A\' d=\'M59,51.3c4.4-2.6,7.4-7.4,7.4-12.8s-3-10.3-7.4-12.8\' fill=\'none\' stroke-width=\'5\' />
</svg>

StevenHu · October 3, 2017, 9:37pm

Does the link even work? It is taking a long time to load.

chrisofarabia · October 3, 2017, 9:42pm

It does - after a fashion…

asasass · October 3, 2017, 9:42pm

Yes.

asasass · October 3, 2017, 9:43pm

I just got this far, but I’m not sure if it’s right.

path fill=\'none\' stroke-width=\'5\' stroke-linecap=\'round\' stroke='#9E7818' d=\'M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13\'&gt;&lt;/svg&gt;

path fill=\'none\' stroke-width=\'5\' stroke-linecap=\'round\' stroke='#F4AF0A' d=\'M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13\'&gt;&lt;/svg&gt;

path fill=\'none\' stroke-width=\'5\' stroke-linecap=\'round\' stroke='#F4AF0A' d=\'M72.2,64.1C81.1,59,87,49.4,87,38.5c0-10.9-5.9-20.5-14.8-25.6\'&gt;&lt;/svg&gt;

path fill=\'none\' stroke-width=\'5\' stroke-linecap=\'round\' stroke='#F4AF0A' d=\'M59,51.3c4.4-2.6,7.4-7.4,7.4-12.8s-3-10.3-7.4-12.8\'&gt;&lt;/svg&gt;

StevenHu · October 3, 2017, 9:43pm

What does this code do? A screenshot would help.

asasass · October 3, 2017, 9:45pm

It doesn’t do anything, just an svg image.

StevenHu · October 3, 2017, 9:46pm

What do you want it to do?

asasass · October 3, 2017, 9:47pm

I just want the image to appear on the button code, that’s all.

StevenHu · October 3, 2017, 9:50pm

Shouldn’t your onclick statement be pulled out as a separate function xxx(), and onclick=“xxx()”?

asasass · October 3, 2017, 9:50pm

My code works differently.

StevenHu · October 3, 2017, 9:51pm

And you did not post it on this page?

asasass · October 3, 2017, 9:53pm

This is the working code:

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: black; border: 3px solid #0059dd;"
  onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
playButton2.innerHTML = '&lt;svg width=\'65\' height=\'109\' style=\'stroke: #0059dd; stroke-width:3px;\' viewBox=\'-1 0 62 100\'&gt;&lt;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\'&gt;&lt;/svg&gt;';
player.play();
} else {
playButton2.innerHTML = '&lt;svg width=\'92\' height=\'109\' style=\'stroke: #0059dd; stroke-width:3px;\' viewBox=\'0 -3 85 106\'&gt;&lt;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\'&gt;&lt;/svg&gt;';
player.pause();
}">
<svg width="92" height="109" viewBox="0 -3 85 106">
  <path fill="currentColor" style="stroke: #0059dd; stroke-width:3px;" 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"></path>
</svg>
</button>

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

StevenHu · October 3, 2017, 9:54pm

Then you do no need any more help?

asasass · October 3, 2017, 9:56pm

Am I breaking down the code correctly?

How do I input:

This:

path fill=\'none\' stroke-width=\'5\' stroke-linecap=\'round\' stroke='#9E7818' d=\'M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13\'&gt;&lt;/svg&gt;

path fill=\'none\' stroke-width=\'5\' stroke-linecap=\'round\' stroke='#F4AF0A' d=\'M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13\'&gt;&lt;/svg&gt;

path fill=\'none\' stroke-width=\'5\' stroke-linecap=\'round\' stroke='#F4AF0A' d=\'M72.2,64.1C81.1,59,87,49.4,87,38.5c0-10.9-5.9-20.5-14.8-25.6\'&gt;&lt;/svg&gt;

path fill=\'none\' stroke-width=\'5\' stroke-linecap=\'round\' stroke='#F4AF0A' d=\'M59,51.3c4.4-2.6,7.4-7.4,7.4-12.8s-3-10.3-7.4-12.8\'&gt;&lt;/svg&gt;

Into:

This:
playButton2.innerHTML = '<svg width=\'266\' height=\'77\' style=\'background-color:#000000;color:black; stroke: #0059dd; stroke-width:3px;\' viewBox=\'-1 0 62 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\'></svg>';

asasass · October 4, 2017, 11:03am

<svg width='100' height='77' viewBox='0 0 100 77'>
  <path stroke='#9E7818' d='M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13' fill='none' stroke-width='5' stroke-linecap='round'
  stroke-linejoin='round' stroke-miterlimit='10' />
  <path stroke='#F4AF0A' d='M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13' fill='none' stroke-width='5' stroke-linecap='round'
  stroke-linejoin='round' stroke-miterlimit='10' />
  <path stroke='#F4AF0A' d='M72.2,64.1C81.1,59,87,49.4,87,38.5c0-10.9-5.9-20.5-14.8-25.6' fill='none' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' />
  <path stroke='#F4AF0A' d='M59,51.3c4.4-2.6,7.4-7.4,7.4-12.8s-3-10.3-7.4-12.8' fill='none' stroke-width='5' />
</svg>

Am I breaking down the code correctly?

playButton2.innerHTML = '<svg width=\'100\' height=\'77\' style=\'background-color:#000000;color:black;\' viewBox=\'0 0 100 77\'><

path fill=\'none\' stroke-width=\'5\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'10\'stroke='#9E7818' d=\'M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c 2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13\'></svg>

path fill=\'none\' stroke-width=\'5\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'10\' stroke='#F4AF0A' d=\'M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13\'></svg>

path fill=\'none\' stroke-width=\'5\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'10\' stroke='#F4AF0A' d=\'M72.2,64.1C81.1,59,87,49.4,87,38.5c0-10.9-5.9-20.5-14.8-25.6\'></svg

I’m trying to get the above code to fit in here.
And this is where I’m stuck.

playButton2.innerHTML = '&lt;svg width=\'100\' height=\'77\' style=\'background-color:#000000;color:black;\' viewBox=\'0 0 100 77\'&gt;&lt;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\'&gt;&lt;/svg&gt;';

And then on to here: Finished product

asasass · October 4, 2017, 11:05am

How do you add more than one path to an svg button code?

Sample code:

playButton2.innerHTML = '&lt;svg width=\'100\' height=\'77\' style=\'background-color:#000000;color:black;\' viewBox=\'0 0 100 77\'&gt;&lt;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\'&gt;&lt;/svg&gt;';

Do you put it right after it like this?

playButton2.innerHTML = '<svg width=\'100\' height=\'77\' style=\'background-color:#000000;color:black;\' viewBox=\'0 0 100 77\'><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\'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></svg>';

I’m confused on how to do this.

asasass · October 4, 2017, 11:06am

Would it be possible to convert 4 svg paths into a single path?

<svg width='100' height='77' viewBox='0 0 100 77'>
  <path stroke='#9E7818' d='M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13' fill='none' stroke-width='5' stroke-linecap='round'
  stroke-linejoin='round' stroke-miterlimit='10' />
  <path stroke='#F4AF0A' d='M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13' fill='none' stroke-width='5' stroke-linecap='round'
  stroke-linejoin='round' stroke-miterlimit='10' />
  <path stroke='#F4AF0A' d='M72.2,64.1C81.1,59,87,49.4,87,38.5c0-10.9-5.9-20.5-14.8-25.6' fill='none' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' />
  <path stroke='#F4AF0A' d='M59,51.3c4.4-2.6,7.4-7.4,7.4-12.8s-3-10.3-7.4-12.8' fill='none' stroke-width='5' />
</svg>

TechnoBear · October 4, 2017, 11:07am

Multiple new topics merged.

TeNDoLLA · October 4, 2017, 11:56am

I am not certainly sure if this is what you are trying to achieve but here is an example:

<html>
    <head>
        <title>Title</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#svgButton").click(function(){
                    alert("SVG button clicked!");
                    // Code for logic that happens on button press
                }); 
            });
        </script>
        <style>
            #svgButton{
              width: 100px;
              height: 50px;
            } 
            #svgButton svg {
              width: 25px;
              height: 25px;
            }
        </style>
    </head>
    <body>
        <button id="svgButton">
            <svg id="search-icon" class="search-icon" viewBox="0 0 24 24">
                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                <path d="M0 0h24v24H0z" fill="none"/>
            </svg>
         </button>
    </body>
</html>