Sideway
output.to from Sideway
Draft for Information Only

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

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

 

 

Sources and References

http://srufaculty.sru.edu/david.dailey/svg/newstuff/Newlist.htm

┬ęsideway

ID: 211200005 Last Updated: 12/5/2021 Revision: 0 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 337

Reference 68

Computer

Hardware 160

Software

Application 205

Digitization 25

Latex 35

Manim 203

Numeric 19

Programming

Web 285

Unicode 504

HTML 65

CSS 65

SVG 46new

ASP.NET 270

OS 422

DeskTop 7

Python 71new

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 32new

Coordinate Geometry 2

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1


Copyright © 2000-2022 Sideway . All rights reserved Disclaimers last modified on 06 September 2019