Recently, I was looking for a SVG icon which I couldn't find with some of the icon providers. I tried prompting ChatGPT to come up with the SVG code, I got the SVG code which was, well, close to 1% of what I asked for. And, a whileback I watched a 100 seconds video from Jeff Delaney on SVGs and thought of giving it a try back then and it remained a thought till the time came.
404: Part where SVG is explained with its advantages over some other formats. But if you have the time and will, then go ahead.
SVG provides some basic shapes like circle
, rectangle
, eclipse
and polygon
. While it comes to complex shapes we'll take path's help. It is possible to compose any possible shape with just path
.
While I was reading about SVG, I wanted to give it a try with something not regular to test it out and was thinking of designing a human standing and wanted it to be a silhouette to get away with not working on the details. Started thinking of making a silhouette of a recognizable figure and Rajnikanth's silhouette is one that is easily recognizable and strongly registered (for Tamilians at least).
Disclaimer: Kindly bear with my (lack of) artistic skills.
I designed it with the use of path
which has a few line commands like Move to M x y
and Line to L x y
and a few curve commands like Bezier Curves C x1 y1, x2 y2, x y
and Arcs A rx ry x-axis-rotation large-arc-flag sweep-flag x y
.
In this case, I've used Move to, Line to and Arcs to complete the design.
- In a ~75 x 100 space, I've started with bottom left with
M20 99.5
and ended up almost at that point withL19.5 99.5
command. - If there are multiple
path
or other shape elements which has a similar styling properties likefill
,stroke
andstroke-width
,<g>
tag can be used to group them.
<g fill="black" stroke="black" stroke-width="1">
<path d="M20 90 ...">
<circle cx="50" cy="50" r="10">
</g>