SVG Examples

Try the example yourself

The following example embeds SVG code directly into HTML code.

Firefox, Internet Explorer 9, Google Chrome, Opera, and Safari all support this.

SVG Examples

SVG Basic Shapes

Circle
Rectangle
An opaque rectangle
A rectangle with opacity 2
A rectangle with rounded corners
Ellipse
Three ellipses overlapping each other
Two ellipses
Line
A polygon with three sides
A polygon with four sides
Star
Another star
Polyline
Another polyline
Path
Quadratic Bezier Curve
Write a piece of text
Rotated text
Multi-line text
Text as a link
Define the color of lines, text, or outlines (stroke)
Define the width of lines, text, or outlines (stroke-width)
Define the different types of ends for open paths (stroke-linecap)
Define the type of end for open paths (stroke-dasharray)

SVG Filters

feGaussianBlur - Blur effect
feOffset - Offset a rectangle, then blend the original image on top of the offset image
feOffset - Blur the offset image
feOffset - Make shadow black
feOffset - Treat shadow as a certain color
feBlend Filter
Filter 1
Filter 2
Filter 3
Filter 4
Filter 5
Filter 6

SVG Gradient

An ellipse with a horizontal linear gradient from yellow to red
An ellipse with a vertical linear gradient from yellow to red
An ellipse and text with a horizontal linear gradient from yellow to red
An ellipse with a radial gradient from white to blue
An ellipse with a radial gradient from white to blue

SVG Miscellaneous

A rectangle that disappears repeatedly within 5 seconds
A rectangle that changes color and grows continuously
Three rectangles that change color
Moving Text Along the Motion Path
Moving, Rotating, Scaling Text Along the Motion Path
Moving, Rotating, Scaling Text + Color-Changing Growing Rectangle Along the Motion Path
Rotating Ellipse