CREATING SVGS MANUALLY

To show you how easy it is to create and use svg elements, here is a simple example.

<svg xmlns=”http://www.w3.org/2000/svg” width=”500px” height=”300px” viewBox=”0 0 1500 300″>
 <text x=”250″ y=”150″
      font-family=”Verdana”
       font-size=”250pt”>
   Hello
 </text>
</svg>

You can also just use the text element by itself. This is a text element, selectable, and easy to format.

To rotate the text (say) just add a transform attribute within the text element …..

<text x=”10″  y=”20″
        transform=”rotate(30 20,40)”>
    SVG Text Rotation example
  </text>

And to style the element, just add a style attribute…..

<svg xmlns=”http://www.w3.org/2000/svg” width=”100px” height=”50px”>

  <text x=”10″  y=”20″
        style=”font-family: Times New Roman;
               font-size  : 24;
               stroke     : #00ff00;
               fill       : #0000ff;”>
    Hello
  </text>
</svg>

Nice and easy!