SVG Examples
Viewing SVG Files
All browsers support SVG files nowadays, except for Internet Explorer, which
needs a plug-in. Those are available for free, as for example the
Adobe SVG
Viewer.
Viewing SVG Source
To view the SVG source, open the example and right-click in the example
window. Select "View Source".
SVG Examples
SVG Shapes
A rectangle
A rectangle with opacity
A rectangle with opacity 2
A rectangle with rounded corners
A circle
An ellipse
Three ellipses on top of each other
Two ellipses
A line
A polygon with three sides
A polygon with four sides
A polyline
A path
A spiral
SVG Filters
A feGaussianBlur filter
Another feGaussianBlur filter
A feBlend filter
A feColorMatrix filter
A feComponentTransfer filter
A feOffset filter
feOffset, feFlood, feComposite, feMerge, and feMergeNode
A feMorphology filter
Filter 1
Filter 2
Filter 3
Filter 4
Filter 5
Filter 6
SVG Gradients
Grad linear (horizontal gradient)
Grad linear (vertical gradient)
Grad radial
Grad radial 2
SVG Misc
Add an <a> element to a rectangle. The rectangle will act as a hyperlink
Use a JavaScript to create an a element when the user clicks on a circle
Rectangle that repeatedly fade away over 5 seconds
Animate the x, y, width, and height attributes of a rectangle and change the color of the rectangle
Three rectangles that will change color
Text that will move along a motion path
Text that will move, rotate and scale along a motion path
Text that will move, rotate and scale along a motion path + a rectangle that will "grow" and change color
The Creators of XMLSpy are Pleased to Announce
| 
