HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
The following example is the SVG code directly embedded into HTML code.
Google Chrome, Firefox, Internet Explorer9, and Safari are supported.
NOTE: The following example will not run at the Opera, even if Opera support SVG - it does not support SVG directly in the HTML code.
SVG Basic Shapes
A rectangle with rounded corners
And heaped on the three ellipses
Define a line, text or outline color (stoke)
Define a line width, text or outline (stroke-width)
stroke-linecap attribute defines the end of an open path of different types:
The definition of a dotted line (stroke-dasharray)
SVG Filters
feOffset - offset by a rectangle, and then the top of the mixing offset image
feOffset - so that the shadows black
feOffset - shaded color coated
feOffset, feFlood, feComposite, feMerge and feMergeNode
SVG Gradient
Horizontal linear gradient from yellow to red oval
Vertical linear gradient from yellow to red oval
Horizontal linear gradient from yellow to a red oval within the text and add
Radial gradient from white to blue oval
Radial gradient from white to blue oval another
SVG Miscellaneous
Repeat with 5 seconds fade rectangle
And change the color of the rectangle becomes large
It will change the color of the three rectangles
Motion along a path moving text
Along a motion path to move, rotate and scale text
Along a motion path to move, rotate and scale text + gradually enlarged and change color rectangle