Skip to content
Advertisement

Drawing using SVG icon path [closed]

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>
User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement