[HTML5] Graphics – SVG Shapes

SVG has some predefined shapes. They are elements in the SVG document.

1. SVG Shapes and Elements

SVG supports the followin shapes

  • Rectangle : <rect>
  • Circle : <circle>
  • Ellipse : <ellipse>
  • Line : <line>
  • Polyline : <polyline>
  • Polygon : <polygon>
  • Path : <path>

 

2. Lines

The <line> element is used to draw lines.

  • x1, y1 : starting point
  • x2, y2 : end point
<line x1="20" y1="20" x2="100" y2="100" stroke="Blue" stroke-width="2" />
<line x1="100" y1="100" x2="20" y2="180" style="stroke:Red; stroke-width:2;" />

 

3. Multiple Lines

The <polyline> element is used to draw lines that are connected.

  • points : x1,y1 x2,y2 x3,y3 (each point is separated by a space)
<polyline points="20,20 40,20 40,40 60,40 60,60" fill="None" stroke="Red" stroke-width="2" />

 

4. Rectangles

The <rect> element is used to draw rectangles.

  • x, y
  • width, height
<rect x="20" y="20" width="150" height="100" fill="Red" fill-opacity="0.5" stroke="Blue" stroke-width="2" />

 

5. Circles

The <circle> element is used to draw circles.

  • cx, cy : center
  • r : radius
<circle cx="100" cy="100" r="50" fill="Red" stroke="Blue" stroke-width="2" />

 

6. Ellipses

The <ellipse> element is used to draw ellipses.

  • cx, cy : center
  • rx : horizontal radius
  • ry : vertical radius
<ellipse cx="100" cy="100" rx="80" ry="50" fill="Red" style="stroke:Blue; stroke-width=2;" />

 

7. Polygons

The <polygon> element is used to draw the polygons (closed shape).

  • points : x1,y1 x2,y2 x3,y3 (each point is separated by a space)
<polygon points="100,50 150,100 100,150 50,100" fill="rgb(255,255,0)" stroke="Red" stroke-width="2" />

 

8. Texts

The <text> element is used to write texts.

  • x, y : start point
  • dx, dy : relative position from x and y
<text x="20" y="20" fill="Yello" stroke="Red" stroke-width="1" font-family="Arial" font-size="48pt">Hello World</text>

 

9. Path

The <path> element has a “d” attribute to define the path. The “d” attribute consists of a set of commands.

  • M : moveto
  • L : lineto
  • H : horizontal lineto
  • V : vertical lineto
  • : curveto
  • : smooth curveto
  • : quadratic Bézier curve
  • : smooth quadratic Bézier curveto
  • : elliptical Arc
  • : closepath

The command can be the upper case (absolutely positioned) or the lower case (relatively positioned)

Let’s draw the triangle with the <path> element.

<path d="M 100 50 L 150 100 L 100 150 L 50 100 Z" fill="Red" stroke="Yellow" />

You can use the relative points too.

<path d="M 100 50 l 50 50 l -50 50 l -50 -50 Z" fill="Red" stroke="Yellow" />

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s