SVG Examples

## SVG Basic

SVG HOME SVG Intro SVG Example SVG in HTML

## SVG Shapes

SVG Rectangle SVG Circle SVG Ellipse SVG Line SVG Polygon SVG Polyline SVG Path SVG Text SVG Stroking

## SVG Filters

SVG Filters Intro SVG Blur Effects SVG Drop Shadows

## SVG Gradients

SVG Linear SVG Radial

## SVG Examples

SVG Examples

## SVG Reference

SVG Reference

# SVG Examples

« Previous
Next Chapter »

## Try-it Yourself Examples

The examples below embed the SVG code directly into the HTML code.

This is supported by Firefox, Internet Explorer 9, Google Chrome, Opera, and Safari.

## SVG Examples

### SVG Basic Shapes

A circle
A rectangle
A rectangle with opacity
A rectangle with opacity 2
A rectangle with rounded corners
An ellipse
Three ellipses on top of each other
Two ellipses
A line
A polygon with three sides
A polygon with four sides
A star
Another star
A polyline
Another polyline
A path
A quadratic Bézier curve
Write a text
Rotate a text
Text on a path
Text on several lines
Text as a link
Defines the color of a line, text or outline (stroke)
Defines the width of a line, text or outline (stroke-width)
Defines different types of endings to an open path (stroke-linecap)
Defines dashed lines (stroke-dasharray)

### SVG Filters

feGaussianBlur - blur effect
feOffset - offset a rectangle, then blend the original on top of the offset image
feOffset - blur the offset image
feOffset - make the shadow black
feOffset - treat the shadow as a 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 Gradients

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

### SVG Misc

Rectangle that repeatedly fade away over 5 seconds
A growing rectangle that will change color
Three rectangles that will change color
Move text along a motion path
Move, rotate, and scale text along a motion path
Move, rotate, and scale text along a motion path + a growing rectangle that will change color

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE