SVG instance

Online instance

The following example is to embed SVG code directly into HTML code.

Google Chrome, Firefox, Internet Explorer9, and Safari all support it.

Note: the following example will not run in Opera, even if Opera supports SVG-it does not support the direct use of SVG in HTML code.

SVG instance

SVG basic shape

A circle

Rectangle

Opaque rectangle

A rectangle opaque 2

A rectangle with rounded corners

An ellipse.

Three ellipses stacked on top

Two ellipses

A line

Triangle

Quadrilateral

A star.

Another star.

Broken line

Another broken line

Path

Quadratic Bezier curve

Write text

Rotate text

Text on path

A few lines of text

Text link

Define a line, text, or outline color (stroke)

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

The stroke-linecap attribute defines the termination of different types of open paths:

Define dashed lines (stroke-dasharray)

SVG filter

FeGaussianBlur-Blur effect

FeOffset-offset a rectangle, then blend and offset the top of the image

FeOffset-blur offset image

FeOffset-make shadows black

FeOffset-paint shadows with color

A feBlend filter

A feColorMatrix filter

A feComponentTransfer filter

FeOffset, feFlood, feComposite, feMerge and feMergeNode

A feMorphology filter

Filter 1

Filter 2

Filter 3

Filter 4

Filter 5

Filter 6

SVG gradient

Horizontal linear gradient oval from yellow to red

Vertical linear gradient from yellow to red oval

Horizontal linear gradient from yellow to red and add text within an ellipse

Radioactive gradient from white to blue oval

Another ellipse of radioactive gradient from white to blue

SVG Miscellaneous

Repeat a rectangle that fades out in 5 seconds

The rectangle gets bigger and changes color.

Three rectangles that change color

Text that moves along a motion path

Text that moves, rotates, and scales along a motion path

Text that moves, rotates, and scales along a motion path + a rectangle that gradually zooms in and changes color