How do you draw a svg icon inside a circle element?-CodePudding

<svg viewBox="-151 -323 4000 4000" style="" fill="blue">
  <g>
    <circle fill="blue"  r="110">
      <svg
        preserveAspectRatio="xMidYMid meet"
        height="1em"
        width="1em"
        viewBox="0 0 40 40"
        style="vertical-align: middle;color: red;"
        fill="red"
      >
        <g>
          <path d="m33.5 29.5q0 0.9-0.7 1.5l-3 3.1q-0.6 0.6-1.5 0.6t-1.5-0.6l-6.6-6.6-6.5 6.6q-0.7 0.6-1.6 0.6t-1.5-0.6l-3-3.1q-0.6-0.6-0.6-1.5t0.6-1.5l6.5-6.6-6.5-6.5q-0.6-0.7-0.6-1.6t0.6-1.5l3-3q0.6-0.6 1.5-0.6t1.6 0.6l6.5 6.6 6.6-6.6q0.6-0.6 1.5-0.6t1.5 0.6l3.1 3q0.6 0.7 0.6 1.5t-0.6 1.6l-6.6 6.5 6.6 6.6q0.6 0.6 0.6 1.5z"></path>
        </g>
      </svg>
    </circle>
  </g>
</svg>;

I was able to display the circle, but I am having trouble displaying the svg x inside of it. Also, is there a way to optimize the viewBox values automatically without having to enter values, because I am having trouble getting the correct value to maximize the width and height of the icons.

<g transform="translate(36, 38)">
  <circle  r="110">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 752 752">
      <path d="M196.56 543.17 472.2 384.03v-16.051l-275.64-159.14Zm284.89-334.59v332.99h74V208.58Z"></path>
    </svg>
  </circle>
</g>;

Also, I tried this, but again it doesn't seem to be working.

CodePudding user response：

You don't put the path inside the circle tag. You need to set the coordinates ofevery shape. In this case I would put the ctoss inside a symbol element with a viewBox and use it with <use>. This will allow me to give the use a position (x,y) and a width and a height. In the nest example I'm giving the use a width and height of 100 vut you can choose another value:

<svg  viewBox="-150 -150 300 300" > 
  <circle fill="blue"  r="110"></circle>
  <use href="#sym" width="100" height="100" x="-50" y="-50" />
  
  <symbol id="sym" viewBox="6.9 8 26.5 26.5" fill="red">
     <path id="kk" d="m33.5 29.5q0 0.9-0.7 1.5l-3 3.1q-0.6 0.6-1.5 0.6t-1.5-0.6l-6.6-6.6-6.5 6.6q-0.7 0.6-1.6 0.6t-1.5-0.6l-3-3.1q-0.6-0.6-0.6-1.5t0.6-1.5l6.5-6.6-6.5-6.5q-0.6-0.7-0.6-1.6t0.6-1.5l3-3q0.6-0.6 1.5-0.6t1.6 0.6l6.5 6.6 6.6-6.6q0.6-0.6 1.5-0.6t1.5 0.6l3.1 3q0.6 0.7 0.6 1.5t-0.6 1.6l-6.6 6.5 6.6 6.6q0.6 0.6 0.6 1.5z"></path>
  </symbol>
</svg>