Latest web development tutorials

SVG examples

Online examples

The following example is the SVG code directly embedded into HTML code.

Google Chrome, Firefox, Internet Explorer9, and Safari are supported.

NOTE: The following example will not run at the Opera, even if Opera support SVG - it does not support SVG directly in the HTML code.


SVG examples

SVG Basic Shapes

A circle

rectangle

Opaque rectangle

A rectangular opaque 2

A rectangle with rounded corners

An oval

And heaped on the three ellipses

Two ellipses

a line

triangle

quadrilateral

A star

Another Star

Broken line

Another polyline

path

Quadratic Bezier curve

Write a text

Rotated Text

Text on path

A few lines of text

Text link

Define a line, text or outline color (stoke)

Define a line width, text or outline (stroke-width)

stroke-linecap attribute defines the end of an open path of different types:

The definition of a dotted line (stroke-dasharray)

SVG Filters

feGaussianBlur - Blur

feOffset - offset by a rectangle, and then the top of the mixing offset image

feOffset - Blur Offset image

feOffset - so that the shadows black

feOffset - shaded color coated

A filter feBlend

A filter feColorMatrix

A filter feComponentTransfer

feOffset, feFlood, feComposite, feMerge and feMergeNode

A filter feMorphology

Filter 1

Filter 2

Filter 3

Filter 4

Filter 5

Filter 6

SVG Gradient

Horizontal linear gradient from yellow to red oval

Vertical linear gradient from yellow to red oval

Horizontal linear gradient from yellow to a red oval within the text and add

Radial gradient from white to blue oval

Radial gradient from white to blue oval another

SVG Miscellaneous

Repeat with 5 seconds fade rectangle

And change the color of the rectangle becomes large

It will change the color of the three rectangles

Motion along a path moving text

Along a motion path to move, rotate and scale text

Along a motion path to move, rotate and scale text + gradually enlarged and change color rectangle