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.
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.
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!
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.
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.
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 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.
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.
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!
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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-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".
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 😂