Creating SVGs manually

0800 156 0777

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!

 

Creating SVGs manually