svg im Überblick - fldit- · svg - skalierbare vektorgrafiken. ein Überblick. dr. thomas meinike...

SVG- Skalierbare Vektorgrafiken

Ein Uumlberblick

Dr Thomas Meinike

Hochschule Merseburg (FH)Fachbereich Informatik und Kommunikationssysteme

thomasmeinikehs-merseburgdehttpwwwetfh-merseburgdepersonmeinike

Merseburg 2005-10-25

SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [2103]

Inhaltliche SchwerpunkteInhaltliche Schwerpunkte

Grundlagen

- Allgemeines uumlber das Thema SVG- Aufbau von SVG-Dokumenten- Grundformen und weitere Zeichentechniken- Gradienten Filter Transformationen Animationen

Fortgeschrittene Techniken

- Aktionsprogrammierung mit JavaScript- SVG-Generierung mittels XSLT und PHP

Nicht oder oder nur ansatzweise behandelt werden

- Mobile SVG-Standards ( tekom-Tagung im Nov 2005)- SVG 12 ( Material unter svglbcdatenverdrahtende)


Was ist SVGWas ist SVG SVG wurde urspruumlnglich von Adobe als Gegenentwurf zu anderen

vektorbasierten Web-Technologien wie Flash oder VML entwickelt undspaumlter als W3C-Empfehlung verabschiedet


Was ist SVGWas ist SVG XML-Vokabular zur Beschreibung von 2D-Vektorgrafiken


Was ist SVGWas ist SVG SVG 10 ist eine 2001 verabschiedete W3C-Spezifikation zur

Beschreibung von 2D-Vektorgrafiken in XML-Syntax

Enthalten sind geometrische Primitive wie Rechteck Kreis Ellipse LiniePolylinie Polygon sowie weitere Elemente zur Darstellung von PfadenText Hyperlinks usw

SVG-Inhalte lassen sich mit CSS formatieren und durch den Einsatzvon JavaScript-Routinen dynamisch veraumlndern sowie mit Sprachen wiePHP Perl usw leicht auf dem Webserver erzeugen

Techniken wie Animationen Gradienten Filter und Transformationenermoumlglichen auch komplexe Darstellungen

Vorteile

offen plattformunabhaumlngig durchsuchbar Einsatz fuumlr Web und Print

Einsatzgebiete

Kartografie technische Illustration Datenpraumlsentation XML-Workflows


W3CW3C--SVGSVG--RoadmapRoadmap Zeitraster

092001 SVG 10

012003 SVG 11 (Modularisierung in mobile Profile Tiny bzw Basic)

072006 SVG 12 (Erweiterung des Sprachumfangs)


W3CW3C--SVGSVG--SpezifikationenSpezifikationen

httpwwww3org


Beteiligte Autoren FirmenBeteiligte Autoren Firmen


Software zur SVG-Erstellung Adobe Illustrator (adobecom)


Software zur SVG-Erstellung Jasc WebDraw (jasccom)


Software zur SVG-Erstellung Inkscape (inkscapeorg)


Software zur SVG-Erstellung Beatware Mobile Designer (beatwarecom)


Software zur SVG-Darstellung

Adobe SVG Viewer (ASV 30x 60 preview 1) alsBrowser Plug-in fuumlr IE NetscapeMozilla Opera

Corel SVG Viewer (CSV 20x)

Browser mit nativer SVG-Unterstuumltzung- spezielle MozillaFirefox-Builds (ab FF 15 SVG nativ)- Opera ab Version 8 (Beta 3) stellt SVG-Tiny 11 dar

Batik Squiggle aus dem Batik SVG Toolkit (Java-basiert)

Einbindung uumlber Java-Applets wie z B TinyLineSVG Player for Web

Handys mit integriertem Viewer (K700i S65 )



ASV 30x - Kontextmenuuml



Opera 8 | TinyLine Applet | Handy



Mozilla Firefox ab Version 15 (aktuell Beta 2)


Syntaxregeln zur Erstellung von XMLSyntaxregeln zur Erstellung von XML--DokumentenDokumenten Kriterien fuumlr die Wohlgeformtheit (well-formedness)

Es gibt genau ein Wurzelelement welches alle Inhalte umschlieszligt

Alle Elemente sind durch Anfangs- und Endtags korrekt ausgezeichnet(leere Elemente in der Form ltel gtltelgt oder ltel gt)

Alle Elemente sind korrekt ineinander verschachtelt(ltagtltbgtltbgtltagt und nicht ltagtltbgtltagtltbgt)

Attributwerte stehen in Anfuumlhrungszeichen (paarweise ldquoldquo oder lsquolsquo)

Regeln fuumlr die Schreibweise werden eingehalten

Reservierte Zeichen sind je nach Kontext ggf maskiertlt = amplt | gt = ampgt | amp = ampamp | ldquo = ampquot | lsquo = ampapos

Ungeparste Inhalte in CDATA-Abschnitten moumlglich lt[CDATA[]]gt

Kommentare (einzeiligmehrzeilig) lt-- --gt


SVG im UumlberblickSVG im Uumlberblick

SVG-XML-Grundgeruumlst

ltxml version=10 encoding=ISO-8859-1 standalone=nogt

ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt

ltsvg xmlns=httpwwww3org2000svg

xmlnsxlink=httpwwww3org1999xlinkgt

lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt

lt-- weitere SVG-Inhalte --gt

ltsvggt


SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem

Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]


SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau

Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert



Grafische Grundformen Rechteck

ltrect x= y= width= height=rx= ry=gt

x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)

ltrect x=30 y=40width=80 height=60gt

ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt



Grafische Grundformen Kreis

ltcircle cx= cy= r=gt

cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius

ltcircle cx=80 cy=70 r=30gt



Grafische Grundformen Ellipse

ltellipse cx= cy= rx= ry=gt

cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung

ltellipse cx=80 cy=70rx=50 ry=30gt



Grafische Grundformen Linie

ltline x1= y1= x2= y2=gt

x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes

ltline x1=20 y1=30x2=120 y2=110gt



Grafische Grundformen Mehrfachlinie

ltpolyline points=x1y1 x2y2 xnyngt

points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen

ltpolyline points=3040 20604080 120100 80110gt



Grafische Grundformen Polygon (n-Eck n ge 3)

ltpolygon points=x1y1 x2y2 xnyngt

points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden

ltpolygon points=3040 20604080 120100 80110gt



Grafische Spezialformen Pfade

ltpath d=gt

d = Pfad-Daten mit diesen Parametern

[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy

elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten




ltpath d=M4040 L5070 H80 V100 L100120gt

ltpath d=M4040 l1030 h30 v30 l2020gt




ltpath d=M6040 Q20100 100120gt

quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1

Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome

C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]




ltpath d=M6040 C20100 12030 100120gt

kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2

C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]




ltpath d=M6090 L6050 A4040 0 01 10090Zgt

large-arc(Groumlszlige)

(0) 0180deg(1) gt180deg

sweep(Richtung)

(0) negativ(1) positiv

x-Rotation



Grafikobjekte Inhalte gruppieren

ltg fill=none stroke=blue stroke-width=1gt

ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt

ltggt

Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften



Textinhalte (einzelne Texte oder mehrere Zeilen)

lttext x= y=gtTextinhaltlttextgt

x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie

lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt

lttextgt

dy = vertikaler Zeilenabstand(z B Angabe in em)



Hyperlinks (aumlhnlich zu Links in HTML)

lta xlinkhref=gtlttext x= y=gtLinktextlttextgt

ltagt

lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt

ltcircle gtltagt

Hinweis XLink-Namensraum im Wurzelelement angeben



externe Bilder (aumlhnlich zu Bildern in HTML)

ltimage xlinkhref=x= y= width= height=gt

BildformatebullGIF

bullJPEG

bullPNG

bullSVG




Formatierung mit Praumlsentationsattributen

ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel

ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt

ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)

lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt



Formatierung mit CSS-Eigenschaften (style-Attribut)


ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt


lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt



Formatierung mit CSS-Eigenschaften (style-Element)

ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen

circlefill redstroke bluestroke-width 2px

]]gtltstylegt

ltdefsgt

bullSelektoren aus CSS 2

bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene



Formatierung mit CSS-Eigenschaften (externes Stylesheet)

ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt

ltsvg gt

ltsvggt




Wichtige Attribute bzw CSS-Eigenschaften

ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray

- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity

- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform

- Anzeige von Objekten display visibility

- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte



Farbwerte (AttributeEigenschaften fill stroke usw)

Beispiel Farbe rot

ndash hexadezimal 6-stellig (RRGGBB) FF0000

ndash hexadezimal 3-stellig (RGB) F00

ndash dezimale RGB-Schreibweise rgb(25500)

ndash prozentuale RGB-Schreibweise rgb(10000)

ndash Farbwort red


SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML

ndash ndash W3C-konform uumlber die Element object oder iframe

ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt

ltobjectgt

ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt

ltiframegt

ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination

ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt

ltembedgt



Spezielle SVG-Elemente symbol (Symbolobjekte)

ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt

ltrect x=11 y=16 width=10 height=10fill=F00gt

ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt



Weitere spezielle SVG-Elemente

pattern marker

clipPath mask



Farbverlaumlufe linearGradient radialGradient

ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt

ltlinearGradientgtltdefsgt

Attribute zur Steuerung von Verlaumlufen

- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten

Einbindung als Fuumlllung fill=url(eineID)



Linerare Farbverlaumlufe linearGradient

1

ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt

ltlinearGradientgt

2

ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt

ltlinearGradientgt



Radiale Farbverlaumlufe radialGradient

2ltradialGradient id=rad2 fx=30 fy=70gt

ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt

ltradialGradientgt



Filter-Elemente Allgemeines

ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt

ltfiltergtltdefsgt

Einbindung mit filter-Attributfilter=url(eineID)



Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)

ltfeBlendgt - zwei Objekte uumlberblenden

ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung

ltfeComponentTransfergt - Farbkomponenten neu berechnen

ltfeCompositegt - zwei Objekte zusammenfuumlgen

ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter

ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt

ltfeDisplacementMapgt - Pixelverschiebung

ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen

ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)

ltfeImagegt - Bild zuweisenladen

ltfeMergegt - beliebig viele Objekte zusammenfuumlgen

ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes

ltfeOffsetgt - Objekt verschieben

ltfeSpecularLightinggt - direkter Beleuchtungseffekt

ltfeTilegt - Bild innerhalb eines Objektes kacheln

ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)



Filter-Elemente Beispiel

ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt

ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt

ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt

ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt


SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS



Koordinatensystem-Transformationen Allgemeines

Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen

Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt

Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen

scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)

skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse

translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung

Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)




Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]

Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo

= 3x3-Matrix mit sechs relevanten Parametern

|a c e||b d f||0 0 1|

mit folgenden Zuordnungsvorschriften



Koordinatensystem-Transformationen Beispiele

Rotation um den Ursprung bzw um einen anderen Drehpunkt




Skalierung (Vergroumlszligerung bzw Verkleinerung)




Neigung (der Achsen in x- bzw y-Richtung)




Verschiebung (in x- bzw y-Richtung)




Kombination von Transformationen

Rotieren --gt Skalieren --gt Verschieben




Transformation einer Gruppe von Objekten

ltg transform=gtltrect gtlttext gt

ltggt




Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung

HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll



Animationen Allgemeines

Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)

animate Animation skalarer XML-Attribute CSS-Eigenschaften

animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)

animateMotion Bewegung an einem Pfad entlang

set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben




Animationselemente (SVG-Erweiterungen von SMIL)

animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)

animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax




Zuweisung von Animationen

- als Kindelement eines zu animierenden SVG-Elements

ltelementgtltanimationselement gt

ltelementgt

- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID

ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt




Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften

attributeName= erhaumllt Name des Attributes oder der Eigenschaft

attributeType=CSS | XML | auto

CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft

oder Attribut mit dem bei attributeName angegebenen Wert

- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation


SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines

Attribute zur Steuerungbegin Startzeitpunkt(e)

end Endzeitpunkt

dur Zeitdauer eines Animationsdurchlaufes

min minimaler Zeitwert fuumlr einen Durchlauf

max maximaler Zeitwert fuumlr einen Durchlauf

restart Vorgaben fuumlr den Neustart einer Animation

repeatCount Anzahl von Wiederholungen

repeatDur Gesamtzeit fuumlr Wiederholungen der Animation

from Startwert eines Attributes einer Eigenschaft

to Endwert eines Attributeseiner Eigenschaft

by relative Aumlnderung eines Attributes

fill freeze remove



Animationen Beispiele

Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx



Animationen Beispiel 01

Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck

ltcircle id=k1 class=rot cx=50 cy=40 r=20gt

ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt

ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt

ltcirclegt




Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut

ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt

ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt

lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt




Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert

lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt

ltpathgt




Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)

lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt

ltrectgt




Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)

ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt

ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt

ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt

lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt

ltlinearGradientgt




Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility

lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt

ltrectgt





lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt

lttextgt


SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen

XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen

SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind

Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt

XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet



Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)

HTML XML Text

XML-Dokument XSL-Stylesheet

Formatter

XSLT-Prozessor

PDF RTF Print

+

MSXML Sablotron Saxon Xalan

AntennaHouse FOP XEP XINC

= Ausgabe[+ DTDSchema]

fo

xsl



Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)

ltxml version=10 encoding=ISO-8859-1gt

ltrechteckegt

ltrechteckgt

ltlinksoben_xgt50ltlinksoben_xgt

ltlinksoben_ygt120ltlinksoben_ygt

ltbreitegt180ltbreitegt

lthoehegt75lthoehegt

ltfarbegtgreenltfarbegt

ltrechteckgt

lt-- weitere Rechteck-Definitionen --gt

ltrechteckegt



Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)


ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt

ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt

ltxsltemplate match=gt

ltsvg xmlns=httpwwww3org2000svggt

ltxslfor-each select=rechteckerechteckgt

ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt

ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt



Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)




ltrect x=50 y=120 width=180 height=75 fill=greengt

ltrect x=300 y=70 width=100 height=250 fill=yellowgt

ltrect x=100 y=250 width=90 height=40 fill=redgt

ltsvggt

Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg



Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)



Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)

- Rohdaten




- SVG-Ergebnis (einwohnersvg)


SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen

SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben

Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw

Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden

Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml

Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)

Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)

AddType imagesvg+xml svg svgz



Umsetzung des Einwohner-Beispiels mit PHP

- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat

Sachsen-Anhalt25490002044472



Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)

ltphp

Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)

Daten einlesen aufbereiten und ausgeben

$daten=file(einwohnerdat)

$anzahl=count($daten)

$ew_max=1

for($i=0$ilt$anzahl$i++)

$zeile=explode(trim($daten[$i]))

$bl[$i]=$zeile[0] Bundesland

$ew[$i]=$zeile[1] Einwohnerzahl

$fl[$i]=$zeile[2] Flaeche

if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln




Fortsetzung der SVG-Ausgabe

$max_breite=700

$faktor=$max_breite$ew_max


print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn

print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn

print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn

gt



Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis



Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP




Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp

Dat

enqu

elle

te

kom

eV

20

03



Anwendung MSpecSVG ndash Massenspektren darstellen

- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)



Anwendung MSpecSVG - Massenspektren darstellen

- Prinzip der Verarbeitung

- Auswahlmenuuml




- Ansicht im Browser


SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript

(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)

- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur

- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)

- Verwandte KonzepteDHTML ActionScript (FlashSWF)



- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt

intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)

ltscript type=textjavascriptgt

lt[CDATA[

JS-Code

]]gtltscriptgt

extern (als einfache Textdatei oder auch gzip-komprimiert)

ltscript xlinkhref=dateijs type=textjavascriptgt

ltscript xlinkhref=dateijsgz type=textjavascriptgt



- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf

var globale Variablen

function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion

function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion

- Funktionen werden ereignisgesteuert aufgerufen

- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)



- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)

Beispiel click-Event beim Anklicken von Objekten

- Zur Reaktion auf diese Events dienen Event-Handler

Beispiel onclick-Event-Handler (Prefix on)

- Event-Handler werden als Element-Attribute verwendet

Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt



- Einfaches SVG-Beispiel Code

ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt

ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt

lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt

lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt

ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt

ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt

ltpolygon id=po points=28060 30020 32060 style=fill 090gt

ltsvggt



- Beispiel erweitert mit SVG-DOM-Zugriff

SVG-Objekte

lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt


JavaScript-Funktion

function ChangeColor(click_evtobjidcol)var svgdocobjtxt

svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)

txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col


SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele

SVG-DOM-Scripting kompakt



Mini-Zeichenprogramm

http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes



Periodensystem mit Online-Datenabfrage

http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg



Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)

http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm



SVG mdash Learning By Coding (Beispielsammlung)


SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen

Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration

http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php


Inhaltliche SchwerpunkteInhaltliche Schwerpunkte

Grundlagen

- Allgemeines uumlber das Thema SVG- Aufbau von SVG-Dokumenten- Grundformen und weitere Zeichentechniken- Gradienten Filter Transformationen Animationen

Fortgeschrittene Techniken

- Aktionsprogrammierung mit JavaScript- SVG-Generierung mittels XSLT und PHP

Nicht oder oder nur ansatzweise behandelt werden

- Mobile SVG-Standards ( tekom-Tagung im Nov 2005)- SVG 12 ( Material unter svglbcdatenverdrahtende)












Vorteile


Einsatzgebiete




092001 SVG 10





httpwwww3org















































ltsvggt































ltline x1=20 y1=30x2=120 y2=110gt
















ltpath d=gt







ltpath d=M4040 L5070 H80 V100 L100120gt

ltpath d=M4040 l1030 h30 v30 l2020gt




ltpath d=M6040 Q20100 100120gt







ltpath d=M6040 C20100 12030 100120gt






ltpath d=M6090 L6050 A4040 0 01 10090Zgt


(0) 0180deg(1) gt180deg

sweep(Richtung)


x-Rotation






ltggt








lttextgt






ltagt


ltcircle gtltagt






BildformatebullGIF

bullJPEG

bullPNG

bullSVG





















]]gtltstylegt

ltdefsgt







ltsvg gt

ltsvggt













Beispiel Farbe rot





ndash Farbwort red





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php












Vorteile


Einsatzgebiete




092001 SVG 10





httpwwww3org















































ltsvggt































ltline x1=20 y1=30x2=120 y2=110gt
















ltpath d=gt







ltpath d=M4040 L5070 H80 V100 L100120gt

ltpath d=M4040 l1030 h30 v30 l2020gt




ltpath d=M6040 Q20100 100120gt







ltpath d=M6040 C20100 12030 100120gt






ltpath d=M6090 L6050 A4040 0 01 10090Zgt


(0) 0180deg(1) gt180deg

sweep(Richtung)


x-Rotation






ltggt








lttextgt






ltagt


ltcircle gtltagt






BildformatebullGIF

bullJPEG

bullPNG

bullSVG





















]]gtltstylegt

ltdefsgt







ltsvg gt

ltsvggt













Beispiel Farbe rot





ndash Farbwort red





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php



092001 SVG 10





httpwwww3org















































ltsvggt































ltline x1=20 y1=30x2=120 y2=110gt
















ltpath d=gt







ltpath d=M4040 L5070 H80 V100 L100120gt

ltpath d=M4040 l1030 h30 v30 l2020gt




ltpath d=M6040 Q20100 100120gt







ltpath d=M6040 C20100 12030 100120gt






ltpath d=M6090 L6050 A4040 0 01 10090Zgt


(0) 0180deg(1) gt180deg

sweep(Richtung)


x-Rotation






ltggt








lttextgt






ltagt


ltcircle gtltagt






BildformatebullGIF

bullJPEG

bullPNG

bullSVG





















]]gtltstylegt

ltdefsgt







ltsvg gt

ltsvggt













Beispiel Farbe rot





ndash Farbwort red





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php



httpwwww3org















































ltsvggt































ltline x1=20 y1=30x2=120 y2=110gt
















ltpath d=gt







ltpath d=M4040 L5070 H80 V100 L100120gt

ltpath d=M4040 l1030 h30 v30 l2020gt




ltpath d=M6040 Q20100 100120gt







ltpath d=M6040 C20100 12030 100120gt






ltpath d=M6090 L6050 A4040 0 01 10090Zgt


(0) 0180deg(1) gt180deg

sweep(Richtung)


x-Rotation






ltggt








lttextgt






ltagt


ltcircle gtltagt






BildformatebullGIF

bullJPEG

bullPNG

bullSVG





















]]gtltstylegt

ltdefsgt







ltsvg gt

ltsvggt













Beispiel Farbe rot





ndash Farbwort red





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php















































ltsvggt































ltline x1=20 y1=30x2=120 y2=110gt
















ltpath d=gt







ltpath d=M4040 L5070 H80 V100 L100120gt

ltpath d=M4040 l1030 h30 v30 l2020gt




ltpath d=M6040 Q20100 100120gt







ltpath d=M6040 C20100 12030 100120gt






ltpath d=M6090 L6050 A4040 0 01 10090Zgt


(0) 0180deg(1) gt180deg

sweep(Richtung)


x-Rotation






ltggt








lttextgt






ltagt


ltcircle gtltagt






BildformatebullGIF

bullJPEG

bullPNG

bullSVG





















]]gtltstylegt

ltdefsgt







ltsvg gt

ltsvggt













Beispiel Farbe rot





ndash Farbwort red





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php































ltline x1=20 y1=30x2=120 y2=110gt
















ltpath d=gt







ltpath d=M4040 L5070 H80 V100 L100120gt

ltpath d=M4040 l1030 h30 v30 l2020gt




ltpath d=M6040 Q20100 100120gt







ltpath d=M6040 C20100 12030 100120gt






ltpath d=M6090 L6050 A4040 0 01 10090Zgt


(0) 0180deg(1) gt180deg

sweep(Richtung)


x-Rotation






ltggt








lttextgt






ltagt


ltcircle gtltagt






BildformatebullGIF

bullJPEG

bullPNG

bullSVG





















]]gtltstylegt

ltdefsgt







ltsvg gt

ltsvggt













Beispiel Farbe rot





ndash Farbwort red





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php
















ltpath d=gt







ltpath d=M4040 L5070 H80 V100 L100120gt

ltpath d=M4040 l1030 h30 v30 l2020gt




ltpath d=M6040 Q20100 100120gt







ltpath d=M6040 C20100 12030 100120gt






ltpath d=M6090 L6050 A4040 0 01 10090Zgt


(0) 0180deg(1) gt180deg

sweep(Richtung)


x-Rotation






ltggt








lttextgt






ltagt


ltcircle gtltagt






BildformatebullGIF

bullJPEG

bullPNG

bullSVG





















]]gtltstylegt

ltdefsgt







ltsvg gt

ltsvggt













Beispiel Farbe rot





ndash Farbwort red





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php




ltpath d=M4040 L5070 H80 V100 L100120gt

ltpath d=M4040 l1030 h30 v30 l2020gt




ltpath d=M6040 Q20100 100120gt







ltpath d=M6040 C20100 12030 100120gt






ltpath d=M6090 L6050 A4040 0 01 10090Zgt


(0) 0180deg(1) gt180deg

sweep(Richtung)


x-Rotation






ltggt








lttextgt






ltagt


ltcircle gtltagt






BildformatebullGIF

bullJPEG

bullPNG

bullSVG





















]]gtltstylegt

ltdefsgt







ltsvg gt

ltsvggt













Beispiel Farbe rot





ndash Farbwort red





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php




ltpath d=M6040 Q20100 100120gt







ltpath d=M6040 C20100 12030 100120gt






ltpath d=M6090 L6050 A4040 0 01 10090Zgt


(0) 0180deg(1) gt180deg

sweep(Richtung)


x-Rotation






ltggt








lttextgt






ltagt


ltcircle gtltagt






BildformatebullGIF

bullJPEG

bullPNG

bullSVG





















]]gtltstylegt

ltdefsgt







ltsvg gt

ltsvggt













Beispiel Farbe rot





ndash Farbwort red





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php




ltpath d=M6040 C20100 12030 100120gt






ltpath d=M6090 L6050 A4040 0 01 10090Zgt


(0) 0180deg(1) gt180deg

sweep(Richtung)


x-Rotation






ltggt








lttextgt






ltagt


ltcircle gtltagt






BildformatebullGIF

bullJPEG

bullPNG

bullSVG





















]]gtltstylegt

ltdefsgt







ltsvg gt

ltsvggt













Beispiel Farbe rot





ndash Farbwort red





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php




ltpath d=M6090 L6050 A4040 0 01 10090Zgt


(0) 0180deg(1) gt180deg

sweep(Richtung)


x-Rotation






ltggt








lttextgt






ltagt


ltcircle gtltagt






BildformatebullGIF

bullJPEG

bullPNG

bullSVG





















]]gtltstylegt

ltdefsgt







ltsvg gt

ltsvggt













Beispiel Farbe rot





ndash Farbwort red





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php






ltggt








lttextgt






ltagt


ltcircle gtltagt






BildformatebullGIF

bullJPEG

bullPNG

bullSVG





















]]gtltstylegt

ltdefsgt







ltsvg gt

ltsvggt













Beispiel Farbe rot





ndash Farbwort red





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php







lttextgt






ltagt


ltcircle gtltagt






BildformatebullGIF

bullJPEG

bullPNG

bullSVG





















]]gtltstylegt

ltdefsgt







ltsvg gt

ltsvggt













Beispiel Farbe rot





ndash Farbwort red





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php





ltagt


ltcircle gtltagt






BildformatebullGIF

bullJPEG

bullPNG

bullSVG





















]]gtltstylegt

ltdefsgt







ltsvg gt

ltsvggt













Beispiel Farbe rot





ndash Farbwort red





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php





BildformatebullGIF

bullJPEG

bullPNG

bullSVG





















]]gtltstylegt

ltdefsgt







ltsvg gt

ltsvggt













Beispiel Farbe rot





ndash Farbwort red





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php




















]]gtltstylegt

ltdefsgt







ltsvg gt

ltsvggt













Beispiel Farbe rot





ndash Farbwort red





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php





ltsvg gt

ltsvggt













Beispiel Farbe rot





ndash Farbwort red





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php












Beispiel Farbe rot





ndash Farbwort red





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php





ltobjectgt


ltiframegt



ltembedgt










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php










pattern marker

clipPath mask












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php












1


ltlinearGradientgt

2


ltlinearGradientgt






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php






ltradialGradientgt





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php





ltfiltergtltdefsgt














































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php













































|a c e||b d f||0 0 1|




























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php



























ltggt


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php


























ltelementgt















end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php













end Endzeitpunkt










fill freeze remove












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php












ltcirclegt













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php













ltpathgt






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php






ltrectgt









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php









ltlinearGradientgt






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php






ltrectgt






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php






lttextgt










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php










HTML XML Text


Formatter

XSLT-Prozessor

PDF RTF Print

+




fo

xsl





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php





ltrechteckegt

ltrechteckgt






ltrechteckgt


ltrechteckegt











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php











ltxslfor-eachgt

ltsvggt

ltxsltemplategt

ltxslstylesheetgt










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php










ltsvggt








- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php







- Rohdaten






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php






















ltphp





$ew_max=1











$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php





$max_breite=700






gt











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php











Dat

enqu

elle

te

kom

eV

20

03









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php









- Auswahlmenuuml
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php
















lt[CDATA[

JS-Code

]]gtltscriptgt






























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php



























ltsvggt




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php




SVG-Objekte



JavaScript-Funktion










http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php







http

s

vglb

cda

tenv

erdr

ahte

nde

do

c=dr

awsh

apes




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php




http

w

ww

et

fh-m

erse

burg

de

pers

onm

eini

kep

tabl

esvg




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php




http

w

ww

abo

ut-s

vgd

ein

dex_

LEh

tm







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php







http

s

vgm

obd

aten

verd

raht

end

ew

4n_d

emo

php

svg im Überblick - fldit- · svg - skalierbare vektorgrafiken. ein Überblick. dr. thomas meinike...

Documents