Editing an SVG image

And is there such thing as a program online that tells you what each letter or number is for?

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

Hi there asasass,

You may find this site helpful…

svg tutorial

…and in particular, this page…

svg paths

coothead

3 Likes

Hi there asasass,

here is the modified svg that you require…

<svg 
 width="100" 
 height="100" 
 viewBox="0 0 16 14">

  <path d="M12.945.38l-.652.7623zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" 
   fill="currentColor" 
   fill-rule="evenodd">
  </path>
</svg>

https://jsfiddle.net/2gbu4v31/7/

coothead

2 Likes

What would be the code for just this part of it?

Which part? @coothead has provided the solution to your original question, and you have replied by posting an entire new image. Please explain exactly what it is you want.

1 Like

How would I add the css part, into the SVG?

.volElem {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

or this?
fill="none" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"

<svg width="266" 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" />
  <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" />
  <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" />
  <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" />
</svg>

So it looks like this:

I’ve merged these two threads as they seem to be on the same subject.

1 Like

Thank you, I was going to ask you to change the topic title.

That was for a different code, this is a different one.

And again, I’ll ask you to explain clearly what it is that you want.

At the moment, you seem to have a string of moving goalposts. How is anybody supposed to be able to help, unless you can describe exactly what you want to achieve?

Like this? @SamA74

Would this be right?

You add these to each path stroke?
stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"

<svg width="266" 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" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" />
</svg>

The blue one is different from the black colored one. I got help with the black one, that one is good. Now I’m asking for help with the blue one.

What have you tried? If you take what you learned from the help that @coothead, and look at a reference page, you probably should be able to make the transition pretty easily.

Though why you’re insisting on using the html attributes is beyond me.

1 Like

The blue one has animation, when I take the html part out it shows me it closed.

I just got it using inspect element.

<svg 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>

Perhaps you would find using a GUI based editor more intuitive for editing SVGs, rather than editing code. I’m not sure which you are most comfortable with, but you seem to have trouble interpreting code.

If you are looking for an on-line editor, there is this one:-
https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html

Or if you want an application you can download and install on a desktop you could try tihs:-

3 Likes

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