SVG text

SVG Text - The <text>

<text> element is used to define text.

Example 1

Write a text:

I love SVG

The following is the SVG code:

Instance

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red">I love SVG</text>
</svg>
 
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

For Opera users: View the SVG file (right-click on the SVG graphic preview source).

Example 2

Rotated text:

The following is the SVG code:

Example

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>
 
</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

For Opera users: View SVG File (right click on the SVG graphic preview source).

Example 3

Text on the path:

The following is the SVG code:

Instance

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  </defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
  </text>
</svg>
 
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

For Opera users: View SVG file (right click on SVG graphic preview source).

Example 4

Elements can be arranged in any number of groups with <tspan> elements. Each <tspan> element can contain different formats and positions. Several lines of text (with <tspan> element):

Several lines:

First line

Second line

The following is the SVG code:

Instance

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="10" y="20" style="fill:red;">Several lines: 
    <tspan x="10" y="45">First line</tspan> 
    <tspan x="10" y="70">Second line</tspan> 
  </text>
</svg>
 
</body>
</html>

Run Example»

Click the "Run Instance" button to view the online instance

For Opera users: View the SVG file (right-click on the SVG graphic preview source).

Example 5

As link text (<a> element):

I love SVG

Below Is the SVG code:

Instance

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="http://www.php.cn/" target="_blank">
    <text x="0" y="15" fill="red">I love SVG</text>
  </a>
</svg>
 
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

For Opera users: View SVG files (right-click on the SVG graphic preview source).