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 an svg manually
We use cookies to improve your browsing experience on our website and to understand where our visitors are coming from. By clicking ‘Accept cookies’, you consent to our use of cookies.