How do I set SVG text direction?

Pick ltr or rtl and click Set direction. The value is written on every and . rtl also sets unicode-bidi to bidi-override so the character order flips.

How is text direction different from reversing a path?

Reverse path direction rewrites path d (and fill-rule winding). This page never touches d. Invert gradient direction only flips gradient stops/vector.

Why does rtl set unicode-bidi?

direction=rtl alone often just right-aligns a Latin run. unicode-bidi=bidi-override forces the visual order right-to-left. ltr writes unicode-bidi=normal.

Does direction flip the whole SVG including paths?

No. Only text and tspan get direction / unicode-bidi. Shapes, strokes, and viewBox stay.

SVG text direction — Free Tool

FAQ

Quick answers

How do I set SVG text direction?: Pick ltr or rtl and click Set direction. The value is written on every <text> and <tspan>. rtl also sets unicode-bidi to bidi-override so the character order flips.
How is text direction different from reversing a path?: Reverse path direction rewrites path d (and fill-rule winding). This page never touches d. Invert gradient direction only flips gradient stops/vector.
Why does rtl set unicode-bidi?: direction=rtl alone often just right-aligns a Latin run. unicode-bidi=bidi-override forces the visual order right-to-left. ltr writes unicode-bidi=normal.
Does direction flip the whole SVG including paths?: No. Only text and tspan get direction / unicode-bidi. Shapes, strokes, and viewBox stay.

Reverse path direction → Vertical writing-mode → Set text-anchor → Invert gradient direction →

Privacy Terms

Source

Dir

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

SVG text direction

Live preview