SVG Examples

❮ Previous Next ❯

Try-it Yourself Examples

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

SVG is supported in all major browsera.

SVG Rectangle

Rectangle with the six basic attributes and a fill color Rectangle with fill and stroke Rectangle with opacity Rectangle with opacity 2 Rectangle with rounded corners

Examples explained

SVG Circle

A circle A circle with border A circle with opacity

Examples explained

SVG Ellipse

An ellipse Three ellipses on top of each other Two ellipses

Examples explained

SVG Line

A line A thick horizontal line A thick vertical line

Examples explained

SVG Polygon

A polygon with three sides A polygon with four sides A polygon with six sides A star Another star

Examples explained

SVG Polyline

A polyline Another polyline

Examples explained

SVG Path

A path A quadratic Bézier curve

Examples explained

SVG Text

Write a simple text with SVG A text with no fill A text with fill and stroke Rotate each letter of text with the rotate attribute Rotate the whole text with the transform attribute Use of the <tspan> element inside the <text> element

Examples explained

SVG textPath

Text along a path with <textPath> element Text along a path with <textPath> element and textLength attribute

Examples explained

SVG Links

Text as a link Graphic as a link

Examples explained

SVG Images

Insert an image Show an image on top of a circle, and add a text under the image

Examples explained

SVG Markers

A line with a start marker and an end marker A polyline with a start marker, a mid marker and an end marker

Examples explained

SVG Fill

Use the fill attribute to set the fill color of graphics Use the fill-opacity attribute to set opacity for fill color Use the fill-rule attribute for a polygon, with value "evenodd" Use the fill-rule attribute for a polygon, with value "nonzero"

Examples explained

SVG Stroke

Use the stroke attribute to set the outline color of graphics Use the stroke attribute to set the colors of lines Use the stroke-width attribute to set the width of the outline Use the stroke-width attribute to set the width of lines Use the stroke-opacity attribute to set the opacity of the outline Use the stroke-opacity attribute to set the opacity of lines Use the stroke-linecap attribute to set different endings for lines Use the stroke-dasharray attribute to create dashed lines Use the stroke-dasharray attribute to create dashed outlines Use the stroke-linejoin attribute to create different corner shapes

Examples explained

SVG Filters Intro

Use the <feGaussianBlur> filter to blur an SVG graphic

Examples explained

SVG Filters Blur Effect

Use the <feGaussianBlur> filter to create a blur effect Use the stdDeviation attribute to set the amount of the blur

Examples explained

SVG Filters Drop Shadow 1

Use the <feDropShadow> filter to create a drop shadow effect

Examples explained

SVG Filters Drop Shadow 2

Offset a rectangle, then blend the original on top of the offset image Blur the offset image Make the shadow black Treat the shadow as a color matrix A feBlend filter Filter 1 Filter 2 Filter 3 Filter 4 Filter 5 Filter 6

Examples explained

SVG Linear Gradients

A horizontal linear gradient with two colors A horizontal linear gradient with three colors A vertical linear gradient with two colors A horizontal linear gradient with text An angular linear gradient with two colors

Examples explained

SVG Radial Gradients

A radial gradient with two colors A radial gradient with three colors A radial gradient with cx and cy to 25% A radial gradient with spreadMethod="reflect" A radial gradient with spreadMethod="repeat" A radial gradient with two colors and stop-opacity

Examples explained

SVG Patterns

Create a rectangle filled with small circles Create a rectangle filled with small lightblue rectangles and gradient circles

Examples explained

SVG Transformations

Translate() function: Move an object horizontally Translate() function: Move an object vertically Translate() function: Move an object horizontally and vertically Scale() function: Scale an object Scale() function: Scale an object vertically Scale() function: Scale an object horizontally Rotate() function: Rotate an object by a degree SkewX() function: Skew an object along the x axis by a degree SkewY() function: Skew an object along the y axis by a degree

Examples explained

SVG Clipping and Masking

<clipPath>: Remove a part from an element <mask>: Apply a rectangular mask to an element <mask>: Apply a circular mask to an element <mask>: Fill color and opacity <mask>: Gradients in mask

Examples explained

SVG Animation

<set>: Sets the value of an attribute for a specified duration <animate>: Animates an attribute of an element <animate>: with freeze <animateTransform>: Animates the transform attribute on the target element <animateMotion>: Sets how an element moves along a motion path

Examples explained

SVG Scripting

Change attribute value with JavaScript Change CSS with JavaScript Change attribute value and CSS with JavaScript Animate element with JavaScript

Examples explained

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 Rotating ellipses

❮ Previous Next ❯

Top Tutorials

HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top Examples

HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples