SVG Primer 1

One of the things we need to look at closely is how SVG documents are defined. The beauty of the SVG format is that we can define it much in the same way we do HTML.  We can define an SVG element on our web page with the <SVG></SVG> tag. This creates a canvas on which we can draw elements. We can specify a height and width in the tag or our basic style settings if we want.

 <SVG HEIGHT="100" WIDTH="500" style="background-color:lightgrey"></SVG>

This creates a grey SVG canvas like this:

As you can see, pretty exciting. It is when we start adding elements into the SVG canvas that it starts to get interesting. You can find out quite a bit with the Mozilla SVG documentation. In this post, we will look at Three elements. <RECT>, <CIRCLE> and <TEXT>. Let's look at how to use these.

<RECT> has 6 main attributes:

• X - Horizontal location from the rectangles parent container
• Y - Vertical location from the rectangles parent container
• WIDTH - Width of the rectangle
• HEIGHT- Height of the rectangle
• RX - Horizontal radius of rounded corners
• RY - Vertical radius of rounded corners

However, we will also need some style attributes to see the element. We can use stroke and fill to color in the rectangle. 

<RECT X="10px" Y="10px" rx="10px" ry="10px" HEIGHT="50px" WIDTH="30px" style="fill:none;stroke:black"></RECT>

      

Similarly, the <CIRCLE> has 3 main attributes:

• CX - Center of circle horizontal location
• CY - Center of circle vertical location
• R - Radius of circle

<CIRCLE cx="100px" cy="50px" r="20px" style="fill:black;stroke:black"></CIRCLE>

Finally, there is the <TEXT> element.  Its main attributes:

• X: Text anchor X location
• Y: Text anchor Y location
• DX: Text X position from the anchor
• DY: Text Y position from the anchor
• TEXT-ANCHOR: Text position in relation to the anchor (start, middle, end)

      <TEXT X="10px" Y="50px" TEXT-ANCHOR="start">Hello world!</TEXT>

We will look in the next post how to connect these tags to data using D3.