In Inkscape, select the path, and use the Reverse option in the Path menu. This assumes that the path is a compound path (Object → Compound Path → Make). In Adobe Illustrator, there is a Reverse Path Direction command in the application’s Attributes panel (you may have to use Show Options in the top right corner of the panel to see the path direction controls). If your path is in the wrong direction, your graphics editor can reverse it for you: In either case, it is possible to end up with upside-down letters. If the path is counter-clockwise, the text will be on the inside. If your paths have a clockwise winding order, the text will be on the outside of the shape. The text will proceed along the path in the direction the path is drawn in the code. If a counter-clockwise circle or ellipse is all you need, Dan Hansen’s neat little JavaScript tool to grab the equivalent path data. In some editors, including Illustrator, moving any point on a regular shape, even slightly, will also convert it into a path. In Illustrator, use Object → Compound Path → Make in Inkscape, use Path → Object to Path.

Most visual editors have tools to convert the shape into a path. If you have a basic shape, and want to convert it to a without having to code or draw it one point at a time, there are various tools you can use:

This can be somewhat frustrating, as they (along with ellipses) are the most common shapes people want to wrap text around. In SVG 1.1 (and all existing browsers), the “path” used by a layout must truly be a element: you can’t yet make text ride a or. Book Home Chapter 7 Summary All Online Extras Perfecting Paths for Using SVG with CSS3 and HTML5 - Supplementary Material Using SVG with CSS3 and HTML5 - Supplementary MaterialĮxample code and online extras for the O'Reilly Media book by Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey.

Put svg text on path inkscape