links to this page:    
View this PageEdit this PageUploads to this PageHistory of this PageTop of the SwikiRecent ChangesSearch the SwikiHelp Guide
SVG construction example 4 - rect, circle and text
Last updated at 10:18 am UTC on 16 May 2019


 <svg version="1.1"
     width="300" height="200"

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>


The first important thing to notice is the order of rendering of elements. The globally valid rule for SVG files is, that later elements are rendered atop previous elements. The further down an element is the more will be visible.

The text "SVG" is drawn. The interior of each letter is filled in with white. The text is positioned by setting an anchor at where we want the midpoint to be: in this case, the midpoint should correspond to the center of the green circle.