Demystifying SVG2 Text Layout: Understanding Librsvg

Prerequisite

Hi! I’m Anointing, your friendly neighborhood software engineer. I’m an Outreachy GNOME intern currently working on the project titled “Implement the SVG2 Text Layout Algorithm in Librsvg.”

In a previous blog post, I briefly introduced my project and tasks. If you missed it, don’t worry—this article dives deeper into the project and the specific task I’m working on.


What is Librsvg?

Librsvg is a lightweight library used to render Scalable Vector Graphics (SVGs), primarily within GNOME projects. It has been around since 2001, initially developed to handle SVG icons and graphical assets for GNOME desktops. Over the years, it has evolved into a versatile tool used for various SVG rendering needs.


What is SVG2?

Before understanding SVG2, let’s break down SVG (Scalable Vector Graphics):

  • SVG is an XML-based format for creating two-dimensional graphics.
  • Unlike raster images (e.g., JPEG or PNG), SVG images are scalable, meaning they retain quality regardless of size.
  • They are widely used for web graphics, illustrations, icons, and more because of their scalability and efficiency.

SVG2 (Scalable Vector Graphics, version 2) is the latest update to the SVG standard, developed by the World Wide Web Consortium (W3C). It builds upon SVG 1.1 with new features, bug fixes, and enhancements to make SVG more powerful and consistent across modern browsers.


Librsvg’s Current State

Librsvg supports some parts of the SVG 1.1 specifications for text, including bidirectional text. However, advanced features like per-glyph positioning or text-on-path are not yet implemented.

The SVG2 specification introduces significant improvements in text layout, such as:

  • Fine-grained glyph positioning
  • Support for right-to-left and bidirectional text
  • Vertical text layout
  • Text-on-path
  • Automatic text wrapping

Currently, librsvg does not fully implement SVG2’s comprehensive text layout algorithm. My role is to help improve this functionality.


My Role: Implementing the SVG2 Text Layout Algorithm

If the above sounds technical, don’t worry—I’ll explain the key tasks in simpler terms.

1. Support for Basic Text Layout

This involves ensuring that text in SVG images appears correctly. Imagine a digital poster: every word and letter must be precisely positioned. My task is to make sure librsvg can handle this properly.

2. Whitespace Handling

Whitespace refers to the blank space between words and lines. In SVG, whitespace is standardized—extra spaces should not disrupt the layout. I’m implementing an algorithm to handle whitespace effectively.

3. Left-to-Right (LTR) and Right-to-Left (RTL) Languages

Languages like English are read from left to right, while Arabic or Hebrew are read from right to left. Librsvg must handle both correctly using a process called the Bidi (Bidirectional) algorithm.

4. Inter-Glyph Spacing

In SVG, attributes like x, y, dx, and dy allow precise control over letter spacing. This ensures text looks balanced and beautiful. Additionally, this task involves handling ligatures (e.g., combining characters in Arabic) to ensure the output is correct.

5. Text-on-Path Handling (If Time Permits)

This feature allows text to follow a specific shape, like a circle or wave. It’s a fancy but useful way to add artistic effects to SVGs.


Why Does This Matter?

Improving librsvg’s text layout makes it more powerful and accessible for designers, developers, and artists. Whether creating infographics, digital posters, or interactive charts, these enhancements ensure that text renders beautifully in every language and style.


Tips for Newbies

If you’re new to SVG, text layout algorithms, or even Rust (the programming language used in librsvg), here’s what you need to know:

  • Skills Needed: Communication, basic Rust programming, and familiarity with terms like shaping, bidi algorithm, glyphs, ligatures, and baselines.
  • Start Small: Focus on one concept at a time—there’s no need to know everything at once.
  • Resources: The GNOME librsvg project is beginner-friendly and a great way to dive into open-source contributions.

Resources for Learning and Contributing


Wrapping Up

These tasks may seem technical, but they boil down to making librsvg a better tool for rendering SVGs. Whether it’s neat text placement, handling multiple languages, or adding artistic text effects, we’re improving SVG rendering for everyone.

So far, this project has been a journey of immense learning for me—both in technical skills like Rust programming and soft skills like clear communication.

In future posts, I’ll explore SVG2, librsvg features, and text layout terminologies in greater detail. Stay tuned!

Feel free to ask questions or share your thoughts. I’d love to hear from you and see you in the next chapter—cheers!! 😊🎉

Everybody Struggles: Struggles, Lessons And Growth

tanjiro struggling to pushing the boulder

 

 

 


Prerequisite

I have been an Outreachy GNOME intern for a while now. GNOME is a free and open-source desktop environment for Linux and similar systems. It consists of quite a number of projects that make up the entire overall system, and the one I am working on for my internship is Librsvg.

About Librsvg: It is a small library to render Scalable Vector Graphics (SVGs) associated with GNOME projects.

Struggles

Initially, my struggle was with the programming language because Rust wasn’t my primary language before I started the internship. This led to the struggle of understanding the codebase. But let’s be honest, it’s written in Rust, and it takes quite some time to fully onboard. Luckily, my internship is centered around implementations to handle the SVG2 text layout algorithm. Plus, a programming language is just a tool to get the job done and should not be a hindrance if you are willing to learn and put in the work.

During the course of the internship, I have also struggled with some domain-specific terminologies like Bi-di, glyphs, and how the existing program handles SVGs such as nested Bi-di and rendering. The struggle of understanding domain terminologies and how the program executes is natural. The steps to overcoming those struggles are crucial for growth and development.

What stood out towards helping me understand these struggles is the guidance of my mentor, Federico. We set up regular meetings, and whatever is discussed is noted in our shared pad for future reference and documentation. He also made it easy for me to ask questions by making it clear that “no question is too dumb to ask,” and he never takes offense when I re-ask a question he has already answered and I forgot.

In our last meeting, he said something that stuck with me. When I told him a particular task felt overwhelming, he said, “I understand you; it is expected to be overwhelming to anyone,” with a big smile. His understanding and patience have been instrumental in my progress and Federico’s encouragement to ask any question, no matter how small, has been invaluable in building my confidence.

Tackling Tasks

I have completed a few tasks, and the way I approach them is by tackling them head-on. I do research where required and push for review. Never underestimate the power of reviews toward the completion of a task.

Overall, keep an open mind, be ready to learn, and always ask questions. If you have bad memory like mine, write things down as they come.

Final Thoughts

Keep in mind that struggles are part of the journey. You cannot run or shy away from what needs to be done, so why not just do it in time and have the rest of the time to understand your mistakes, reiterate on them, overcome them, and tag it as a win for yourself and a story to share with others.

Looking forward to sharing more of my internship progress with you soon!

See you in the next chapter—cheers!