To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element.


<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- to hide the path, it is usually wrapped in a <defs> element -->
  <!-- <defs> -->
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <!-- </defs> -->

    <textPath href="#MyPath">Quick brown fox jumps over the lazy dog.</textPath>



The URL to the path or basic shape on which to render the text. If the path attribute is set, href has no effect. Value type: <URL> ; Default value: none; Animatable: yes


Where length adjustment should be applied to the text: the space between glyphs, or both the space and the glyphs themselves. Value type: spacing|spacingAndGlyphs; Default value: spacing; Animatable: yes


Which method to render individual glyphs along the path. Value type: align|stretch ; Default value: align; Animatable: yes

path Experimental

The path on which the text should be rendered. Value type: <path_data> ; Default value: none; Animatable: yes

side Experimental

Which side of the path the text should be rendered. Value type: left|right ; Default value: left; Animatable: yes


How space between glyphs should be handled. Value type: auto|exact ; Default value: exact; Animatable: yes


How far the beginning of the text should be offset from the beginning of the path. Value type: <length>|<percentage>|<number> ; Default value: 0; Animatable: yes


The width of the space into which the text will render. Value type: <length>|<percentage>|<number> ; Default value: auto; Animatable: yes

Usage context

CategoriesText content element, Text content child element
Permitted contentCharacter data and any number of the following elements, in any order:
Descriptive elements
<a>, <animate>, <set>, <tref>, <tspan>


Scalable Vector Graphics (SVG) 2
# TextPathElement

Browser compatibility

BCD tables only load in the browser