Support path attribute on SVG <textPath> element

concepts

1. Inline Path Text

   Side-by-side comparison of the old <defs>-based approach versus the new inline path attribute. Same visual output, far less ceremony.

2. Path Text Builder

   Live editor: type a message and drag cubic-bezier control points — the SVG path data updates in real time and text flows along your custom curve.

3. Animated Text Path

   Text flowing continuously along animated SVG paths — wave, circle, arch, zigzag, and loop shapes. Adjust font size and scroll speed, and the inline path attribute updates live so no <defs> rewrite is needed.

4. Text on Path Generator

   Choose from 6 preset path curves (wave, arch, circle, S-curve, zigzag, spiral), then dial in font size, start offset, text side, and font family. The SVG updates live using the inline path attribute. Side-by-side comparison with the old <defs>-based approach and an SVG export button.

5. Compatibility Lab

   Detects the inline path attribute on <textPath> via DOM inspection. Side-by-side rendering comparison of new <textPath path="…"> versus the classic <textPath href="#id"> approach. Provides a detection helper function and a unified makeTextPath() factory that uses whichever method the browser supports.

why it shipped

SVG 1.1 required the text path to be declared as a separate <path> element — usually tucked away inside <defs> — and then referenced by ID. This two-step ceremony makes dynamic and template-generated SVG cumbersome: you need to mint a unique ID, inject the path element, and keep the href in sync. Every major browser except Chrome had already implemented the path attribute defined in SVG 2, which lets you embed the path data directly on <textPath> itself. Chrome 147 closes that interoperability gap.

references

• ChromeStatus entry
• SVG 2 spec — textPath path attribute
• Chrome 147 release notes