How to make my SVG image circle which is currently square with a bored radius.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000pt" height="1000pt" viewBox="0 0 1000 1000" version="1.1">
<defs>
<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="3.475598" y1="1.1821" x2="102.7784" y2="1.1821" gradientTransform="matrix(10.07021,0,0,10.07021,-35.000003,-11.90396)">
<stop offset="0" style="stop-color:rgb(49.803922%,0%,100%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(88.235294%,0%,100%);stop-opacity:1;"/>
</linearGradient>
</defs>
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 783.335938 0 L 209.425781 0 C 55.613281 0 0 53.488281 0 213.285156 L 0 789.226562 C 0 944.03125 55.613281 1000 209.425781 1000 C 209.425781 1000 628.230469 1000 783.335938 1000 C 938.441406 1000 1000 944.03125 1000 789.226562 C 1000 634.421875 1000 213.285156 1000 213.285156 C 1000 53.488281 940.460938 0 783.335938 0 Z M 581.554688 288.144531 L 652 288.144531 L 425.09375 711.855469 L 343.601562 711.855469 M 671.117188 356.039062 L 671.210938 288.625 L 896.488281 466.210938 C 896.164062 487.175781 896.808594 511.339844 896.488281 532.304688 L 671.210938 709.894531 L 671.390625 641.867188 L 856.292969 499.550781 Z M 143.707031 499.550781 L 328.609375 641.867188 L 328.789062 709.894531 L 103.511719 532.304688 C 103.191406 511.339844 103.835938 487.175781 103.511719 466.210938 L 328.789062 288.625 L 328.882812 356.035156 Z M 143.707031 499.550781 "/>
</g>
</svg>CodePudding user response：
I've changed the first part of the paths d attribute:
M 783.335938 0 L 209.425781 0 C 55.613281 0 0 53.488281 0 213.285156 L 0 789.226562 C 0 944.03125 55.613281 1000 209.425781 1000 C 209.425781 1000 628.230469 1000 783.335938 1000 C 938.441406 1000 1000 944.03125 1000 789.226562 C 1000 634.421875 1000 213.285156 1000 213.285156 C 1000 53.488281 940.460938 0 783.335938 0 Z
with a circle like so:
M0,500a500 500 0 0 0 1000 0a500 500 0 0 0-1000 0
The circle begins in the point x:0,y:500: M0,500
has a radius of 500 both on x and y: a500 500
and runs counter-clockwise: a500 500 0 0 0 1000 0
svg{width:200px;}<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" version="1.1">
<defs>
<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="3.475598" y1="1.1821" x2="102.7784" y2="1.1821" gradientTransform="matrix(10.07021,0,0,10.07021,-35.000003,-11.90396)">
<stop offset="0" style="stop-color:rgb(49.803922%,0%,100%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(88.235294%,0%,100%);stop-opacity:1;"/>
</linearGradient>
</defs>
<g id="surface1">
<path id="kk" style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M0,500a500 500 0 0 0 1000 0a500 500 0 0 0-1000 0
M 581.554688 288.144531 L 652 288.144531 L 425.09375 711.855469 L 343.601562 711.855469 M 671.117188 356.039062 L 671.210938 288.625 L 896.488281 466.210938 C 896.164062 487.175781 896.808594 511.339844 896.488281 532.304688 L 671.210938 709.894531 L 671.390625 641.867188 L 856.292969 499.550781 Z M 143.707031 499.550781 L 328.609375 641.867188 L 328.789062 709.894531 L 103.511719 532.304688 C 103.191406 511.339844 103.835938 487.175781 103.511719 466.210938 L 328.789062 288.625 L 328.882812 356.035156 Z M 143.707031 499.550781 "/>
</g>
</svg>