SVG Examples

Online Examples

The following examples embed SVG code directly into HTML code.

Almost all modern browsers support SVG (Scalable Vector Graphics) format.

The following is the support status of some major browsers:

  1. Google Chrome: Full support for SVG, starting from version 1.0.
  2. Mozilla Firefox: Full support for SVG, starting from version 1.5.
  3. Microsoft Edge: Full support for SVG.
  4. Safari: Full support for SVG, starting from version 3.1.
  5. Opera: Full support for SVG, starting from version 9.0.

Mobile browser support:

  • iOS Safari: Full support for SVG.
  • Android Browser: Full support for SVG.
  • Chrome for Android: Full support for SVG.

SVG Examples

SVG Basic Shapes

A circle

Rectangle

Rect with opacity

A rectangle with opacity 2

A rectangle with rounded corners

An ellipse

Three ellipses stacked on top of each other

Two ellipses

A line

Triangle

Quadrilateral

A star

Another star

Polyline

Another polyline

Path

Quadratic Bezier curve

Write text

Rotated text

Text on a path

Several lines of text

Text link

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

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

The stroke-linecap attribute defines different types of endings for open paths:

Define dashed lines (stroke-dasharray)

SVG Filters

feGaussianBlur - Blur effect

feOffset - Offset a rectangle, then blend the offset image on top

feOffset - Blur the offset image

feOffset - Make the shadow black

feOffset - Apply a color to the shadow

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 Gradients

Horizontal linear gradient ellipse from yellow to red

Vertical linear gradient ellipse from yellow to red

Horizontal linear gradient from yellow to red with text inside the ellipse

Radial gradient ellipse from white to blue

Another radial gradient ellipse from white to blue

SVG Misc

A rectangle that repeats and fades out over 5 seconds

The rectangle grows and changes color

Three rectangles that change color

Text moving along a motion path

Text moving, rotating, and scaling along a motion path

Text moving, rotating, and scaling along a motion path + a rectangle that gradually enlarges and changes color

Other extensions