How do I set SVG writing-mode to vertical?

Pick vertical-rl, vertical-lr, or tb, then click Set vertical. The value is written on every and . Same value again is a no-op.

How is vertical writing-mode different from rotating 90 degrees?

Rotate element 90° wraps a transform around the drawing. writing-mode changes how the text layout engine stacks glyphs. Paths and shapes are not rotated.

What is the difference between vertical-rl, vertical-lr, and tb?

vertical-rl puts the next line to the left of the first (Two left of One in the sample). vertical-lr puts it to the right. tb is the SVG 1.1 name for the same job as vertical-rl.

Does vertical writing-mode outline or rotate letters into a path?

No. Convert SVG Text to Path outlines. This page keeps editable text and only writes writing-mode.

Set SVG writing-mode vertical — Free Tool

FAQ

Quick answers

How do I set SVG writing-mode to vertical?: Pick vertical-rl, vertical-lr, or tb, then click Set vertical. The value is written on every <text> and <tspan>. Same value again is a no-op.
How is vertical writing-mode different from rotating 90 degrees?: Rotate element 90° wraps a transform around the drawing. writing-mode changes how the text layout engine stacks glyphs. Paths and shapes are not rotated.
What is the difference between vertical-rl, vertical-lr, and tb?: vertical-rl puts the next line to the left of the first (Two left of One in the sample). vertical-lr puts it to the right. tb is the SVG 1.1 name for the same job as vertical-rl.
Does vertical writing-mode outline or rotate letters into a path?: No. Convert SVG Text to Path outlines. This page keeps editable text and only writes writing-mode.

Rotate element 90° → Set dominant-baseline → Text direction → Set text-anchor →

Privacy Terms

Source

Mode

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Set SVG writing-mode vertical

Live preview