Search within TutorialsPark

HTML5 SVG Application


A Few basic demonstrations of SVG Elements


SVG Elements

1. SVG specifications provides elements to draw shapes, paths, text, patterns, gradients etc.

Some Popular SVG elements.

<line>

<rect>

<circle>

<ellipse>

<polygon>

<text>

<path>

<pattern>

<lineargradient>

<radialgradient>

<filter>


SVG LINE: <line>

1.The svg element <line> is used to draw line.

2. The Co-ordinates (X1, X2) specifies the starting point and (X3, X4) denotes the end point of line

Demo: A Basic SVG Line

Give it a TRY! »


SVG Rectangle: <rect>

1. SVG element <rect> is used to draw rectangles.

2. Attributes width and height defines the width and height of the rectangle while <fill> defines the fill color.

Demo: A Basic SVG rectangle

Give it a TRY! »




SVG Circle: <circle>

1. SVG element <circle> is used to draw circles.

2. Attributes (cx, cy) defines the co-ordinates of centre, while attribute "r" defines the radius of the circle.

Demo: A Basic SVG Circle

Give it a TRY! »




SVG Ellipse: <ellipse>

1. SVG element <ellipse> is used to draw ellipse.

2. Attributes (cx, cy) defines the co-ordinates of centre, while attribute "rx" and "ry" defines the radius along X axis and Y axis respectively.

Demo: A Basic SVG Ellipse

Give it a TRY! »




SVG Polygon: <polygon>

1. SVG element <polygon> is used to draw polygon of various sizes.

2. Attributes (x, y) defines the co-ordinates of each vertices of the polygon, each co-ordinates(X, Y) are separated by a white space.

Demo: A Basic SVG Polygon

Give it a TRY! »




SVG Text: <text>

SVG (Scalable Vector Graphics)

1. SVG element <text> is used to display text, in Vectors.

2. Attributes (x, y) defines the starting co-ordinates of the text.

Demo: A Basic SVG TEXT

Give it a TRY! »


SVG path: <path>

1. SVG element <path> is used to draw paths connecting points.

2. In the example, attributes M=(moveto) and L=(lineto), also there are other commands(not explained here).

Demo: A Basic SVG Path

Give it a TRY! »


SVG pattern: <pattern>

1. SVG element <pattern> defines the pattern, which can be used to fill shapes.

2. The element <defs> allows you to define elements such that they can be used later.The pattern is used to fill the circle

Demo: A Basic SVG Pattern

Give it a TRY! »


SVG Linear Gradient: <lineargradient>

1. SVG element <lineargradient> is used to define the linear gradient to be used as fill .

2. Attributes (x1, y1) and (x2, y2) define the start and end points of the gradient.

2. Attributes offset and stopcolor defines the color at each offset point.

Demo: A Basic SVG Linear Gradient

Give it a TRY! »


SVG Radial Gradient: <radialgradient>

1. SVG element <radialgradient> is defines the radial color gradient, which can be used as a fill.

2. Radial Gradients consists two circles over which color patterns are created. Start Circle and End Circle.

2. Attributes (cx, cy) and "r" define the End Circle and (fx, fy) denotes the Start Circle or (focus).

Demo: A Basic SVG Radial Gradient

Give it a TRY! »


SVG Filters: <filters>

1. SVG element <filter> is used to define filters, which can then be applied on other elements.

2. In the above example, element <feGaussianBlur> creates the blur effect.

3. The attribute in="SourceGraphic" sets the effect over the entire element.

4. The attribute stdDeviation sets the blur effect, greater the value more is the blur effect.

5. The filter is applied to the target ellipse using the id.

Demo: A Basic SVG TEXT

Give it a TRY! »



Related Examples

Related Tags