My First Handmade SVG Image: A Person Icon With A Transparent Background...

This is very off-topic, but, I wanted to share. For the link to my about page, I wanted a person icon with a transparent background. I had tried a conventional image format like PNG, but, I really wanted an icon that remained crisp at different resolutions. SVG seemed to be the format of choice for such things. I needed a generic person icon of my very own in SVG format and with so much AI-generated slop begging for link backs, I decided to try my hand at making my own. After a bit of tinkering on CodePen, I came up with my person icon.

An SVG file is just a text file that describes how to draw whatever it it that you want to draw. In this case, a circle and a closed rounded path (arc). I wanted my person to be just an outline, so, fill is set to none. The stroke value controls the color of the lines and the thickness of the lines is controlled with the stroke-width value. I have the line width somewhat heavy because I intend to scale the image down to 32x32. Within the bounds of my SVG file, all of the measurements assume an image size of 512x512 -- that's the viewbox setting, but, when I display the SVG on this page, I set the width and height to 200x200. Feel free to use this as you see fit.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
<circle cx="256" cy="130" r="100" style="fill:none;stroke-width:40px;stroke:black;"><circle />
<path d="M 30 492 A 256 350 0 0 1 482 492 Z" style="fill:none;stroke-width:40px;stroke-linecap:round;stroke-linejoin:round;stroke:black;"></path>
</svg>

The circle is centered at 256x130 and its radius is 100. The path starts at the lower left corner at (M) 30x492, the arc (A) goes from (M) and passes through a point in the middle of my drawing box at 256x350 and continues on to a point on the opposite side (lower right) at 482x492. The drawing box is 512x512, but, because my lines are thick, I moved the starting and ending points away from the edges a bit. The (Z) at the end indicates that the two end points should be connected by a straight line. If you want an open body, just remove the (Z). In the arc (A) section, 0 0 1, influence the shape of the arc -- lopsided, flat, inverted, etc... I didn't need anything fancy, so I left it at 0 0 1. I wanted the ends of the arc to be rounded rather than pointy, so, I added stroke-linecap:round; and stroke-linejoin:round; to the inline style.

Copy and paste the code above either as raw HTML in your posts (must be in HTML view rather than Compose view) or copy and paste to a plain text file and change the extension to SVG. Then, you can use it as you would any other image. Not all photo editors can view or edit SVG files directly. Use at your own discretion.

Note that I've closed the circle and path with explicit closing tags. That's not strictly necessary as long as the tag itself is closed and there are no child elements within either, but, the Blogger editor insisted that I do it that way or it would threaten to mangle my code. Also, although the SVG image displays in a browser, the Blogger editor doesn't display the image in Compose mode -- you'll need to use Preview to see the rendered SVG.