How to Add Text to an SVG

Add editable, accessible text to any SVG using the <text> element, Inkscape, or a design tool â€” complete with font control, positioning, and CSS styling.

Preset:

Colors:

Drop your image here

Supports PNG, JPG, BMP, WEBP up to 5MB

VTracer vectorization + SVGO optimizationPrivacy protected

Method 1: SVG <text> Element in Code

SVG has a native <text> element that renders editable, selectable text.

<text x='50' y='80' font-size='24' fill='black'>Hello, SVG</text>
x/y: position from top-left of SVG viewBox
font-family='Arial, sans-serif': specify font or rely on system default
text-anchor='middle': center-align text on the x coordinate
dominant-baseline='middle': vertically center text on the y coordinate

Method 2: Inkscape (Visual Text Addition)

For adding text visually to an existing SVG file, Inkscape's Text tool is the easiest approach.

Open your SVG in Inkscape
Select the Text tool (T key or F8)
Click where you want to add text and type
Select text: use the Selector tool (F1) to position and resize
Text > Object to Path: converts text to paths for font-independent distribution

Method 3: Multi-line and Flowing Text

SVG handles multi-line text with <tspan> elements or the newer text wrapping specification.

Multiple lines: use <tspan> elements with dy='1.2em' for line spacing
<text>Line 1<tspan x='10' dy='1.2em'>Line 2</tspan></text>
foreignObject: embed HTML <p> inside SVG for rich text wrapping (limited browser support)
Inkscape: text frames auto-wrap text within a rectangle
CSS for SVG text: font-size, letter-spacing, word-spacing all work on <text>

Frequently Asked Questions

Is SVG text accessible to screen readers?

Yes â€” SVG <text> elements are in the DOM and readable by screen readers. Add aria-label to the <svg> element for overall context, and use <title> for descriptive text.

How do I center text in an SVG?

Set x to half the SVG width and text-anchor='middle'. For vertical centering, set y to half the SVG height and dominant-baseline='middle'.

Can I use Google Fonts in SVG text?

Yes. Add a @import url() for the Google Font inside a <style> block in the SVG. For standalone SVG files, the font loads when SVG is in a browser context â€” not in Cricut or Inkscape.

Should I use SVG text or convert text to paths?

Use SVG text for web (accessible, responsive, editable). Convert to paths when sharing files for print or cutting (no font dependency).

How do I wrap text in SVG?

SVG doesn't natively support text wrapping. Use multiple <tspan> elements with manual line breaks, or embed an HTML <foreignObject> with a <p> element for auto-wrapping.

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