SVG `Example`

Online Examples

The following example embeds SVG code directly into HTML code.

Google Chrome, Firefox, Internet Explorer 9, and Safari are all supported.

Note: The following example will not run in Opera, even though Opera supports SVG - it does not support SVG being used directly in HTML code.

SVG Examples

SVG Basic Shapes

Rectangle with Rounded Corners

An Ellipse

Three Ellipses Stacked

Quadratic Bezier Curve

Writing Text

Rotated Text

Text on Path

Multiple Lines of Text

Text Link

Defining a Line, Text, or Outline Color (stroke)

Defining a Line Width, Text, or Outline (stroke-width)

stroke-linecap Property Defines Different Types of Open Path Endings:

Defining Dashed Lines (stroke-dasharray)

SVG Filters

feGaussianBlur - Blur Effect

feOffset - Offset a Rectangle, Then Blend Offset Image on Top

feOffset - Blurred Offset Image

feOffset - Make Shadow Black

feOffset - Color the Shadow

An feBlend Filter

An feColorMatrix Filter

An feComponentTransfer Filter

feOffset, feFlood, feComposite, feMerge, and feMergeNode

An feMorphology Filter

SVG Gradients

Horizontal Linear Gradient from Yellow to Red Ellipse

Vertical Linear Gradient from Yellow to Red Ellipse

Horizontal Linear Gradient from Yellow to Red with Text Inside an Ellipse

Radial Gradient from White to Blue Ellipse

Radial Gradient from White to Blue Another Ellipse

SVG Miscellaneous

Repeating Fade Out Rectangle Over 5 Seconds

Rectangle Will Grow and Change Color

Three Rectangles That Change Color

Text Moving Along a Motion Path

Text Moving Along a Motion Path, Rotating, and Scaling

Text Moving Along a Motion Path, Rotating, and Scaling + Gradually Enlarging and Changing Color Rectangle

❮ Svg Rect Svg Reference ❯