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

Can someone give me definitive on this please.

Am I able to do this?

Yes, or No?

No .

4 Likes

That’s just it though, the differently does not work.

2 Likes

Let me just confirm this:

You can’t put more than a single path inside this code?

Correct?

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\'></svg>';

I have a question for you.

Is it possible to convert 3 paths into a single path?

Yes or No?

<svg width='100' height='77' viewBox='0 0 100 77'>
  <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='6' 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>

If it’s possible to draw the lines on a piece of paper without lifting the pen, yes. Then it would be one path, as tortuous as it might be.

TBH, I don’t see there being a problem with having more than one path, browsers handle them quite nicely.

EDIT
wrong information struck.

Can multiple paths fit into a code structure like this?

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;';

That’s not true.

Examples:

You have to lift the pen to make these.

<svg width="100" height="100" version="1.1" style="background-color:black;" viewBox="0 0 36 36">
 <path fill="currentColor" style="fill:#0059dd; "d="M8,21 L12,21 L17,26 L17,10 L12,15 L8,15 L8,21 Z M19,14 L19,22 C20.48,21.32 21.5,19.77 21.5,18 C21.5,16.26 20.48,14.74 19,14 ZM19,11.29 C21.89,12.15 24,14.83 24,18 C24,21.17 21.89,23.85 19,24.71 L19,26.77 C23.01,25.86 26,22.28 26,18 C26,13.72 23.01,10.14 19,9.23 L19,11.29 Z"></path>
</svg>

and here

<svg width="100" height="100" version="1.1" style="background-color:black;" viewBox="0 0 36 36">
 <path fill="currentColor" style="fill:#0059dd; "d="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z"></path>
</svg>
1 Like

Thanks, I stand corrected. There is the “M” - “Move to”

The first command is the “Move To” or M, which was described above. It takes two parameters, a coordinate ’ x ’ and coordinate ’ y ’ to move to. If your cursor already was somewhere on the page, no line is drawn to connect the two places. The “Move To” command appears at the beginning of paths to specify where the drawing should start.

(bolding mine)

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.