I am new to SVGs. I wanna make an icon like the below image. How can I achieve this with svg path? Icon image
Advertisement
Answer
Draw a traiangle and a circle.
<svg width="100" height="100" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"> <g transform="matrix(1,0,0,1,0,-0.377897)"> <circle cx="49.509" cy="63.179" r="22.737" style="fill:none;stroke:black;stroke-width:1.8px;"/> <g transform="matrix(0.837287,0,0,0.838403,6.90389,6.94193)"> <path d="M50.885,9.42L69.326,39.219L32.444,39.219L50.885,9.42Z" style="fill:none;stroke:black;stroke-width:2.15px;"/> </g> </g> </svg>
Update.
<svg width="100" height="100" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"> <g transform="matrix(1,0,0,1,0,-0.377897)"> <g transform="matrix(1,0,0,1,0.490673,0)"> <circle cx="49.509" cy="63.179" r="22.737" style="fill:none;stroke:black;stroke-width:1.8px;"/> </g> <g transform="matrix(0.837287,0,0,0.838403,7.39456,13.5265)"> <path d="M50.885,9.42L69.326,39.219C69.326,39.219 61.595,32.108 51.566,31.949C40.814,31.778 32.444,39.219 32.444,39.219L50.885,9.42Z" style="fill:none;stroke:black;stroke-width:2.15px;"/> </g> </g> </svg>