SVG Polyline

SVG Polyline - <polyline>













Example 1

The <polyline> element is used to create any shape that consists of only straight lines:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>


For Opera users: View the SVG file (right-click on the SVG graphic to view the source).
Example 2

Another example with only straight lines:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
  style="fill:white;stroke:red;stroke-width:4"/>
</svg>

SVG polygon

SVG Polygon - <polygon>
Example 1


The <polygon> element is used to create a graphic that contains at least three sides.

Polygons are made of straight lines, and the shape is "closed" (all the lines connect up).

Remark Polygon comes from Greek. "Poly" means "many" and "gon" means "angle".

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>



For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Code explanation:

    The points attribute defines the x and y coordinates for each corner of the polygon

Example 2

The following example creates a polygon with four sides:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="220,10 300,210 170,250 123,234"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>


For Opera users: View the SVG file (right-click on the SVG graphic to view the source).
Example 3

Use the <polygon> element to create a star:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>


For Opera users: View the SVG file (right-click on the SVG graphic to view the source).
Example 4

Change the fill-rule property to "evenodd":

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
NEXT 

SVG shapes

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Code explanation:

    The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1)

Example 4

Last example, create a rectangle with rounded corners:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

Try it yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Code explanation:

    The rx and the ry attributes rounds the corners of the rectangle
SVG Ellipse - <ellipse>
Example 1

The <ellipse> element is used to create an ellipse.

An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
Try it yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Code explanation:

    The cx attribute defines the x coordinate of the center of the ellipse
    The cy attribute defines the y coordinate of the center of the ellipse
    The rx attribute defines the horizontal radius
    The ry attribute defines the vertical radius

Example 2

The following example creates three ellipses on top of each other:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/>
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/>
</svg>

Try it yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).
Example 3

The following example combines two ellipses (one yellow and one white):

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/>
  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white"/>
</svg>
NEXT 

Scalable vector Graphics

SVG Shapes

SVG has some predefined shape elements that can be used by developers:

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

The following chapters will explain each element, starting with the rect element.
SVG Rectangle - <rect>
Example 1

The <rect> element is used to create a rectangle and variations of a rectangle shape:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>



.

Code explanation:

    The width and height attributes of the rect element define the height and the width of the rectangle
    The style attribute is used to define CSS properties
    The CSS fill property defines the fill color of the rectangle
    The CSS stroke-width property defines the width of the border of the rectangle
    The CSS stroke property defines the color of the border of the rectangle

Example 2

Let's look at another example that contains some new attributes:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
  stroke-opacity:0.9"/>
</svg>




Code explanation:

    The x attribute defines the left position of the rectangle (e.g. x="50" places the rectangle 50 px from the left margin)
    The y attribute defines the top position of the rectangle (e.g. y="20" places the rectangle 20 px from the top margin)
    The CSS fill-opacity property defines the opacity of the fill color (legal range: 0 to 1)
    The CSS stroke-opacity property defines the opacity of the stroke color (legal range: 0 to 1)

Example 3



Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
</svg>
NEXT