Right-to-Left Text in SVG
SVG text elements support the direction and unicode-bidi CSS properties to correctly render right-to-left scripts.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Setting direction and unicode-bidi on SVG Text
Applying direction: rtl along with unicode-bidi: bidi-override to an SVG text element tells the browser to render the text's characters in right-to-left order, which is necessary for correctly displaying Arabic, Hebrew, and other right-to-left scripts within an otherwise left-to-right document.
- direction: rtl combined with unicode-bidi: bidi-override enables correct rendering
- Necessary for correctly displaying Arabic, Hebrew, and other RTL scripts
- Applies even within an otherwise left-to-right document's overall layout
Positioning Considerations for RTL SVG Layouts
Beyond text direction itself, a fully right-to-left SVG layout often needs the positions of related elements like icons or decorative flourishes mirrored to match reading direction, which typically requires either a separate RTL-specific SVG variant or a horizontal transform applied conditionally.
- A fully RTL layout often needs related element positions mirrored to match
- Icons and decorative flourishes may need to flip to match reading direction
- Typically requires either a separate RTL variant or a conditional transform
Frequently Asked Questions
Does setting direction: rtl alone make SVG text render correctly?
Often it needs to be combined with unicode-bidi: bidi-override to reliably force right-to-left character rendering in SVG, since browser handling can vary otherwise.
Do icons and decorative elements need to change for an RTL SVG layout?
Often yes, since matching the mirrored reading direction typically requires flipping the position of related icons or flourishes, either via a separate variant or a transform.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG