Introduction to Vector Graphics Rendering

This video covers the basics of vector graphics:
- How vector images are defined.
- Filling vector shapes.

Some next steps:
- Write a faster rasterizer by reusing previous pixel winding calculations.
- Fill pixels in an image instead of printing to the console.
- Anti-aliasing & more robust maths.
- Bezier curves & flattening them to line segments.
- Stroke paths by "offsetting" them.

[leddoo]

some things i forgot to mention in the video:


2) "curved paths" can be rendered by first converting them to line segments, and then using the algorithm in the video - but ideally you'd use a faster one :P

[ArtanisOwns]

absolutely blew my mind when you used inspect element on an image file. wow

[theshoveldev]

This video is a really good introduction to vector graphics! I use svgs a lot in my projects and I can give this video Jodie's badge of approval :)

[gesprengt]

Wow I really love this introduction. You manage to give a good overview of the different capabilities and implementation details of vector graphics. I especially adored the simple rust code to underpin what you explained. I would love to see a video on some of the optimization ideas you mentioned in the description, maybe also with hints towards how this is implemented in running systems such as in a browser (i.e. what does the GPU do, what libraries do the heavy lifting).

[bythealphabet]

Thank you very good explanation, can you continue with these lessons?