Demystifyingish SVG paths | HTTP 203

Cassie Evans (from Greensock) chats to Jake about SVG paths, and what that mess of letters and numbers actually means.
The logo turtle demo → goo.gle/3IyzSXT
More videos in the HTTP 203 series → goo.gle/HTTP203
Subscribe to Google Chrome Developers here → goo.gle/ChromeDevs
Also, if you enjoyed this, you might like the HTTP203 podcast → goo.gle/HTTP203Podcast
#HTTP203 #ChromeDeveloper #WebDev

[@sheriffderek]

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.

[@androidgott]

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.

[@gingerchris]

Awesome video, entertaining, informative, I felt like I was having fun AND learning at the same time. SVGS FOR ALL

[@lexer_]

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.

[@pooya5286]

I just love the turtle example

[@alexfrozen]

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!

[@dansoper]

A really good episode.

[@thomasersosi4595]

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"

[@jakearchibald]

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.

[@NicholasShanks]

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

[@UliTroyo]

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.

[@TheRealCAPerry]

Awesome work you two, that was fun. Oh that all code would taught like this.

[@alystair]

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!

[@dailymeow3283]

For the first time i really understand svgs

[@cassieevans7929]

This is great to hear!

[@urbaniv]

Awesome, really really great. That was the best SVG explanation ever thank you!

[@Dygear]

This was an excellent episode, I learned so much!

[@BrettCooper4702]

x1 x2 always gives me the panic as I expect it to be x0 and x1 (as well as the y's)

[@DennisJ42]

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?

[@murtuzaalisurti]

This video is far better than any other svg learning resources.

[@rowolta]

Nice. Thanks for sharing.

[@jonathan-._.-]

to just slightly brag: i manually edited an svg without looking up or knowing beforehand how svgs work ^^

[@anastasiiasolop6653]

Wow, I had no idea that svg paths could be read, I. always looked at it as some hodge-podge) Thanks a lot!

[@JacobCanote]

Mind blown. The hint on the first relative point is brilliant! LOVE SVG!

[@someone9493]

Finally, svg paths make sense now... Thank you guys!

[@tomasvidal424]

I loved it! Super informative! Thanks!

[@antonchinaev3495]

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.

[@jakearchibald]

I often think of Inkscape as the only true SVG editor, as its internal format is fully SVG-compatible

[@fabiocroldan]

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.

[@vitabramov89]

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!

[@nir8924]

10:10 looks like it's the marriage between LOGO and Assembler 😅

[@mc-ty4br]

That was great! Thank you. really.

[@matosvolny8327]

I like turtles and SVG... This video has both! :)

[@LeeSmith-cf1vo]

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.

[@marcellerusu3773]

This is amazing

[@NicholasShanks]

I hand-code SVGs all the time. Have done many hundreds I would estimate.

[@haidubogdan8712]

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

[@Mishra_kum]

Wow, interesting!

[@whycouldntthebicyclestandup]

Regarding the relative/absolute command thing, couldn't changing or animating the viewBox parameter work for translating the path around?

[@amstevenson]

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

[@jakearchibald]

Having clean, human-understandable SVG is particularly important if you want to script it. Eg, the animation here kzbin.info/www/bejne/bnfYkpmsf7F3pq8 - that would have been a lot harder with generated SVG.

[@IceMetalPunk]

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 😂

[@jakearchibald]

I should have asked about the school dinners. Foie gras in a ribena jus, I bet.

[@cassieevans7929]

Yeah - the shirt is definitely a disclaimer.

[@cassieevans7929]

@@jakearchibald Sadly just lumpy custard and soggy chips like everyone else.

[@jakearchibald]

@@cassieevans7929 Soggy chips?? Oh what I'd have given to have soggy chips, that would have been a treat etc etc

[@NicholasShanks]

@@cassieevans7929 Where was your infant school?

[@GetMeCoding]

The secret is the socks!! Awesome!!!

[@vhoyer]

I like Cassie!

[@vhoyer]

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?

[@jakearchibald]

If you do "H30" then it'll draw the line to x:30 and whatever the y was previously

[@vhoyer]

@@jakearchibald oh, nice, thanks man, u r such an MVP :)

[@Nerwesta]

Pierre Bézier, the name should be a hint I guess ( well he could be Canadian, or Belgian, or Swiss ... 😌)

[@chinmayk8004]

Please replace those heinous orange circle lights which Surma labelled as WiFi setup

[@black-snow]

Golden avocado lamps

[@davidmaxwaterman]

Is there an svg-prettier?

[@avilde]

Fancy infant school )) Sometimes Safari doesn't understand SVG elements with line brakes, e.g. color matrix on filter.

[@mmahgoub]

Is it me or a lot of people are talking about bezier curves these days

[@whatthefunction9140]

Are these two brother sister?

[@MarcelRobitaille]

Nice socks

[@PhantomHarlock78]

Thumbs up if the logo you are working has a lot of clipping mask and gradient.

[@LorenzDominique]

I really want to watch these to be informed but the banter is so distracting and takes away from the actual value. 😭😭😭