HTML 5

Scalable Vector Graphics - Text 2

This article provides some more explanation of SVG Text that shows how texts can be decorative as well.

Before reading further, read the following articles.

Now let's proceed to learn more about SVG decorative texts.

We will decorate the texts using the previous tags learned in previous parts of the article series. By using those we will make some interesting text.

Example 1

Simple coloured texts

  1. <html>  
  2.     <body>  
  3.         <svg height="200" width="600">  
  4.             <text x="20" y="60" style="fill:lime; font-size:60px;"> Text with Stroke only </text>  
  5.             <text x="120" y="100" style="fill:red; font-size:35px;"> Text with Stroke only </text>  
  6.             <text x="60" y="150" style="fill:blue; font-size:50px;"> Text with Stroke only </text>  
  7.         </svg>  
  8.     </body>  
  9. </html>   
Output



Example 2

Texts with multiple strokes
  1. <html>  
  2.     <body>  
  3.         <svg height="150" width="600">  
  4.             <text x="20" y="60" style="fill:none; stroke:green; font-size:60px; stroke-width:3;"> Text with Stroke only </text>  
  5.             <text x="120" y="100" style="fill:none; stroke:red; font-size:35px; stroke-width:1;"> Text with Stroke only </text>  
  6.             <text x="180" y="130" style="fill:none; stroke:blue; font-size:20px;"> Text with Stroke only </text>  
  7.         </svg>  
  8.     </body>  
  9. </html>   
Output



Example 3

Texts with stroke and fill
  1. <html>  
  2.     <body>  
  3.         <svg height="150" width="700">  
  4.             <text x="20" y="130" style="fill:lightgreen; stroke:green; font-size:60px; stroke-width:2;"> Text with Stroke and fill </text>  
  5.             <text x="120" y="70" style="fill:yellow; stroke:red; font-size:40px; stroke-width:1;"> Text with Stroke and fill </text>  
  6.             <text x="190" y="30" style="fill:cyan; stroke:blue; font-size:25px;"> Text with Stroke and fill </text>  
  7.         </svg>  
  8.     </body>  
  9. </html>   
Output



Example 4

Multi-color filled, stroked, filled and stroked texts
  1. <html>  
  2.     <body>  
  3.         <svg viewBox = "0 0 600 200">  
  4.             <defs>  
  5.                 <linearGradient id = "g1" x = "0%" y = "100%">  
  6.                     <stop stop-color = "red" offset = "0%"/>  
  7.                     <stop stop-color = "orange" offset = "20%"/>  
  8.                     <stop stop-color = "yellow" offset = "40%"/>  
  9.                     <stop stop-color = "lime" offset = "60%"/>  
  10.                     <stop stop-color = "green" offset = "80%"/>  
  11.                     <stop stop-color = "cyan" offset = "90%"/>  
  12.                     <stop stop-color = "blue" offset = "100%"/>  
  13.                 </linearGradient>  
  14.             </defs>  
  15.             <defs>  
  16.                 <linearGradient id = "g2" x = "0%" y = "100%">  
  17.                     <stop stop-color = "blue" offset = "0%"/>  
  18.                     <stop stop-color = "cyan" offset = "20%"/>  
  19.                     <stop stop-color = "green" offset = "40%"/>  
  20.                     <stop stop-color = "lime" offset = "60%"/>  
  21.                     <stop stop-color = "yellow" offset = "80%"/>  
  22.                     <stop stop-color = "orange" offset = "90%"/>  
  23.                     <stop stop-color = "red" offset = "100%"/>  
  24.                 </linearGradient>  
  25.             </defs>  
  26.             <g>  
  27.                 <use x = "0" y = "0" xlink:href = "#r1" fill = "url(#g1)"/>  
  28.                 <text font-size = "15" fill = "url(#g1)" stroke = "none">  
  29.                     <tspan x = "10" y = "20">  
  30. Multi-Color filled from red to blue.  
  31. </tspan>  
  32.                 </text>  
  33.             </g>  
  34.             <g>  
  35.                 <use x = "0" y = "0" xlink:href = "#r1" fill = "url(#g2)"/>  
  36.                 <text font-size = "15" fill = "url(#g2)" stroke = "none">  
  37.                     <tspan x = "10" y = "40">  
  38. Multi-Color filled just opposite to above text.  
  39. </tspan>  
  40.                 </text>  
  41.             </g>  
  42.             <g>  
  43.                 <use x = "0" y = "0" xlink:href = "#r1" fill = "url(#g1)"/>  
  44.                 <text font-size = "20" fill = "none" stroke = "url(#g1)" stroke-width="0.5">  
  45.                     <tspan x = "10" y = "80">  
  46. Multi-Color stroked from red to blue.  
  47. </tspan>  
  48.                 </text>  
  49.             </g>  
  50.             <g>  
  51.                 <use x = "0" y = "0" xlink:href = "#r1" fill = "url(#g2)"/>  
  52.                 <text font-size = "20" fill = "none" stroke = "url(#g2)" stroke-width="0.5">  
  53.                     <tspan x = "10" y = "100">  
  54. Multi-Color stroked just opposite to above text.  
  55. </tspan>  
  56.                 </text>  
  57.             </g>  
  58.             <g>  
  59.                 <use x = "0" y = "0" xlink:href = "#r1" fill = "url(#g1)"/>  
  60.                 <text font-size = "25" fill = "lime" stroke = "url(#g1)" stroke-width="0.5">  
  61.                     <tspan x = "10" y = "140">  
  62. Multi-Color stroked & filled from red to blue.  
  63. </tspan>  
  64.                 </text>  
  65.             </g>  
  66.             <g>  
  67.                 <use x = "0" y = "0" xlink:href = "#r1" fill = "url(#g2)"/>  
  68.                 <text font-size = "25" fill = "red" stroke = "url(#g2)" stroke-width="0.5">  
  69.                     <tspan x = "10" y = "165">  
  70. Multi-Color stroked & filled just opposite to above text.  
  71. </tspan>  
  72.                 </text>  
  73.             </g>  
  74.         </svg>  
  75.     </body>  
  76. </html>   
Output



Example 5

Texts in wave form

  1. <html>  
  2.     <body>  
  3.         <svg viewBox = "0 0 500 300">  
  4.             <defs>  
  5.                 <path id = "wave" d = "M 20,90 Q 100,15 200,70 Q 340,140 350,80"/>  
  6.             </defs>  
  7.             <g fill = "blue">  
  8.                 <text font-size = "20">  
  9.                     <textPath xlink:href = "#wave">  
  10. The Text is being represented like wave :) ;)  
  11. </textPath>  
  12.                 </text>  
  13.                 <use x = "0" y = "0" xlink:href = "#wave" stroke = "orange" fill = "none"/>  
  14.             </g>  
  15.             <defs>  
  16.                 <path id = "wave2" d = "M 20,140 Q 100,200 200,150 Q 340,90 350,150"/>  
  17.             </defs>  
  18.             <g fill = "green">  
  19.                 <text font-size = "20">  
  20.                     <textPath xlink:href = "#wave2">  
  21. The Text is being represented like wave :) ;)  
  22. </textPath>  
  23.                 </text>  
  24.                 <use x = "0" y = "0" xlink:href = "#wave2" stroke = "red" fill = "none"/>  
  25.             </g>  
  26.         </svg>  
  27.     </body>  
  28. </html>  
Output



Example 6

Text in octagonal shape
  1. <html>  
  2.     <body>  
  3.         <svg viewBox = "0 0 500 300">  
  4.             <defs>  
  5.                 <path id = "poly" d = "M 140 20 L 80 20 L 20 60 L 20 120 L 80 160 L 140 160 L 200 120 L 200 40" fill = "green" stroke = "black" stroke-width = "1"/>  
  6.             </defs>  
  7.             <g fill = "lime">  
  8.                 <text font-size = "20">  
  9.                     <textPath xlink:href = "#poly">  
  10. This text is being represented in octangonal like structure :)  
  11. </textPath>  
  12.                 </text>  
  13.             </g>  
  14.         </svg>  
  15.     </body>  
  16. </html> 
Output



Example 7

Text in circular shape
  1. <html>  
  2.     <body>  
  3.         <svg viewBox = "0 0 500 300">  
  4.             <defs>  
  5.                 <path id = "curve" d = "M 90,110 A 100,90 0 1 1 90,150 A 40,100 0 1 1 10,100 A 60,130 0 0 1 125,120"/>  
  6.             </defs>  
  7.             <g fill = "tomato">  
  8.                 <text font-size = "20" font-family = "calibri">  
  9.                     <textPath xlink:href = "#curve">  
  10. This red color text is now being represented in circular form... (:  
  11. </textPath>  
  12.                 </text>  
  13.             </g>  
  14.         </svg>  
  15.     </body>  
  16. </html>  
Output



Want to read more. 
 
Thank you, keep learning and sharing. 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs