Lerntext Vektorgrafik (svg)

Roland Heynkes, 13.1.2015

Gliederung

zum Text 3 Welten
zum Text Wozu Vektorgrafik?
zum Text Wie macht man Vektorgrafiken?
zum Text Das Zeichnen von Pfaden
zum Text Animationen
zum Text

3 Welten nach oben

Wer formatierte Texte mit eingebundenen Bildern erstellen möchte, hat die Wahl zwischen drei grundsätzlich unterschiedlichen Ansätzen, die alle ihre Vor- und Nachteile haben. Wer mit möglichst geringen Vorkenntnissen und ohne Handbuchstudium relativ einfache Texte zum Ausdrucken produzieren möchte, wählt eine Textverarbeitung wie MS Word. Das Programm zeigt den Text schon beim Schreiben ungefähr so, wie er ausgedruckt aussehen wird. Der tatsächlich abgespeicherte Text ist allerdings für Menschen praktisch gar nicht und sogar für neuere Programmversionen nur fehlerhaft lesbar. Für den Austausch mit Kollegen und für langfristige elektronische Speicherung eignen sich die von Textverarbeitungen produzierten Dateien daher kaum. Wer nach allen Regeln der Textsetzerkunst professionell gestaltete Texte mit vielen mathematischen oder chemischen Formeln schreiben möchte, kommt um TeX nicht herum. Das geht aber nicht ohne gründliche Einarbeitung sowie ständiges Üben und ist daher nichts für Leute, die TeX nur gelegentlich benutzen. Die resultierenden pdf-Dateien sehen zwar perfekt aus, aber die Vernetzung mit anderen Texten zu Hypertexten funktioniert nicht wirklich gut. Wer für das Internet schreibt und die Vorteile des World Wide Web voll ausspielen möchte, benötigt kein spezielles Programm, sondern eine besondere Programmiersprache.

Weil die Benutzer des World Wide Web mit ganz unterschiedlichen Geräten und Betriebssystemen arbeiten, sind Texte mit starr vorgegebenen (z.B. pdf) oder mit nur für bestimmte Versionen bestimmter Programme (z.B. MS-Word) korrekt lesbaren Formatierungen eher untauglich. Für das World Wide Web benötigt man Texte mit einer für Menschen und alle Geräte verständlichen Formatierung. Und das ist nur mit einem weltweit gültigen und für jeden kostenlos nutzbaren Standard möglich. Nach jahrelangen Machtkämpfen konkurrierender Unternehmen hat sich glücklicherweise das vom Erfinder (Tim Berners Lee) des World Wide Web angeführte World Wide Web Consortium (W3C) durchgesetzt. Es hat Standards erarbeitet, die immer wieder durch neue Möglichkeiten erweitert werden, ohne das dadurch ältere Texte unbrauchbar werden.

Es begann Ende 1990, als Tim Berners Lee der Welt die erste Software (WorldWideWeb alias Nexus) zum Lesen der ersten Internetseiten schenkte, die er in der von ihm entwickelten Seitenbeschreibungssprache HTML (Hypertext Markup Language = Hypertext-Auszeichnungssprache) geschrieben und auf einem von ihm programmierten Server abgelegt hatte. HTML beschreibt nicht wie eine Seite aussehen soll, sondern wie ihre verschiedenen Elemente zu interpretieren sind. Wie dann Überschriften, Tabellen, Quellcode oder Links konkret aussehen sollen, das bestimmen die Browser (Surf-Software). Wer möchte, kann die Browser dabei allerdings sehr weitgehend mit Hilfe von Cascading Style Sheets (CSS) unterstützen.

Anstatt sich seine Erfindungen patentieren zu lassen, bestand und besteht er bis heute darauf, dass das World Wide Web ausschließlich auf patentfreien Standards beruht. Später verallgemeinerte er HTML zu einer in alle möglichen Richtungen für die verschiedensten Zwecke erweiterbaren Auszeichnungssprache (Extensible Markup Language, XML), einer HTML umfassenden Metasprache zur Darstellung hierarchisch strukturierter Daten in Form von menschenlesbaren Textdateien für den plattform- und implementationsunabhängigen Austausch von Daten zwischen Computersystemen.

Von XML abgeleitet und deshalb auch mit HTML kompatibel sind die bekannten Standards RSS, MathML, GraphML, XHTML, XAML, GPX und SVG (Scalable Vector Graphics). Mit MathML lassen sich mathematische Formeln, mit GraphML Graphen und mit SVG Grafiken in HTML-Seiten integrieren.

Wozu Vektorgrafik? nach oben

Eingebettet in den HTML-Code sind Links (Sprungverweise) zu anderen Internetseiten oder zur Einbindung grafischer Elemente. Das können Photos, Pixelgrafiken oder animierte Pixelgrafiken (gif) sein, aber die wirken mit zunehmender Vergrößerung immer grobkörniger. Bindet man stattdessen statische oder animierte Vektorgrafiken ein, dann bleibt deren Qualität unabhängig von der Vergrößerung immer gleich.

Wie macht man Vektorgrafiken? nach oben

Man kann Vektorgrafiken im offenen und standardisierten svg-Format abspeichern und genau wie Pixelgrafiken durch Links in Texte einbinden. Weil eine Grafik im svg-Format nichts anderes als eine Reihe von Zeichnungsanweisungen ist, kann man sie aber auch direkt in den HTML-Code einbinden. Dazu öffnet (im übertragenen Sinne) man einfach im HTML-Text mit einem einleitenden: "<svg width="Xpx" height="Ypx">" ein X Pixel breites und Y Pixel hohes Grafik-Fenster und konstruiert innerhalb dieses mit "</svg>" abgeschlossenen Rahmens mit dem SVG-Befehlssatz eine Zeichnung. Dazu stehen zunächst einfache Anweisungen für Konstruktion von Linien, Rechtecken, Kreisen, Ellipsen und Polylinien/Polygone zur Verfügung.

<!-- Ich oeffne ein svg-Fenster mit 600 Pixeln Breite und 100 Pixeln Hoehe. -->
<svg width="600px" height="100px" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- http://www.w3.org/2000/svg heisst der Bezeichner fuer den eindeutigen SVG-Namensraum (SVG Namespace) -->
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <!-- Das ist die Dokument-Typ-Deklaration von SVG (Public Identifier) -->
  <title>Beispiel fuer eine svg-Grafik mit den Grafik-Grundelementen Linie, Rechteck, Kreis, Ellipse und Polylinie (Polygon)</title>
  <desc>Mit dem &lt;line&gt;-Befehl zeichnen wir eine schwarze Linie mit der Staerke 3 Pixel von Punkt x1,y1 zu Punkt x2,y2.</desc>
  <line x1="5" y1="5" x2="50" y2="95" style="stroke:black; stroke-width:3;" />
<desc>Rechteck mit abgerundeten Ecken von 100,10 links oben bis 100+100,10+50 rechts unten</desc>
  <rect x ="100" y ="10" width ="100" height ="50" rx ="5" ry ="5" fill="gray" stroke="black" stroke-width="3" />
<desc>Kreis um den Mittelpunkt 300,50 mit dem Radius 40 Pixel und einem schwarzen Rand um eine graue Flaeche</desc>
  <circle cx ="300" cy ="50" r ="40" fill="yellow" stroke="blue" stroke-width="5" />
<desc>Ellipse mit den Radien 20 und 40 Pixel um den Mittelpunkt 400,50.</desc>
  <ellipse cx="400" cy="50" rx="20" ry="40" fill="cyan" stroke="lime" stroke-width="4" />
<desc>eine Polylinie</desc>
  <polyline points="430,10 450,40 480,50 440,60 470,70 450,80 460,20" style="stroke:black; stroke-width:2; fill:none" />
<desc>ein Polygon</desc>
  <polygon points="480,10 500,40 530,50 490,60 520,70 500,80 510,20" style="stroke:black; stroke-width:2; fill:none" />
  <!-- Beschriftung der Endpunkte -->
  <g font-size="10" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
    <text x="17" y="8" dx="0">5,5</text>
    <text x="28" y="98" dy="0">50,95</text>
    <text x="80" y="13" dx="0">100,10</text>
    <text x="220" y="63" dx="0">200,60</text>
    <text x="300" y="50" dx="0">300,50</text>
    <text x="400" y="50" dx="0">400,50</text>
  </g>
</svg>

Beispiel für eine svg-Grafik mit den Grafik-Grundelementen Linie, Rechteck, Kreis, Ellipse und Polylinie (Polygon) Mit dem <line>-Befehl zeichnen wir eine schwarze Linie mit der Stärke 3 Pixel von Punkt x1,y1 zu Punkt x2,y2. Rechteck mit abgerundeten Ecken von 100,10 links oben bis 100+100,10+50 rechts unten Kreis um den Mittelpunkt 300,50 mit dem Radius 40 Pixel und einem schwarzen Rand um eine graue Fläche Ellipse mit den Radien 20 und 40 Pixel um den Mittelpunkt 400,50. eine Polylinie ein Polygon 5,5 50,95 100,10 200,60 300,50 400,50

Füllt man die Fläche in einem Polygon mit Farbe, dann stehen zwei ziemlich komplizierte Füllregeln zur Auswahl. Wie man an den folgenden Beispielen sieht, gelten diese Füllregeln auch Pfade. Die für Pfade anwendbaren Parameter erkläre ich im nächsten Kapitel.

Dieses Beispiel erklärt die fill-rule evenodd und die Anwendung von defs und use. fill-rule=evenodd, fill-opacity=0.6 Flächen werden gefärbt, wenn auf jedem Weg von der Fläche aus der Gesamtfigur heraus eine ungerade Anzahl von Linien überquert wird. 

<svg width="12cm" height="4cm" viewBox="0 0 1200 400"  version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Diese Beispiele erklaeren die fill-rule evenodd/nonzero und die Anwendung von defs und use.</desc>
  <rect x="1" y="1" width="1198" height="398"
        fill="lightcyan" stroke="blue" />
  <defs>
    <path id="Triangle" d="M 16,0 L -8,9 v-18 z" fill="black" stroke="none" />
  </defs>
  <g fill-rule="evenodd" fill="red" fill-opacity="0.6" stroke="black" stroke-width="3" >
    <path d="M 250,75 L 323,301 131,161 369,161 177,301 z" />
    <use xlink:href="#Triangle" transform="translate(306.21 249) rotate(72)" overflow="visible"  />
    <use xlink:href="#Triangle" transform="translate(175.16,193.2) rotate(216)" overflow="visible"  />
    <use xlink:href="#Triangle" transform="translate(314.26,161) rotate(0)" overflow="visible"  />
    <use xlink:href="#Triangle" transform="translate(221.16,268.8) rotate(144)" overflow="visible"  />
    <use xlink:href="#Triangle" transform="translate(233.21,126.98) rotate(288)" overflow="visible"  />
    <path d="M 600,81 A 107,107 0 0,1 600,295 A 107,107 0 0,1 600,81 z
             M 600,139 A 49,49 0 0,1 600,237 A 49,49 0 0,1 600,139 z" />
    <use xlink:href="#Triangle" transform="translate(600,188) rotate(0) translate(107,0) rotate(90)" overflow="visible"  />
    <use xlink:href="#Triangle" transform="translate(600,188) rotate(120) translate(107,0) rotate(90)" overflow="visible"  />
    <use xlink:href="#Triangle" transform="translate(600,188) rotate(240) translate(107,0) rotate(90)" overflow="visible"  />
    <use xlink:href="#Triangle" transform="translate(600,188) rotate(60) translate(49,0) rotate(90)" overflow="visible"  />
    <use xlink:href="#Triangle" transform="translate(600,188) rotate(180) translate(49,0) rotate(90)" overflow="visible"  />
    <use xlink:href="#Triangle" transform="translate(600,188) rotate(300) translate(49,0) rotate(90)" overflow="visible"  />
    <path d="M 950,81 A 107,107 0 0,1 950,295 A 107,107 0 0,1 950,81 z
             M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z" />
    <use xlink:href="#Triangle" transform="translate(950,188) rotate(0) translate(107,0) rotate(90)" overflow="visible"  />
    <use xlink:href="#Triangle" transform="translate(950,188) rotate(120) translate(107,0) rotate(90)" overflow="visible"  />
    <use xlink:href="#Triangle" transform="translate(950,188) rotate(240) translate(107,0) rotate(90)" overflow="visible"  />
    <use xlink:href="#Triangle" transform="translate(950,188) rotate(60) translate(49,0) rotate(-90)" overflow="visible"  />
    <use xlink:href="#Triangle" transform="translate(950,188) rotate(180) translate(49,0) rotate(-90)" overflow="visible"  />
    <use xlink:href="#Triangle" transform="translate(950,188) rotate(300) translate(49,0) rotate(-90)" overflow="visible"  />
  </g>
  <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="left">
    <text x="10" y="30" dx="0">fill-rule=evenodd, fill-opacity=0.6</text>
  <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="left">
    <text x="10" y="340" dx="0">Flaechen werden gefaerbt, wenn auf jedem Weg von der Flaeche aus der</text>
    <text x="10" y="380" dx="0">Gesamtfigur heraus eine ungerade Anzahl von Linien ueberquert wird.</text>
  </g>
</svg>

Dieses Beispiel erklärt die fill-rule nonzero und die Anwendung von defs und use. fill-rule=nonzero, fill-opacity=0.7 Flächen bleiben nur ungefärbt, wenn die den Weg nach außen schneidenden Linien ebenso oft (=0) nach links (-1) wie nach rechts (+1) verlaufen.

Das Zeichnen von Pfaden nach oben

Die folgende Liste soll die vielen Parameter erklären, die man mir dem path-Befehl anwenden kann:

Der folgende Quelltext demonstriert wichtige Möglichkeiten des path-Befehls:

<!-- Ich oeffne ein svg-Fenster mit 470 Pixeln Breite und 350 Pixeln Hoehe. -->
<svg width="470px" height="350px" xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- http://www.w3.org/2000/svg heisst der Bezeichner fuer den eindeutigen SVG-Namensraum (SVG Namespace) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Das ist die Dokument-Typ-Deklaration von SVG (Public Identifier) -->
  <title>Beispiel fuer eine svg-Grafik mit nur einem animierten Parameter</title>
  <desc>Es werden 4 Elipsenausschnitte (arc) gezeichnet.</desc>
  <path d="M200,220  A50,30 0 0,0 240,260" style="stroke: black; stroke-width:2; fill:none;"/>
  <path d="M200,220  A50,30 0 1,1 240,260" style="stroke: green; stroke-width:2; fill:none;"/>
  <path d="M200,220  A30,50 0 1,0 240,260" style="stroke: blue; stroke-width:2; fill:none;"/>
  <path d="M200,220  A30,50 0 0,1 240,260" style="stroke: red; stroke-width:2; fill:none;"/>
  <desc>2 Linien gezeichnet mit relativen Koordinaten</desc>
  <path id="lineAB" d="M 100 320 l 150 -300" stroke="red" stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 20 l 150 300" stroke="red" stroke-width="3" fill="none" />
  <desc>eine quadratische Bezier-Kurve</desc>
  <path d="M 100 320 q 150 -300 300 0" stroke="blue" stroke-width="3" fill="none" />
  <desc>eine kubische Bezier-Kurve</desc>
  <path d="M 100 320 c 300 -300 0 -300 300 0" stroke="purple" stroke-width="3" fill="none" />
  <desc>eine unterbrochene und animierte gruene Linie</desc>
  <path d="M 175 170 l 150 0" stroke="green" stroke-width="3" stroke-dasharray="20,10,5,5,5,10" fill="none" >
    <animate attributeName="stroke-width" from="3" to="1" begin="1s" dur="6s" repeatCount="indefinite" />
    <animate attributeName="d" from="M 175 170 l 150 0" to="M 175 270 l 150 0" begin="1s" dur="6s" repeatCount="indefinite" />
  </path>
  <!-- Nun werden die Endpunkte der roten Linien mit Kreisen markiert. -->
  <g fill="yellow" stroke="black" stroke-width="1">
    <circle id="pointA" cx="100" cy="320" r="3" />
    <circle id="pointB" cx="250" cy="20" r="3" />
    <circle id="pointC" cx="400" cy="320" r="3" />
  </g>
  <!-- Beschriftung der Endpunkte -->
  <g font-size="10" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
    <text x="100" y="320" dx="-30">A 100,320</text>
    <text x="250" y="20" dy="-10">B 250 20</text>
    <text x="400" y="320" dx="30">C 400 320</text>
  </g>
  Wenn dieser Satz angezeigt wird, dann kann der Browser keine inline-SVG anzeigen.
</svg>

Und so sieht das Ergebnis aus:

Beispiel für eine svg-Grafik mit nur einem animierten Parameter Es werden 4 Elipsenausschnitte (arc) gezeichnet. 2 Linien gezeichnet mit relativen Koordinaten eine quadratische Bézier-Kurve eine kubische Bézier-Kurve eine unterbrochene und animierte grüne Linie A 100,320 B 250 20 C 400 320 Wenn dieser Satz angezeigt wird, dann kann der Browser keine inline-SVG anzeigen.

Animationen nach oben

Um außer zweidimensionalen Vektorgrafiken auch zweidimensionale Animationen beschreiben zu können, enthält der svg-Befehlssatz auch einige Erweiterungen, die auf der vom World Wide Web Consortium wiederum auf der Basis des XML-Standards entwickelten Auszeichnungssprache für zeitsynchronisierte multimediale Inhalte namens SMIL (Synchronized Multimedia Integration Language) beruhen. Ein erstes Beispiel war schon weiter oben die dünner werdende grüne Linie. Die folgenden Beispiele zeigen die Animation weiterer Parameter. Richtige Anleitungen gibt es auf folgenden Internetseiten:

Animation zur Veranschaulichung der Notwendigkeit einer großen Steigbügelfläche konische Röhre obere animierte quadratische Bézier-Kurve mittlere animierte quadratische Bézier-Kurve untere animierte quadratische Bézier-Kurve zu kleiner Steigbügel korrekter Steigbügel ovales Fenster obere Verbindung als animierte quadratische Bézier-Kurve untere Verbindung als animierte quadratische Bézier-Kurve rundes Fenster bei richtigem Steigbügel rundes Fenster bei falschem Steigbügel Der Steigbügel muss das links blau gezeichnete runde Fenster fast komplett bedecken, damit der Druck fast vollständig in Richtung des rechts ebenfalls blau schwingenden runden Fensters weiter gegeben wird. Der grau gezeichnete, viel zu schmale Steigbügel bewirkt die rot gezeichnete Ausgleichsbewegung des ovalen Fensters und ein kaum schwingendes (rotes) rundes Fenster. Roland Heynkes, CC BY-NC-SA 4.0 Wenn dieser Satz angezeigt wird, dann kann der Browser keine inline-SVG anzeigen. 

  <svg width="300px" height="100px" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <title>Beispiel fuer eine svg-Grafik mit verschiedenen animierten Parametern</title>
  <desc>Zunaechst wird ein sich von schwarz nach gelb verfaerbendes Rechteck gezeichnet.</desc>
    <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="2" />
      <animate attributeName="fill" from="black" to="yellow" dur="5s" repeatCount="indefinite" />
    </rect>
<desc>Binnen 5 Sekunden veraendern sich saemtliche Parameter des Kreises.</desc>
    <circle cx="0" cy="50" r="5" fill="blue" stroke:rgb(0,0,0) stroke-width="1">
      <animate attributeName="r" from="5" to="40" dur="5s" repeatCount="indefinite" />
      <animate attributeName="cx" from="10" to="250" dur="5s" repeatCount="indefinite" />
      <animate attributeName="cy" from="10" to="50" dur="5s" repeatCount="indefinite" />
      <animate attributeName="stroke" from="black" to="red" dur="5s" repeatCount="indefinite" />
      <animate attributeName="stroke-width" from="1" to="10" dur="5s" repeatCount="indefinite" />
      <animate attributeName="fill" from="blue" to="black" dur="5s" repeatCount="indefinite" />
    </circle>
  </svg>

Beispiel für eine svg-Grafik mit verschiedenen animierten Parametern Zunaechst wird ein sich von schwarz nach gelb verfaerbendes Rechteck gezeichnet. Binnen 5 Sekunden veraendern sich saemtliche Parameter des Kreises.

Man kann Farben nicht nur mit der Zeit ändern, sondern auch in Abhängigkeit vom Ort. Das nennt man Farbverläufe oder Gradienten. In SVG 1.1 sind zwei gradient elements definiert - linearGradient und radialGradient. Hat man sich für eine dieser beiden Grundformen entschieden, legt man mit den sogenannten Attributen (Parametern) den genauen Verlauf des Gradienten fest. Im Falle von linearGradient lässt sich mit an beiden Koordinaten x1, y1 und x2, y2 mit Prozentangaben einstellen, von wo bis wo der Gradient verlaufen soll. Verzichtet man auf diese Angaben, erstreckt sich der Gradient einfach gleichmäßig von links oben nach rechts unten. Bei radialen Gradienten ändern sich die Farben kreisförmig vom Mittelpunkt nach außen. In diesem Fall liefern "cx" den horizontalen und "cy" den vertikalen Startpunkt, fx den horizontalen und fy den vertikalen Endpunkt sowie r den Radius. Die Attribute cx, cy, fx, fy und r sind standardmäßig mit dem Wert 0.5 bzw. 50% vorbelegt. Füllt ein Gradient nicht die gesamte Fläche, dann kann man mit spreadMethod = "pad oder reflect oder repeat" wählen, ob der Rand außerhalb des Gradienten mit den Endfarbe (pad), einem gespiegelten Gradienten (reflect) oder Wiederholungen des Gradienten (repeat) gefüllt werden soll. Verzichtet man auf die Angabe, wird standardmäßig die Methode "pad" angewendet.







  
    
    Beispiel für eine svg-Grafik mit kreisenden Elementen
    Zunaechst wird ein Farbverlauf von links oben nach rechts unten definiert.
    
      
        
        
      
    
    Dann wird ein rechteckiges Spielfeld in der Größe des Grafikfensters gezeichnet.
    
    Ein kleines Rechteck wird animiert.
    
      
    
    Ein kleiner Kreis rotiert um 360 Grad.
    
      
    
    Wenn dieser Satz angezeigt wird, dann kann der Browser keine inline-SVG anzeigen.
  




Mit dem sogenannten Stop-Befehl und seinen Parametern werden die Farben definiert. Innerhalb des stop-Befehls regelt "offset" die Position der Farbe (erlaubte Werte sind 0-1 oder 0%-100%), "stop-color" setzt die Farbe und "stop-opacity" regelt die Transparenz der Farbe (erlaubte Werte wie bei offset).












  
    
    Beispiel für eine svg-Grafik mit kreisenden Elementen
    Zunaechst wird ein Farbverlauf von links oben nach rechts unten definiert.
    
      
        
        
        
        
        
      
    
    Dann wird ein rechteckiges Spielfeld in der Größe des Grafikfensters gezeichnet.
    
    Ein kleines Rechteck wird animiert.
    
      
    
    Ein kleiner Kreis rotiert um 360 Grad.
    
      
    
    Wenn dieser Satz angezeigt wird, dann kann der Browser keine inline-SVG anzeigen.
  














  
    
    Beispiel für eine svg-Grafik mit kreisenden Elementen
    Zunaechst wird ein kreisförmiger Farbverlauf definiert.
    
      
        
        
        
        
        
      
      
        
      
      
        
      
    
    Dann wird ein rechteckiges Spielfeld in der Größe des Grafikfensters gezeichnet.
    
    Ein kleines Rechteck wird animiert.
    
      
    
    Ein kleiner Kreis rotiert um 360 Grad.
    
      
    

    
      
    

    Wenn dieser Satz angezeigt wird, dann kann der Browser keine inline-SVG anzeigen.
  









experimentell   nach oben







  
    
    
      
    
  Sorry, your browser does not support inline SVG.
  






  
    
    
      
    
  Sorry, your browser does not support inline SVG.
  












  Wellen-Experiment


  
    
    
  


  
    
  

  
    
  


Kreis um den Mittelpunkt 300,50 mit dem Radius 40 Pixel und einem schwarzen Rand um eine graue Fläche

  Wenn dieser Satz angezeigt wird, dann kann der Browser keine inline-SVG anzeigen.












  Wellen-Experiment


  
    
    
  
  
    
    
  


  
    
  

  
    
  


  Wenn dieser Satz angezeigt wird, dann kann der Browser keine inline-SVG anzeigen.













unabhängig kreisende Kreise
unabhängig kreisende Kreise


Rad


transform="rotate(180)" />






  Innen
  

 
   
 




  Außen
  
  
    
     
    




  neu
  

 
   
 




  neuer
  x="20" y="20"
 
   
 



  ganzneu
  x="80" y="40"
 
   
 














  Animation zur Veranschaulichung der Notwendigkeit einer großen Steigbügelfläche
sich unabhängig bewegende Kreise

  
    
    
  
    
    
  
    
    
  
    
    
  
    
    
  
    
    

  Roland Heynkes, CC BY-NC-SA 4.0














  Animation sich unabhängig bewegender Kreise
sich unabhängig bewegende Kreise

  
    
  
    

  Roland Heynkes, CC BY-NC-SA 4.0














  Animation zur Veranschaulichung der Phagozytose

  

  Diese mit SVG- und SMIL-Befehlen einfach in den
  HTML-Text eingebette Animation soll anschaulich
  machen, wie einrelativ großer, fester Fremdkörper
  durch Phagozytose in eine Zelle aufgenommen wird.

Kreis
    
      
    

Zelle
  
  
  
  Roland Heynkes, CC BY-NC-SA 4.0
  Wenn dieser Satz angezeigt wird, dann kann der Browser keine inline-SVG anzeigen.






Stammzell-Anmation
Definition des Schrifttyps und der Nischen
  
    
    
  


  
  
  

  Diese kleine Animation soll verdeutlichen,
  warum die Zahl der Stammzellen konstant
  bleibt.


  
    
    
    
    

    
    
    
    
  

  
    
    
    
  
  

  
    
    
    
    
    
  
  
  



  
  Start



Stopp










Anmation T-Killerzelle
Definition des Schrifttyps und der Umrandung von Rechtecken
  
    
  


  

  Eine T-Killerzelle tötet eine Krebszelle.
  Roland Heynkes, CC BY-NC-SA 4.0


  
    
    
    
    
  
  Krebszelle
  
    
    
    
    
  
  
  
  
    
    
  
  



  
  
  T-Killerzelle
  
  

  
  



  
  Start



Stopp













  
  Animation Dendritische Zelle
  Definition des Schrifttyps und der Umrandung von Rechtecken
  
    
  


  



Schlauchoberseite
  
  
  

Schlauchunterseite
  
  
  



  

Muskel1
    
      
    

Muskel2
    
      
    

    
      
      
      
      
    

  



  Roland Heynkes, CC BY-NC-SA 4.0









meine buchunabhängigen Lerntexte


meine Biologieseite


Kommentare und Kritik von Fachleuten und Lernenden sind jederzeit willkommen.



Roland Heynkes, CC BY-SA-3.0 DE










   nach oben