Skip to main content Link Search Menu Expand Document (external link)

<text> : The SVG Text Element

The <text> element is used to render text content in SVG graphics. It provides precise positioning and styling control for labels, annotations, and textual information within vector graphics and charts.

Summary

The <text> element enables the display of text at specific coordinates within an SVG coordinate system. It supports standard font styling, fill colors, transformations, and text anchoring for flexible positioning. Text can contain plain content or be structured with nested <tspan> elements for advanced formatting.

Key features:

  • Precise x, y coordinate positioning
  • Font family, size, and style control
  • Text anchoring (start, middle, end)
  • Baseline alignment options
  • Fill colors and transformations
  • Support for nested tspan elements
  • Data binding for dynamic text content

Usage

The <text> element is placed within an SVG container and positioned using x and y coordinates:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
    <text x="10" y="30" font-family="Arial" font-size="16" fill="#333">
        Hello, World!
    </text>
</svg>

Basic Syntax 

<!-- Simple text at coordinates -->
<text x="50" y="50">Label Text</text>

<!-- With styling attributes -->
<text x="100" y="75" font-family="Helvetica" font-size="14" fill="blue">
    Styled Text
</text>

<!-- With text-anchor alignment -->
<text x="150" y="100" text-anchor="middle" fill="#336699">
    Centered Text
</text>

<!-- With transformation -->
<text x="50" y="50" transform="rotate(45 50 50)" fill="red">
    Rotated Text
</text>

Supported Attributes

Position Attributes

Attribute Type Description Default
x Unit Horizontal position of the text baseline start 0
y Unit Vertical position of the text baseline 0
dx Unit Relative horizontal offset from current position 0
dy Unit Relative vertical offset from current position 0

Text Alignment Attributes

Attribute Type Description Default
text-anchor Enum Horizontal alignment: start, middle, end start
dominant-baseline Enum Vertical baseline alignment: auto, middle, hanging, central auto

Font Attributes

Attribute Type Description Default
font-family FontSelector Font family name or list System default
font-size Unit Font size 12pt
font-weight Integer Font weight (100-900) 400
font-style Enum Font style: normal, italic, oblique normal

Appearance Attributes

Attribute Type Description Default
fill Color/URL Fill color or paint server reference black
fill-opacity Double Fill opacity (0.0-1.0) 1.0
stroke Color Stroke color for text outline none
stroke-width Unit Width of text stroke 0

Text Formatting Attributes

Attribute Type Description Default
text-decoration String Text decoration: none, underline, overline, line-through none
letter-spacing Unit Additional spacing between characters 0
textLength Unit Target length for text rendering auto
lengthAdjust Enum Length adjustment method: spacing, spacingAndGlyphs spacing

Transform Attributes

Attribute Type Description Default
transform Transform Transformation operations (translate, rotate, scale, etc.) none

Common Attributes

Attribute Type Description
id String Unique identifier for the element
class String CSS class name(s) for styling
style Style Inline CSS-style properties
title String Tooltip or title text
desc String Description for accessibility

Data Binding

The <text> element supports comprehensive data binding for dynamic text content and styling.

Basic Text Binding 

<!-- Simple value binding -->
<text x="50" y="50" font-size="16"></text>

<!-- Expression binding -->
<text x="50" y="80" fill="blue">Total: $</text>

<!-- Conditional text -->
<text x="50" y="110" fill="">
    Status: 
</text>

Dynamic Positioning 

<!-- Data-driven coordinates -->
<text x="" y="" font-size="12">
    
</text>

<!-- Calculated positions -->
<text x="" y="30" text-anchor="middle" font-weight="700">
    
</text>

Dynamic Styling 

<!-- Conditional fill color -->
<text x="100" y="50" fill="" font-size="20">
    
</text>

<!-- Data-driven font size -->
<text x="50" y="50" font-size="">
    
</text>

<!-- Opacity based on data -->
<text x="75" y="75" fill="#336699" fill-opacity="">
    Confidence: %
</text>

Template Iteration 

<!-- Generate labels from data array -->
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
    <template data-bind="">
        <text x="" y="" text-anchor="middle" font-size="12" fill="#333">
            
        </text>
    </template>
</svg>

Notes

Coordinate System

  • The x and y coordinates position the text baseline start point
  • The coordinate system origin (0,0) is at the top-left of the SVG viewport
  • Use text-anchor to change horizontal alignment relative to the x coordinate
  • Use dominant-baseline to adjust vertical alignment relative to the y coordinate

Text Baseline

  • By default, y positions the alphabetic baseline of the text
  • The baseline is the line on which most letters “sit”
  • Descenders (like ‘g’, ‘y’, ‘p’) extend below the baseline
  • Use dominant-baseline="middle" to center text vertically at the y coordinate

Text Anchoring

The text-anchor attribute controls horizontal alignment:

  • start (default) - Text starts at the x coordinate
  • middle - Text is centered on the x coordinate
  • end - Text ends at the x coordinate

Font Support

  • Scryber supports standard font families and system fonts
  • Web fonts and custom fonts require proper font registration
  • Font fallback works through the font-family stack
  • Unsupported characters may render as fallback glyphs

Text Content

  • Text content can be plain text or include nested <tspan> elements
  • Whitespace handling follows XML rules (collapse by default)
  • Use xml:space="preserve" to maintain whitespace
  • Line breaks must be created explicitly with multiple text/tspan elements

Performance Considerations

  • Text rendering is optimized for PDF output
  • Complex transformations may impact rendering performance
  • Large amounts of text should use standard HTML elements when possible
  • Consider style caching for repeated text elements with templates

Limitations

  • Multi-line text requires multiple <text> or nested <tspan> elements
  • Text wrapping is not automatic - use calculated positioning
  • Text-on-path requires special path elements (not standard text)
  • Vertical text rendering has limited support

Examples

1. Simple Label

Basic text label with standard positioning:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="60">
    <text x="10" y="30" font-family="Arial" font-size="16" fill="#333">
        Product Name
    </text>
</svg>

2. Centered Title

Text centered using text-anchor:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="60">
    <text x="200" y="35" text-anchor="middle" font-size="24" font-weight="700" fill="#336699">
        Sales Report 2024
    </text>
</svg>

3. Right-Aligned Value

Right-aligned text for numerical values:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="50">
    <text x="190" y="30" text-anchor="end" font-size="18" font-family="monospace" fill="#000">
        $1,234.56
    </text>
</svg>

4. Rotated Label

Text with rotation transformation:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="200">
    <text x="50" y="100" text-anchor="middle" transform="rotate(-90 50 100)"
          font-size="14" fill="#666">
        Y-Axis Label
    </text>
</svg>

5. Color-Coded Status

Status text with conditional colors:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="80">
    <text x="10" y="25" font-size="14" fill="#00aa00" font-weight="600">
        Active
    </text>
    <text x="10" y="50" font-size="14" fill="#ff6600" font-weight="600">
        Pending
    </text>
    <text x="10" y="75" font-size="14" fill="#cc0000" font-weight="600">
        Inactive
    </text>
</svg>

6. Chart Axis Labels

X-axis labels for a bar chart:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="250">
    <rect x="50" y="50" width="40" height="150" fill="#336699"/>
    <rect x="110" y="100" width="40" height="100" fill="#336699"/>
    <rect x="170" y="75" width="40" height="125" fill="#336699"/>
    <rect x="230" y="125" width="40" height="75" fill="#336699"/>

    <text x="70" y="220" text-anchor="middle" font-size="12" fill="#333">Q1</text>
    <text x="130" y="220" text-anchor="middle" font-size="12" fill="#333">Q2</text>
    <text x="190" y="220" text-anchor="middle" font-size="12" fill="#333">Q3</text>
    <text x="250" y="220" text-anchor="middle" font-size="12" fill="#333">Q4</text>
</svg>

7. Data-Bound Label

Dynamic text from model data:

<!-- Model: { customerName: "Acme Corp", orderCount: 42 } -->
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="60">
    <text x="10" y="30" font-size="16" fill="#333">
        Customer: 
    </text>
    <text x="10" y="50" font-size="14" fill="#666">
        Total Orders: 
    </text>
</svg>

8. Value with Conditional Color

Text color based on threshold:

<!-- Model: { revenue: 125000, target: 100000 } -->
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="80">
    <text x="10" y="30" font-size="14" fill="#333">
        Revenue
    </text>
    <text x="10" y="55" font-size="24" font-weight="700"
          fill="">
        $K
    </text>
</svg>

9. Chart with Dynamic Labels

Bar chart with data-driven positioning:

<!-- Model: { data: [{label: "Jan", value: 120}, {label: "Feb", value: 150}, ...] } -->
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="250">
    <template data-bind="">
        <rect x=""
              y="200"
              width="40"
              height=""
              fill="#336699"/>
        <text x=""
              y="220"
              text-anchor="middle"
              font-size="12"
              fill="#333">
            
        </text>
        <text x=""
              y="195"
              text-anchor="middle"
              font-size="10"
              fill="#fff"
              font-weight="600">
            
        </text>
    </template>
</svg>

10. Multi-Style Text Header

Combining multiple text elements:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="100">
    <rect width="400" height="100" fill="#336699"/>
    <text x="20" y="40" font-size="28" font-weight="700" fill="white">
        QUARTERLY REPORT
    </text>
    <text x="20" y="70" font-size="16" fill="white" fill-opacity="0.9">
        Financial Performance Summary
    </text>
</svg>

11. Percentage Display

Formatted percentage with styling:

<!-- Model: { completionRate: 0.75 } -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="60">
    <text x="100" y="35" text-anchor="middle" font-size="32" font-weight="700" fill="#336699">
        %
    </text>
    <text x="100" y="52" text-anchor="middle" font-size="12" fill="#666">
        Complete
    </text>
</svg>

12. Status Badge

Circular badge with centered text:

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
    <circle cx="60" cy="60" r="50" fill="#00aa00"/>
    <text x="60" y="70" text-anchor="middle" dominant-baseline="middle"
          font-size="24" font-weight="700" fill="white">
        OK
    </text>
</svg>

13. Temperature Gauge Label

Gauge with temperature reading:

<!-- Model: { temperature: 72.5, unit: "°F" } -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <circle cx="100" cy="100" r="80" fill="none" stroke="#ddd" stroke-width="20"/>
    <circle cx="100" cy="100" r="80" fill="none" stroke="#ff6600" stroke-width="20"
            stroke-dasharray=" 502"/>

    <text x="100" y="95" text-anchor="middle" font-size="36" font-weight="700" fill="#333">
        
    </text>
    <text x="100" y="115" text-anchor="middle" font-size="16" fill="#666">
        
    </text>
</svg>

14. Data Point Labels

Scatter plot with value labels:

<!-- Model: { points: [{x: 50, y: 100, value: "A"}, {x: 150, y: 50, value: "B"}] } -->
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
    <template data-bind="">
        <circle cx="" cy="" r="8" fill="#336699"/>
        <text x="" y="" text-anchor="middle" font-size="12" fill="#333">
            
        </text>
    </template>
</svg>

15. Legend with Icons

Chart legend with text labels:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="120">
    <rect x="20" y="20" width="20" height="20" fill="#336699"/>
    <text x="50" y="35" font-size="14" fill="#333">Revenue</text>

    <rect x="20" y="50" width="20" height="20" fill="#ff6600"/>
    <text x="50" y="65" font-size="14" fill="#333">Expenses</text>

    <rect x="20" y="80" width="20" height="20" fill="#00aa00"/>
    <text x="50" y="95" font-size="14" fill="#333">Profit</text>
</svg>

16. Dynamic Font Sizing

Text size based on importance:

<!-- Model: { items: [{text: "Critical", priority: 3}, {text: "Normal", priority: 1}] } -->
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="150">
    <template data-bind="">
        <text x="20"
              y=""
              font-size=""
              font-weight=""
              fill="">
            
        </text>
    </template>
</svg>

17. Annotation with Leader

Text annotation with visual indicator:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
    <circle cx="150" cy="100" r="50" fill="#336699"/>
    <line x1="150" y1="50" x2="150" y2="20" stroke="#333" stroke-width="1"/>
    <text x="150" y="15" text-anchor="middle" font-size="12" fill="#333">
        Peak: $250K
    </text>
</svg>

18. Multi-Line Description

Multiple text elements for line breaks:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="120">
    <text x="20" y="30" font-size="18" font-weight="700" fill="#336699">
        Product Overview
    </text>
    <text x="20" y="55" font-size="12" fill="#333">
        High-performance solution for enterprise customers
    </text>
    <text x="20" y="75" font-size="12" fill="#333">
        Available in multiple configurations
    </text>
    <text x="20" y="95" font-size="12" fill="#333">
        Includes 24/7 support and maintenance
    </text>
</svg>

19. Time-Series Chart Labels

Date/time labels on chart axis:

<!-- Model: { timePoints: [{date: "Jan 1", value: 100}, {date: "Jan 15", value: 150}] } -->
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="250">
    <template data-bind="">
        <line x1=""
              y1="200"
              x2=""
              y2="200"
              stroke="#336699"
              stroke-width="2"/>
        <text x=""
              y="220"
              text-anchor="middle"
              font-size="10"
              fill="#666">
            
        </text>
    </template>
</svg>

20. Score Display with Description

Large score with explanatory text:

<!-- Model: { score: 8.7, maxScore: 10, description: "Excellent" } -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150">
    <text x="100" y="60" text-anchor="middle" font-size="56" font-weight="700" fill="#00aa00">
        
    </text>
    <text x="100" y="85" text-anchor="middle" font-size="18" fill="#666">
        / 
    </text>
    <text x="100" y="110" text-anchor="middle" font-size="16" font-weight="600" fill="#333">
        
    </text>
</svg>

See Also