SVG Tutorial: How to Code SVG Icons by Hand about aleksandrhovhannisyan.com HOT 14 OPEN

Excellent post! Thank you.

from aleksandrhovhannisyan.com.

incredible tutorial! This is getting starred

from aleksandrhovhannisyan.com.

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!

from aleksandrhovhannisyan.com.

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

from aleksandrhovhannisyan.com.

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!

from aleksandrhovhannisyan.com.

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

from aleksandrhovhannisyan.com.

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"

from aleksandrhovhannisyan.com.

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

from aleksandrhovhannisyan.com.

Really glad to hear that, thank you!

from aleksandrhovhannisyan.com.

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?

from aleksandrhovhannisyan.com.

Is is very helpful thanx for sharing that post.

from aleksandrhovhannisyan.com.

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?

from aleksandrhovhannisyan.com.

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

from aleksandrhovhannisyan.com.

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

from aleksandrhovhannisyan.com.