aleksandrhovhannisyan.com
aleksandrhovhannisyan.com copied to clipboard
AleksandrHovhannisyan
SVG Tutorial: How to Code SVG Icons by Hand
Excellent tutorial. Helps a lot. But there is a tiny typo in the diagonal LineTo part. The explanation says: “Move to (2, 2) and draw a line 20 units over to the right and 20 units down.” while the provided code draws a 22 unit line down to the bottom-right corner: d=" M 2 2 l 22 22"
@boumboum Nice catch! The rendered version uses 20 (correct), but the code snippet uses 22 (incorrect). I've updated the code snippet to use the correct offset. Thanks for reading!
Hey, I saw a comment by you on a reddit post that pointed to this article, and I almost did what I always do: bookmark it for "later". However, I guess the timing was just right between other projects and I actually started reading.
I'm glad I did! This was a very thorough and clear guide-- I liked the examples and the linked 'additional resources' were of great value too. I never comment on articles but since I suspect I'll keep coming back to this one, I figured I'd especially say thanks!
Wow. Fantastic read. Not only does it clear any mysteries about SVG, it was also fun to go through! Well done pal.
Thank you for this excellent article! It absolutely cleared the fog around svg syntax that was in my mind! If you allow me, I want to translate it to brazilian portuguese, and post it at my blog, with a ping back here. Do I have your permission to do so?
Great tutorial. Today I’m reading your blog posts like reading a book. I’m inspired a lot from your articles. Thank you for all!
Great write up! For the external link icon, could you explain the H 6, V 10, and H 12 commands? I thought those are absolute and require both x and y positions. How does H 6 draw the long horizontal line at the bottom after the first arc?
@raiden6 Sure! So H 6 basically says: "Draw a horizontal line to the x coordinate of 6." This makes the math easier since you don't have to figure out how many units to move to the left and do a relative command of h <displacement>. In this example, it would be identical to doing h -10 because 18 - 10 - 2 = 6 (the two is from the arc). This completes the bottom horizontal piece of the rectangle portion. Here's a fiddle showing both approaches: https://jsfiddle.net/AleksandrHovhannisyan/hrp3xz1q/4/. I've also updated the article to clarify absolute vs. relative commands better.
@AleksandrHovhannisyan Thanks for the update! I was confused in thinking that H and V needed both x and y values. But I get it now. You only need one value (either an x or a y position) since you’re only moving in one direction.
@raiden6 Yup, exactly! H/V are basically shortcuts for L (LineTo) with the other coordinate kept the same. So H is the same as L newX currentY and V is the same as L currentX newY. Similarly, h is the same as l dx 0 and v is the same as l 0 dy.
I was coming to thank you for the superb article, but now that I see how you manage the comments, I have two things to thank you for.
You are elite! :)
