How difficult would it be to convert this svg into another code format?

HTML & CSS
1

This code:

<svg width="600" height="300" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" style="visibility: visible;">
<defs>
  <clipPath id="ringMask">
    <rect class="ringMask" x="433.7" y="166.3" fill="#FF0606" width="148" height="312"></rect>
  </clipPath>
<linearGradient id="speakerGrad" gradientUnits="userSpaceOnUse" x1="287.0869" y1="227.6745" x2="533.7535" y2="385.6746">
	<stop offset="0" style="stop-color:#0BD3F6"></stop>
	<stop offset="1" style="stop-color:#2998D5"></stop>
</linearGradient> 
</defs>
<g id="wholeIcon" data-svg-origin="400 320" transform="matrix(0.6,0,0,0.6,160,128)">
  <g id="innerGroup" data-svg-origin="338 321.3499984741211" transform="matrix(1,0,0,1,0,0)">
<g clip-path="url(#ringMask)">
<ellipse id="outerRing" fill="none" stroke="url(#speakerGrad)" stroke-width="32" stroke-miterlimit="10" cx="398" cy="320.5" rx="128" ry="128"></ellipse>

<circle id="innerRing" fill="url(#speakerGrad)" cx="398.5" cy="320.5" r="71.3"></circle>
  </g>  
<polygon id="speakerEnd" fill="none" points="430,449 352,367 286,367 286,273 352,273 430,193.7 "></polygon>
<polygon id="speakerStart" fill="url(#speakerGrad)" points="430,449 352,367 286,367 286,273 352,273 430,193.7 " data-original="430,449 352,367 352,367 352,273 352,273 430,193.7 " data-svg-origin="352 193.6999969482422" transform="matrix(1,0,0,1,-30,0)"></polygon>
  </g>
  <ellipse id="outline" fill="none" stroke="url(#speakerGrad)" stroke-width="32" stroke-miterlimit="10" cx="400" cy="320.5" rx="200" ry="200"></ellipse>

  <circle id="hit" fill="rgba(34,123,45,0)" cx="400" cy="320" r="223"></circle>
  </g>
</svg>

Into this code format:



<svg width="100" height="100" viewBox="0 0 16 14"><path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill="currentColor" fill-rule="evenodd"></path></svg>

Preferably, one with the ring, and one without the ring.

2

Very difficult for me. :slight_smile: It could be impossible, since the last code is only describing one line while the first code does much more.

3

Maybe @coothead would be able to do it, or someone else.

4

I simplified it this way: removed: class=“ringMask” id=“wholeIcon” id=“outerRing” id=“innerRing” id=“speakerEnd” id=“speakerStart” id=“outline”

But deleting anything adversely affected the image.

5

I was able to cut the code down this far.
Code;

<svg width="600" height="400" viewBox="0 300 800 50" style="background-color:#000000;" >
<defs>
  <clipPath id="ringMask">
    <rect class="ringMask" x="433.7" y="166.3" fill="FF0606" width="148" height="312"></rect>
  </clipPath>
<linearGradient id="speakerGrad" gradientUnits="userSpaceOnUse" x1="287.0869" y1="227.6745" x2="533.7535" y2="385.6746">
	<stop offset="0" style="stop-color:#0BD3F6"></stop>
	<stop offset="1" style="stop-color:#2998D5"></stop>
</linearGradient> 
</defs>

<g clip-path="url(#ringMask)">
<ellipse id="outerRing" fill="none" stroke="url(#speakerGrad)" stroke-width="32" stroke-miterlimit="10" cx="398" cy="320.5" rx="128" ry="128"></ellipse>
<circle id="innerRing" fill="url(#speakerGrad)" cx="398.5" cy="320.5" r="71.3"></circle>
  </g>  

<polygon id="speakerStart" fill="url(#speakerGrad)" points="430,449 352,367 286,367 286,273 352,273 430,193.7 " data-original="430,449 352,367 352,367 352,273 352,273 430,193.7 " data-svg-origin="352 193.6999969482422" transform="matrix(1,0,0,1,-30,0)"></polygon>
  </g>
  <ellipse id="outline" fill="none" stroke="url(#speakerGrad)" stroke-width="32" stroke-miterlimit="10" cx="400" cy="320.5" rx="200" ry="200"></ellipse>

  </g>
</svg>
6

Is there a reason you are using this code instead of a PNG image file?

7

Yes, because it’s the code I choose to use.

8

Still trying to figure this out.

Into this code format

<svg width="100" height="100" viewBox="0 0 16 14"><path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill="currentColor" fill-rule="evenodd"></path></svg>

9

I found it, the person used the youtube audio button to make this.

And it’s only one path so I don’t need to do anything to it.

<button>
  <svg width="266" height="266" version="1.1" viewBox="0 0 36 36">
    <path 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"
    fill="#fff"></path>
  </svg>
</button>
10

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