W3Schools.com

HOME HTML CSS XML JAVASCRIPT ASP PHP SQL MORE...

REFERENCES | EXAMPLES | FORUM | ABOUT

SVG Basic

SVG HOME
SVG Intro
SVG Example
SVG in HTML

SVG Shapes

SVG Rectangle
SVG Circle
SVG Ellipse
SVG Line
SVG Polygon
SVG Polyline
SVG Path
SVG Text
SVG Stroking

SVG Filters

SVG Filters Intro
SVG Blur Effects
SVG Drop Shadows

SVG Gradients

SVG Linear
SVG Radial

SVG Examples

SVG Reference

SVG <text>

Next Chapter »

SVG Text - <text>

The <text> element is used to define a text.

Example 1

Write a text:

Here is the SVG code:

Example

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

Try it yourself »

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

Example 2

Rotate the text:

Here is the SVG code:

Example

<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>

Try it yourself »

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

Example 3

Text on a path:

Here is the SVG code:

Example

<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>

Try it yourself »

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

Example 4

The <text> element can be arranged in any number of sub-groups with the <tspan> element. Each <tspan> element can contain different formatting and position.

Text on several lines (with the <tspan> element):

Here is the SVG code:

Example

<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>

Try it yourself »

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

Example 5

Text as a link (with the <a> element):

Here is the SVG code:

Example

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

Try it yourself »

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

Next Chapter »

WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$3.98 Unlimited Hosting
Premium Website Design

WEB BUILDING
Download XML Editor
FREE Website BUILDER
Best Website Templates Top CSS Templates
CREATE HTML Websites
EASY WEBSITE BUILDER

W3SCHOOLS EXAMS
Get Certified in: HTML, CSS, JavaScript, XML, PHP, and ASP

W3SCHOOLS BOOKS
New Books: HTML, CSS JavaScript, and Ajax

STATISTICS
Browser Statistics Browser OS Browser Display

SHARE THIS PAGE
Share with »