Post
Ask Question

Scalable Vector Graphics - Text 2

Introduction

 
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 waveform
  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 a 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. 
 

Summary

 
In this article, we learned about Scalable Vector Graphics - Text 2.  
 
Thank you, keep learning and sharing. 


Similar Articles