Basic shapes:
arcs.svg : path : arc
circles.svg : ellipse : stroke-dasharray
circles2.svg : ellipse : stroke-dasharray (Opera only)
circles3.svg : ellipse : stroke-dasharray (IE or Opera)
wiggleline.svg : path : stroke-dasharray (Opera only)
wiggleline2.svg : path : stroke-dasharray (IE or Opera)
Colorstacks.svg : rect : stacking order
ellipses2.svg : ellipse : fill : stroke: stroke-dasharray
path1.svg : path : d - start & stop : fill
path2.svg : path : d - start & stop : fill : coordinates
path3.svg : path : fill-rule="evenodd" :
transform="translate"
path4.svg : path : compare "L" to "Q" : coordinates
path4a.svg : path : cubic spline : coordinates
path5.svg : path : contrast "Q" with "C" : coordinates
path6.svg : path : "C" limiting cases: coordinates
path7.svg : path : cubic spline : control points
path8.svg : path : cublic spline : control points :
smooth curves
path8a.svg : path : cublic spline : control points :
smooth curves
path9.svg : path : cubic spline : animated
path10.svg : path : cubic spline : animated
rects.svg : rect : fill : stroke
simpleshapes.svg : line : stroke : marker : arrows
simplest.svg : circle : something visible in 16 chars
Grouping and reusing:
flower.svg : ellipse : use : g : animate : animateTransform : animateColor
group1.svg : g : transform="translate()"
group3.svg : g : use : inherit : inheriting attributes
use1.svg : use : ellipse : transform="rotate()"
use2.svg : use : ellipse : g : use : transform="rotate()"
use4.svg : use : ellipse : g : transform="rotate()" : animate
Gradients, patterns, opacity:
opacity.svg : circle : opacity
gradient3.svg : linearGradient : radialGradient : stop : offset : stop-color
gradient8.svg : radialGradient : stop : offset : stop-color :
stop:opacity : image
gradient5.svg : linearGradient : gradientTransform: radialGradient : fx
gradient4a.svg : linearGradient : radialGradient : animate
gradient9.svg : radialGradient: stop-opacity : gradientTransform : image
gradient10.svg : linearGradient : stop-opacity : gradientTransform
gradient11a.svg : radialGradient : animate : spreadMethod="reflect"
pattern1d.svg : pattern
pattern4.svg : pattern : animateTransform : image
SMIL:
SMIL1.svg : animate : attributeName : rx : begin : end : click
SMILnot.svg : rx : onclick : script : function : JavaScript : setAttributeNS
SMIL3.svg : animate : cx : cy : dur : linear motion
SMIL4.svg : animate : dur : values : linear motion
SMIL2a.svg : animate : keyTimes : spline : keySplines : nonlinear motion
SMIL5.svg : animate : keyTimes : spline : keySplines : nonlinear motion
SMIL7g.svg : animateMotion : mpath : begin : dur : end : lagging behind
SMIL7h.svg : animateMotion : rotate: set : tref : single button
SMIL12.svg : animate : attributeName="d" : spreadMethod="reflect" : animateTransform
SMIL11.svg : animateMotion : script : beginElement()
followPath.svg: animateMotion: beginElement()
followPath5.svg: animateMotion: beginElement()
followPath6.svg: animateMotion: beginElement()
Transformations:
translate.svg : path : transform : translate
transformScale1.svg : transform : scale
transformScale2.svg : transform : scale : x-scale and y-scale
transMult2.svg : transform : scale : translate : multiple transforms
transformScale3.svg : transform : scale : translate : additive="sum" : negative scale : reflect
translate2.svg : animateTransform: additive="sum" : translate : scale
transformRotate1.svg : animateTransform: additive="sum" : translate : scale : rotate
|
ClipPaths and Masks:
clipPath1.svg : clipPath : path : arc : clip-rule="evenodd" : animateTransform
clipPath4.svg : clipPath: intersections : animateTransform
mask6.svg : mask : text : alignment
mask4.svg : mask : linearGradient
mask3.svg : mask : linearGradient : animate
mask2.svg : mask : radialGradient : animate: offset : image :
mask1c.svg : mask : radialGradient : use : animate : image
Coordinate system:
coords.svg: overview : script : getBBox() : onclick : createElementNS : appendChild : clientX : clientY
viewBox.svg : viewBox : animate
zoom.svg : viewBox : animate
slider.svg: a slider, as for use in zooming
sliderzoom.svg: zooming on absolute coordinates
Filters:
filterBlur0ScopeofFilter.svg : filter : height : width : feGaussianBlur
BackgroundImage.svg : filter : backgroundImage : feComponentTransfer : feGaussianBlur
BackgroundImage2.svg : filter : backgroundImage: feComponentTransfer : feGaussianBlur
feImage.svg : filter : feImage : feTurbulence : feComponentTransfer : feColorMatrix : feGaussianBlur
feImage3.svg : filter : feImage : feColorMatrix : feMerge
feoffset1.svg : filter : feOffset : feGaussianBlur : feMerge
feTile1.svg : filter : feTile
filterColorMatrixMat.svg : filter : feColorMatrix : matrix
filterColorMatrixSaturate.svg : filter : feColorMatrix : saturate : values
filterBlend1.svg : filter :feBlend : mode
filterCombinations1.svg : filter : feTurbulence : feColorMatrix : matrix : feMerge
filterComposite1.svg : filter : feComposite : operator
filterComposite2.svg : filter : feComposite : operator
composite.svg filter : feComposite : mask
filterDisplacementMap5a.svg : feDisplacementMap : linearGradient
filterDisplacementMap.svg : feTurbulence : feDisplacementMap
filterDisplacementMap2 : feTurbulence : feDisplacementMap : radialGradient : spreadMethod="reflect"
filterDisplacementMap4.svg : feDisplacementMap : feTurbulence : onmousemove
filterDisplacementMap4a.svg : feDisplacementMap : feTurbulence : onmousemove : feImage
filterDisplacementMap9.svg : feDisplacementMap : pattern : checkerboard
filtermatrixPattern1.svg : feConvolveMatrix : pattern : texture : eggs
filterturb5.svg feTurbulence : texture
filterTurbulence0.svg : feTurbulence : baseFrequency : numoctaves : type="fractalNoise"
filterTurbulence6.svg feTurbulence : feMorphology
filterTurbulence7.svg : feTurbulence : feMorphology feComponentTransfer : feColorMatrix
filterTurbulence8.svg
filterTurbulence9.svg
flood.svg
Text:
text2.svg : text : coordinates
text6.svg : text : attributes
textpath1.svg : textPath : animate : startOffset
Fun:
filterTurbulence10.svg - feComponentTransfer : feTurbulence
use4.svg : use : group : animateTransform
flower.svg
floodTile9.svg : feFlood : texture : animate
gradient4b.svg : linearGradient : radialGradient : animate
gradient7.svg : a flame : radialGradient : animate : stop-opacity
gradient10.svg : linearGradient : stop-opacity : gradientTransform
gradient11b.svg : radialGradient : animate : spreadMethod="reflect"
pattern0.svg : clipPath : radialGradient : stop-opacity : animate : spreadMethod="reflect": image
pattern1a.svg : pattern : clipPath : radialGradient : stop-opacity : animate : spreadMethod="reflect": image
SMIL7.svg : animateMotion : lagged
mask1a.svg : mask : radialGradient : animate : image
mask0b.svg : mask : animate : offset : script : onmousemove
wiggleline.svg : path : stroke-dasharray
filterCombinations2.svg : filter : feTurbulence : feColorMatrix : matrix : feMerge : animate
filterTurbulence7a.svg : feTurbulence : feImage : feComponentTransfer : feMorphology : feColorMatrix
rippling3.svg
|