w3schools    w3Schools
Search W3Schools :
   
HOME HTML CSS XML JAVASCRIPT ASP PHP SQL MORE...   References Examples About
ADVERTISEMENTS

XML Certification
Download XML editor
Custom Programming
 
Table of contents
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 Filters
SVG Intro
SVG Gaussian

SVG Gradients
SVG Linear
SVG Radial

SVG Examples
SVG Examples

SVG Reference
SVG Elements

Selected Reading
Web Statistics
Web Glossary
Web Hosting
Web Quality

W3Schools Tutorials
W3Schools Forum

Helping W3Schools

 

SVG Examples

prev next

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


prev next


diploma   

Get Your Diploma!

W3Schools' Online Certification Program is the perfect solution for busy professionals who need to balance work, family, and career building.

The HTML Certificate is for developers who want to document their knowledge of HTML, XHTML, and CSS.

The JavaScript Certificate is for developers who want to document their knowledge of JavaScript and the HTML DOM.

The XML Certificate is for developers who want to document their knowledge of XML, XML DOM and XSLT.

The ASP Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.

The PHP Certificate is for developers who want to document their knowledge of PHP and SQL (MySQL).


 
EDUCATION
HTML Certification
JavaScript Certification
XML Certification
PHP Certification
ASP Certification

W3Schools is for training only. We do not warrant the correctness of its content. The risk from using it lies entirely with the user.
Copyright 1999-2010 by Xdayx. All Rights Reserved.