It's a full moon! :) Please don't change your format! It is natural interaction with a bit of tutorial flow. Some of these small bits of information have helped me in the past and even a bit today! Thank you and highlighting the main takeaways would help.
You two are too fun. Its refreshing to see people laughing out loud and enjoying programming. Some people don't know how fun it can be. I also need one of those shirts in my bag in case I get weird at parties.
These parts are fairly simple and straightforward. It's the arcs that always get me. And (afaik) you can't draw a full circle with a single command. A few more things to mention: - If you repeat the same command multiple times, you can just write out the coordinates, you don't need to repeat the letter: "M 10,10 L 30,30 L 30,50, L 50,50, L 50,30" can also be written as "M 10,10 L 30,30, 30,50, 50,50, 50,30" - Except for M. "M 10,10, 30,30" becomes "M 10,10 L 30,30" because another (implicit) M(oveTo) would make no sense here. - If you don't start with a M there's an implied "M0,0". - z/Z means close path aka L(ineTo) start point. - you can write multiple paths in one like d="M10,0, 0,0, 0,10, 10,10 M 20,0, 30,0, 30,10, 20,10z" - You can compact the numbers down to something like "0,3.5.75-4" which is read as "0, 3.5, (0).75, -4"
Some good tips here, thanks! I just wrote some code that generates an SVG path from a series of points, and the "repeated command" thing simplifies it.
* Lea Verou's website has a handy script for converting back and forth between relative and absolute. * Changing a path winding to be anticlockwise inside a clockwise winding creates a hole, so instead of e.g. two layered circles you can create a torus. * SVGs elements embedded inside HTML are not natively empty. You have to supply a closing tag (like script tags with a src). * Consecutive path elements with identical attributes can be combined just by concatenating their "d" attributes. * External SVG files should have an XML declaration but embedded SVGs (both as elements and as base64-encoded data URIs) don't need this.
I can learn much more easily from a natural conversation than just a tutorial which is what I love this series for. And the editing already cuts down the episodes to an acceptable length too.
Thank you! I did enjoy with both of you. So friendly. It feels like little friendly gossips about common friend named Svg Path and talking about how great friend he is. Some little stories from past like "once we were in the park and he found little squirell..." Thank you for this friendly mood!
My bread and butter! I hand-write SVGs all the time-the smugness doesn't last because you wind up doing stupid things like: one time I caught myself 15 minutes into hand-coding a complicated path that would've taken me 2 minutes on Affinity Designer, just because I didn't want to wait 5 seconds for the app to open.
Tons of knowledge and lovely socks to boot, albeit you'll have to wear green ones as a shout back to this episode next time ;) Will definitely use line breaks when explaining my own SVGs moving forward!
HTTP 203 where we come to have a nice time, chat, have a coffee, learn something, and check on Jake's socks. The real question is, what version are they? SOCKS5?
I googled it: Who invented Bézier curves? Pierre Bezier The Bezier curve was a concept developed by Pierre Bezier in the 1970's while working for Renault. The Bezier curve is a parametric curve which is defined by a minimum of three points consisting of an origin, endpoint and at least one control point.
I also love svg for making symbol dictionaries, but there is little tooling to help with that. I end up doing a lot of hand conversions. Although, the last version of Inkscape has a feature to export to simplified format which helps a lot.
I didn't know about the S command, that looks really useful! One thing I wish svg had that I've never found an easy way to do would be more like the actual turtle that I remember from _junior_ school - where you can define an angle and a length, rather than a target location. Would be so much easier than doing trig all the time... Oh, and I only ever do my SVGs by hand. I find that inkscape adds so much unnecassary bloat while simultaneously being very hard to read.
Very cool and informative! However, I have to ask-and perhaps I lack imagination here-what is the real world use-case for understanding and manipulating SVG coordinates manually that design or developer tools couldn’t do better, more easily, and more efficiently? I’m honestly not sure the value of SVG coordinates being human-readable at all, except maybe to make it easier to tweak an already existing animation/drawing. (Not trying to diminish this episode btw. This is one of the most informative and interesting episodes I’ve seen in this series!)
Having clean, human-understandable SVG is particularly important if you want to script it. Eg, the animation here ruclips.net/video/8FuafvJLDpM/видео.html - that would have been a lot harder with generated SVG.
Hi l really like how you tackle every day web problems :) ... I'm quite interested in one html element which seemed to have remained un-improved for a long time (being hard to customize) : the "select box".
Wonderful episode! Entertaining and very helpful! I've definitely learned how to understand this weird code :) Also i've coded this little turtle at school! This was fun and challenging, we had an competition where competitors should draw a picture within given amount of time. I draw a country house with a fence and a tree :D, all coloured!
I could search this, but whatheck, what happens (or can you even) if you use the shorthand for horizontal line and vertical line but absolute versions of them? Do they fallback to relative, do they only get the relative from the missing information? Do they assume 0?
Cassie's shirt fits perfectly with the first 36 seconds of this video 😂 Also, she had drawing robots *at her preschool?* Someone grew up in a rich neighborhood 😂
It's a full moon! :) Please don't change your format! It is natural interaction with a bit of tutorial flow. Some of these small bits of information have helped me in the past and even a bit today! Thank you and highlighting the main takeaways would help.
You two are too fun. Its refreshing to see people laughing out loud and enjoying programming. Some people don't know how fun it can be. I also need one of those shirts in my bag in case I get weird at parties.
These parts are fairly simple and straightforward. It's the arcs that always get me. And (afaik) you can't draw a full circle with a single command.
A few more things to mention:
- If you repeat the same command multiple times, you can just write out the coordinates, you don't need to repeat the letter:
"M 10,10 L 30,30 L 30,50, L 50,50, L 50,30" can also be written as "M 10,10 L 30,30, 30,50, 50,50, 50,30"
- Except for M. "M 10,10, 30,30" becomes "M 10,10 L 30,30" because another (implicit) M(oveTo) would make no sense here.
- If you don't start with a M there's an implied "M0,0".
- z/Z means close path aka L(ineTo) start point.
- you can write multiple paths in one like
d="M10,0, 0,0, 0,10, 10,10 M 20,0, 30,0, 30,10, 20,10z"
- You can compact the numbers down to something like "0,3.5.75-4" which is read as "0, 3.5, (0).75, -4"
Some good tips here, thanks! I just wrote some code that generates an SVG path from a series of points, and the "repeated command" thing simplifies it.
* Lea Verou's website has a handy script for converting back and forth between relative and absolute.
* Changing a path winding to be anticlockwise inside a clockwise winding creates a hole, so instead of e.g. two layered circles you can create a torus.
* SVGs elements embedded inside HTML are not natively empty. You have to supply a closing tag (like script tags with a src).
* Consecutive path elements with identical attributes can be combined just by concatenating their "d" attributes.
* External SVG files should have an XML declaration but embedded SVGs (both as elements and as base64-encoded data URIs) don't need this.
Awesome video, entertaining, informative, I felt like I was having fun AND learning at the same time. SVGS FOR ALL
I can learn much more easily from a natural conversation than just a tutorial which is what I love this series for. And the editing already cuts down the episodes to an acceptable length too.
Thank you! I did enjoy with both of you. So friendly. It feels like little friendly gossips about common friend named Svg Path and talking about how great friend he is. Some little stories from past like "once we were in the park and he found little squirell..."
Thank you for this friendly mood!
My bread and butter! I hand-write SVGs all the time-the smugness doesn't last because you wind up doing stupid things like: one time I caught myself 15 minutes into hand-coding a complicated path that would've taken me 2 minutes on Affinity Designer, just because I didn't want to wait 5 seconds for the app to open.
This video is far better than any other svg learning resources.
I just love the turtle example
Tons of knowledge and lovely socks to boot, albeit you'll have to wear green ones as a shout back to this episode next time ;)
Will definitely use line breaks when explaining my own SVGs moving forward!
HTTP 203 where we come to have a nice time, chat, have a coffee, learn something, and check on Jake's socks. The real question is, what version are they? SOCKS5?
x1 x2 always gives me the panic as I expect it to be x0 and x1 (as well as the y's)
Awesome work you two, that was fun. Oh that all code would taught like this.
A really good episode.
I like turtles and SVG... This video has both! :)
Awesome, really really great. That was the best SVG explanation ever thank you!
Mind blown. The hint on the first relative point is brilliant! LOVE SVG!
For the first time i really understand svgs
This is great to hear!
This was an excellent episode, I learned so much!
to just slightly brag: i manually edited an svg without looking up or knowing beforehand how svgs work ^^
I googled it: Who invented Bézier curves?
Pierre Bezier
The Bezier curve was a concept developed by Pierre Bezier in the 1970's while working for Renault. The Bezier curve is a parametric curve which is defined by a minimum of three points consisting of an origin, endpoint and at least one control point.
I also love svg for making symbol dictionaries, but there is little tooling to help with that. I end up doing a lot of hand conversions.
Although, the last version of Inkscape has a feature to export to simplified format which helps a lot.
I often think of Inkscape as the only true SVG editor, as its internal format is fully SVG-compatible
10:10 looks like it's the marriage between LOGO and Assembler 😅
Finally, svg paths make sense now... Thank you guys!
Nice. Thanks for sharing.
Wow, I had no idea that svg paths could be read, I. always looked at it as some hodge-podge) Thanks a lot!
I didn't know about the S command, that looks really useful!
One thing I wish svg had that I've never found an easy way to do would be more like the actual turtle that I remember from _junior_ school - where you can define an angle and a length, rather than a target location. Would be so much easier than doing trig all the time...
Oh, and I only ever do my SVGs by hand. I find that inkscape adds so much unnecassary bloat while simultaneously being very hard to read.
Regarding the relative/absolute command thing, couldn't changing or animating the viewBox parameter work for translating the path around?
FYI tools often remove line-breaks in attributes.
I hand-code SVGs all the time. Have done many hundreds I would estimate.
Pierre Bézier, the name should be a hint I guess ( well he could be Canadian, or Belgian, or Swiss ... 😌)
Very cool and informative!
However, I have to ask-and perhaps I lack imagination here-what is the real world use-case for understanding and manipulating SVG coordinates manually that design or developer tools couldn’t do better, more easily, and more efficiently? I’m honestly not sure the value of SVG coordinates being human-readable at all, except maybe to make it easier to tweak an already existing animation/drawing.
(Not trying to diminish this episode btw. This is one of the most informative and interesting episodes I’ve seen in this series!)
Having clean, human-understandable SVG is particularly important if you want to script it. Eg, the animation here ruclips.net/video/8FuafvJLDpM/видео.html - that would have been a lot harder with generated SVG.
That was great! Thank you. really.
Hi l really like how you tackle every day web problems :) ... I'm quite interested in one html element which seemed to have remained un-improved for a long time (being hard to customize) : the "select box".
I loved it! Super informative! Thanks!
Wonderful episode! Entertaining and very helpful! I've definitely learned how to understand this weird code :) Also i've coded this little turtle at school! This was fun and challenging, we had an competition where competitors should draw a picture within given amount of time. I draw a country house with a fence and a tree :D, all coloured!
I could search this, but whatheck, what happens (or can you even) if you use the shorthand for horizontal line and vertical line but absolute versions of them? Do they fallback to relative, do they only get the relative from the missing information? Do they assume 0?
If you do "H30" then it'll draw the line to x:30 and whatever the y was previously
@@jakearchibald oh, nice, thanks man, u r such an MVP :)
Cassie's shirt fits perfectly with the first 36 seconds of this video 😂 Also, she had drawing robots *at her preschool?* Someone grew up in a rich neighborhood 😂
I should have asked about the school dinners. Foie gras in a ribena jus, I bet.
Yeah - the shirt is definitely a disclaimer.
@@jakearchibald Sadly just lumpy custard and soggy chips like everyone else.
@@cassieevans7929 Soggy chips?? Oh what I'd have given to have soggy chips, that would have been a treat etc etc
@@cassieevans7929 Where was your infant school?
Wow, interesting!
The secret is the socks!! Awesome!!!
Please replace those heinous orange circle lights which Surma labelled as WiFi setup
Fancy infant school )) Sometimes Safari doesn't understand SVG elements with line brakes, e.g. color matrix on filter.
This is amazing
Is there an svg-prettier?
Golden avocado lamps
I like Cassie!
Is it me or a lot of people are talking about bezier curves these days
Are these two brother sister?
Nice socks
Thumbs up if the logo you are working has a lot of clipping mask and gradient.
I really want to watch these to be informed but the banter is so distracting and takes away from the actual value. 😭😭😭