Learning resources¶
Like any other part of the web platform, SVG is a bit fractally complex. There is the SVG format itself, its drawing model, text layout, font rendering, image compositing, and a bunch of fascinating topics. This chapter has links to various places where you can learn about these topics.
The SVG format¶
SVG Tutorial as an advent calendar — 24 short lessons to learn basic SVG features.
Blind SVG — This is the absolute best guide I have found for learning the SVG format gradually. It is designed so that blind and low-vision people can learn to write their own illustrations using SVG, but it is useful for everyone!
SVG tutorial at Mozilla Developer’s Network — Detailed and friendly.
Codepen — lets you paste SVG code in its usual HTML editor and see it rendered immediately. You can also add a CSS stylesheet to experiment with styles.
The text rendering pipeline¶
The journey of a word: how text ends up on a page — talk by Simon Cozens. Talks about peculiarities of different language families, their writing systems, complex text shaping, the OpenType font formats, and how Harfbuzz works. You should absolutely watch this talk!
How Unicode Characters Become Glyphs on Your Screen — similar in spirit to the talk above, but a bit more detailed. Talks about typography terminology, text segmentation, OpenType font features, and text layout in some detail.
The rendering pipeline in Pango — Pango is GNOME’s text layout engine, which librsvg also uses. This is a page from Pango’s documentation, with a high-level overview of the pipeline. You can then research individual terms like itemization, shaping, etc.
Pango, an open-source Unicode text layout engine by Owen Taylor, original author of Pango. This paper is a bit old, but provides a good overview of what Pango does. See also one of the first papers about it, Pango: internationalized text handling.
Complex text layout on Wikipedia
Text directionality — describes how different writing systems use different directionalities, how logical order differs from visual order, and the Unicode directional formatting characters.
Ten years of Harfbuzz by Behdad Esfahbod, the maintainer of Harfbuzz, which provides the text shaping engine for librsvg and GNOME. This talk is mostly history, as it name implies.
State of Text Rendering 2024 — This is a big document; read it casually. It describes all the parts, all the things, all the people, all the projects.
General knowledge¶
Why are 2D vector graphics so much harder than 3D? — a quick history of 2D graphics with lots of links for you to dive into history. The other articles in that blog are incredibly good, by the way.
Porter/Duff Compositing and Blend Modes — how the alpha channel works, the Porter/Duff compositing algebra and operators.