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

Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Reference 79

Computer

Hardware 249

Software

Application 213

Digitization 32

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 429

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

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-2024 Sideway . All rights reserved Disclaimers last modified on 06 September 2019