SVG Text

A <text> element are used to draw a text. Note that there are possible to applied css and js to SVG text.

   <text  
    x="x-coordinate"
    y="y-coordinate">
    user-text
  </text>
Name Default value Description
x 0 x-coordinate of text.
y 0 y-coordinate of text.
user-text none Display text

SVG Text Example

SVG text SVG Text Example
  <?xml version="1.0"?>
<svg width="260" height="40" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="15" fill="blue">SVG Text Example</text>
</svg> 

SVG Multiline Text

SVG multiline text Normal 1'st Line Second Line Third Line
<svg width="260" height="60" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="15" fill="blue">
    Normal
    <tspan >1'st Line</tspan>
    <tspan x="0" y="35" fill="green" >Second Line</tspan>
    <tspan x="0" y="55" fill="red" >Third Line</tspan>
  </text>
</svg> 

Svg text stroke example

SVG Text stroke MY SVG
<svg height="50" width="270"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
   <text x="10" font-size="40px" y="30" stroke="salmon" fill="#03a9f491" >
MY SVG
  </text>
</svg>

Rotate SVG text

Example 1

SVG rotate Text SVG Rotation Example
<?xml version="1.0"?>
<svg width="300" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <text x="0" transform="rotate(315,250,50)" font-size="21px" y="15" fill="cadetblue">SVG Rotation Example</text>
</svg> 

Example 2

SVG Rounded Text A B C D E F G H I H K L M N O P Q R S T S V G T E X
<svg height="300" width="270"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
<defs>
    <path d="M20 150 a100 100,0 , 0 1, 200 0 a100 100,0,0 1,-200 0"  id="txtView" />
  </defs> 
   <text fill="#03a9f491" font-size="25.5" font-weight="600">
    <textPath  startOffset="5" xlink:href="#txtView">A B C D E F G H I H K L M N O P Q R S T  S V G T E X </textPath>
  </text>
</svg>

SVG Text Animation

SVG text rotate animation SVG TEXT
 <?xml version="1.0"?>
<svg width="260" height="140" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <text x="80"  font-size="21px" y="45" fill="#9c27b0">SVG
   <animateTransform
            attributeName="transform"
            type="rotate"
            from="360 67 67"
            to="0 67 67"
            dur="7s"
            repeatCount="indefinite"/>
  </text>
  <text x="80"  font-size="21px" y="85" fill="darkblue">TEXT
   <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 67 67"
            to="360 67 67"
            dur="7s"
            repeatCount="indefinite"/>
  </text>
</svg> 

Demo 2

SVG path animation
<svg height="120" width="300" xmlns="http://www.w3.org/2000/svg"        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<path fill="none" stroke="blue" d="M4.59 62.79L12.99 62.79L12.99 62.79Q13.57 77.59 25.78 77.59L25.78 77.59L25.78 77.59Q30.18 77.59 33.11 75.39L33.11 75.39L33.11 75.39Q37.21 72.22 37.21 66.50L37.21 66.50L37.21 66.50Q37.21 60.35 32.08 55.66L32.08 55.66L32.08 55.66Q28.56 52.54 20.02 47.61L20.02 47.61L20.02 47.61Q6.49 39.65 6.49 28.61L6.49 28.61L6.49 28.61Q6.49 21.63 10.89 16.80L10.89 16.80L10.89 16.80Q16.21 10.89 25.10 10.89L25.10 10.89L25.10 10.89Q41.65 10.89 43.90 30.81L43.90 30.81L35.69 30.81L35.69 30.81Q35.35 26.22 33.79 23.49L33.79 23.49L33.79 23.49Q30.66 17.97 25.10 17.97L25.10 17.97L25.10 17.97Q19.34 17.97 16.50 21.88L16.50 21.88L16.50 21.88Q14.50 24.66 14.50 27.98L14.50 27.98L14.50 27.98Q14.50 35.89 27.39 43.41L27.39 43.41L27.39 43.41Q35.35 48.05 39.60 52.29L39.60 52.29L39.60 52.29Q45.31 57.86 45.31 66.41L45.31 66.41L45.31 66.41Q45.31 74.46 40.19 79.39L40.19 79.39L40.19 79.39Q34.72 84.91 26.03 84.91L26.03 84.91L26.03 84.91Q15.14 84.91 9.08 76.90L9.08 76.90L9.08 76.90Q4.88 71.34 4.59 62.79L4.59 62.79ZM69.73 82.91L53.42 12.89L62.30 12.89L75 73.14L87.70 12.89L96.63 12.89L80.32 82.91L69.73 82.91ZM145.31 82.91L138.92 82.91L138.92 73.49L138.92 73.49Q133.35 84.91 124.07 84.91L124.07 84.91L124.07 84.91Q115.04 84.91 109.77 75.59L109.77 75.59L109.77 75.59Q104.59 66.26 104.59 48.00L104.59 48.00L104.59 48.00Q104.59 30.86 110.01 20.80L110.01 20.80L110.01 20.80Q115.38 10.89 125.39 10.89L125.39 10.89L125.39 10.89Q141.46 10.89 144.63 32.91L144.63 32.91L136.43 32.91L136.43 32.91Q134.18 18.41 125.39 18.41L125.39 18.41L125.39 18.41Q113.18 18.41 113.18 47.80L113.18 47.80L113.18 47.80Q113.18 77.39 125 77.39L125 77.39L125 77.39Q135.74 77.39 138.04 56.79L138.04 56.79L127.49 56.79L127.49 49.61L145.31 49.61L145.31 82.91Z"></path>
<circle fill="none" stroke="green" stroke-width="3"   r=5>
  <animateMotion
              path="M4.59 62.79L12.99 62.79L12.99 62.79Q13.57 77.59 25.78 77.59L25.78 77.59L25.78 77.59Q30.18 77.59 33.11 75.39L33.11 75.39L33.11 75.39Q37.21 72.22 37.21 66.50L37.21 66.50L37.21 66.50Q37.21 60.35 32.08 55.66L32.08 55.66L32.08 55.66Q28.56 52.54 20.02 47.61L20.02 47.61L20.02 47.61Q6.49 39.65 6.49 28.61L6.49 28.61L6.49 28.61Q6.49 21.63 10.89 16.80L10.89 16.80L10.89 16.80Q16.21 10.89 25.10 10.89L25.10 10.89L25.10 10.89Q41.65 10.89 43.90 30.81L43.90 30.81L35.69 30.81L35.69 30.81Q35.35 26.22 33.79 23.49L33.79 23.49L33.79 23.49Q30.66 17.97 25.10 17.97L25.10 17.97L25.10 17.97Q19.34 17.97 16.50 21.88L16.50 21.88L16.50 21.88Q14.50 24.66 14.50 27.98L14.50 27.98L14.50 27.98Q14.50 35.89 27.39 43.41L27.39 43.41L27.39 43.41Q35.35 48.05 39.60 52.29L39.60 52.29L39.60 52.29Q45.31 57.86 45.31 66.41L45.31 66.41L45.31 66.41Q45.31 74.46 40.19 79.39L40.19 79.39L40.19 79.39Q34.72 84.91 26.03 84.91L26.03 84.91L26.03 84.91Q15.14 84.91 9.08 76.90L9.08 76.90L9.08 76.90Q4.88 71.34 4.59 62.79L4.59 62.79ZM69.73 82.91L53.42 12.89L62.30 12.89L75 73.14L87.70 12.89L96.63 12.89L80.32 82.91L69.73 82.91ZM145.31 82.91L138.92 82.91L138.92 73.49L138.92 73.49Q133.35 84.91 124.07 84.91L124.07 84.91L124.07 84.91Q115.04 84.91 109.77 75.59L109.77 75.59L109.77 75.59Q104.59 66.26 104.59 48.00L104.59 48.00L104.59 48.00Q104.59 30.86 110.01 20.80L110.01 20.80L110.01 20.80Q115.38 10.89 125.39 10.89L125.39 10.89L125.39 10.89Q141.46 10.89 144.63 32.91L144.63 32.91L136.43 32.91L136.43 32.91Q134.18 18.41 125.39 18.41L125.39 18.41L125.39 18.41Q113.18 18.41 113.18 47.80L113.18 47.80L113.18 47.80Q113.18 77.39 125 77.39L125 77.39L125 77.39Q135.74 77.39 138.04 56.79L138.04 56.79L127.49 56.79L127.49 49.61L145.31 49.61L145.31 82.91Z" begin="0s" dur="15s" repeatCount="indefinite" rotate="auto"/>
   </circle>
</svg>

© 2019, regularcodes.com, All rights reserved