SVG Tutorial: How to Code SVG Icons by Hand

[devame]

Excellent post! Thank you.

[ResetPress]

incredible tutorial! This is getting starred

[boumboum]

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"

[AleksandrHovhannisyan]

@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!

[Gazook89]

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!

[AleksandrHovhannisyan]

Really glad to hear that, thank you!

[AsafAgranat]

Wow. Fantastic read. Not only does it clear any mysteries about SVG, it was also fun to go through! Well done pal.

[israelss]

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?

[Yash-Sharma2002]

Is is very helpful thanx for sharing that post.

[muratcorlu]

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!

[raiden6]

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?

[AleksandrHovhannisyan]

@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.

[raiden6]

@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.

[AleksandrHovhannisyan]

@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.

[ghost]

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! :)

[Mohammed-Gamal]

Great post, really helpful, appreciate your efforts!

[Runanka]

I want to add something to the arc formula. The rx and ry value are not radius in x direction and radius in y direction, instead it is the MINIMUM radius in x direction and MINIMUM radius in y direction. For eg, "M 0 0 a 50 50 0 0 0 100 0" will draw a semi-circle of radius 50, that has a starting point (0,0) and ending point (100,0), and "M 0 0 a 50 50 0 0 0 200 0" will draw a semi-circle of specified radius 50 but originally the radius will be 100, because the semi-circle has a starting point (0,0) and ending point (200,0), so the distance between them (also diameter) is 200 and the radius is 100. Hence rx and ry is the MINIMUM radius, not the absolute radius. The SVG will prioritize the end points over the radius.