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="//m.sbmmt.com/" 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).
