SVG Examples -- in progress
|
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
Text: text2.svg : text : coordinates text6.svg : text : attributes textpath1.svg : textPath : animate : startOffset
Fun: filterTurbulence10.svg - feComponentTransfer : feTurbulence use4.svg : use : group : animateTransform 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 |
