SVG Examples
- Previous Page SVG Radial Gradients
- Next Page Reference Manual of SVG
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
- Previous Page SVG Radial Gradients
- Next Page Reference Manual of SVG
