Projekt: Scalable Vector Graphics ( vertiefte Einführung ) Markup, Animationen ·

Konfuzius (ca. 551 - 479 v.Chr. ) : Das Entscheidende am Wissen ist, dass man es beherzigt und anwendet.
Johann Wolfgang von Goethe : Es ist nicht genug zu wissen - man muss auch anwenden. Es ist nicht genug zu wollen - man muss auch tun.


SVG (Allgemeine Hinweise) W3C 
 SVG ( Scalable Vector Graphics ) ist eine XML basierende Sprache
 SVG ist non-Proprietär.
 SVG-Code entspricht lesbaren Markup-Code. 
 Die skalierbaren Grafiken werden aus dem Markup-Code gerendert.
 SVG unterstützt CSS und ECMAScript.


Was sagt Konfuzius (ca. 551 - 479 v.Chr.)?
Konfuzius (ca. 551 - 479 v.Chr.):
Sage es mir, und ich vergesse es.
Zeige es mir, und ich erinnere mich.
Lass es mich tun, und ich behalte es.
Konfuzius (ca. 551 - 479 v.Chr.):
Wer einen Fehler macht
und ihn nicht korrigiert,
begeht einen zweiten.
Konfuzius (ca. 551 - 479 v.Chr.):
Dummheit ist nicht "wenig wissen",
auch nicht "wenig wissen wollen",
Dummheit ist "glauben, genug zu wissen".
Um eine Welt in einem Sandkorn zu sehen
Und einen Himmel in einer Feldblume,
Halt Unendlichkeit in deiner flachen Hand
Und Ewigkeit in einer Stunde ...
Man verführt uns, einer Lüge zu glauben
Wenn wir mit dem Auge sehen, nicht durch es hindurch,
In einer Nacht wurde es geboren,
Um in einer Nacht zu verlöschen,
Als die Seele in Lichtstrahlen schlief.
William Blake ( 1757 - 1827 )
Das "Ich" kann keinen schlechteren Gebrauch von seinen Erfolgen machen, als sich damit zu brüsten. (1757 - 1827), englischer Dichter, Mystiker und Maler Quelle: Die Hochzeit von Himmel und Hölle Ein Narr sieht nicht denselben Baum, den ein Weiser sieht. Rainer Maria Rilke Unser Wille ist nur der Wind, der uns drängt und dreht: Weil wir selber die Sehnsucht sind, die in Blüten steht.

SVG ( Scalable Vector Graphics bei W3C )


w3.org Secret Origin of SVG SVG-Historie
w3.org SVG 2 Scalable Vector Graphics, W3C Candidate Recommendation 15 Sept 2016
w3.org SMILE 3 Synchronized Multimedia Integration Language, W3C Recommendation 01 Dec 200
w3.org Graphics/SVG w3.org mit zahlreichen Links
de.wikibooks SVG-Tutorial, einführend als HTML.
de.wikibooks SVG-Tutorial als SVG.pdf, 614 Seiten



SVG ( Tutorials )

mozilla.org SVG Tutorial
mozilla.org SVG Elements
Thomas Meinike SVG – Learning By Coding
Jakob Jenkov SVG Tutoial
Jakob Jenkov SVG Examples



SVG ( Weblinks )

Scalable Vector Graphics ( wikipedia )
online-Converter
SVG – Learning By Coding von Dr. Thomas Meinike mit Zahlreiche Beispielen
SVG-Tutorial .pdf 240 Seiten
SVG - Wikibooks Lehrbuch zu SVG mit Beispielen.
SVG Tutorial von Ralf Pohlmann.
SVG Tutorial Studienarbeit von Tjorven Lauchardt.
SVG-Animation von Dr. O. Hoffmann mit Beispielen und Tests.
SVG von Dr. Olaf Hoffmann mit PHP, Kurven, Kurveninterpolation, Transformationen, Animationen, Differentialgleichungen.
about-svg.de von Maik Boche, kommentierte Beispiele mit Quelltext, Kartographie.
SVG von Petra Kukofka



SVG ( Tools ) Auswahl

Es gibt SVG-Editoren: einfache/komplexe, proprietäre/non-proprietäre ... Hier lediglich eine willkürliche Auswahl:

SVG-Editoren: vectorpaint.yaks.co.nz ( einfach, proprietär? ),
boxy-svg.com ( ),
Inkscape ( Kofferwort aus engl. Tinte und Landschaft; Ein kleines, freies, plattformunabhängiges Programm zur Erstellung von SVG-Grafiken )
vectorpaint.yaks.co.nz ( einfach, proprietär? ), janvas.com ( proprietär? ),
Comparison_of_vector_graphics_editor , alternative SVG-Editoren



SVG ( Einheiten ) W3C 
 Unit  Description
==============================================
 em   The default font size- etwa Zeichen-Höhe
 ex   The height of the character x
 px   Pixels
 pt   Points (1 / 72 of an inch)
 pc   Picas (1 / 6 of an inch)
 cm   Centimeters
 mm   Millimeters
 in   Inches


SVG ( Farben ) W3C

Was gibt bei SVG zusätzlich zu HTML/CSS? Beispiele: 

 rect {stroke: #dfac20;}
 circle { fill-opacity: 0.5;}
 #eins { fill: #3983ab; } 
 #zwei {  } 
 #drei { fill: none; } // transparenter Hintergrund
 .eins { stroke: #3983ab; stroke-width: 3px; fill: #dfac20; fill-rule: nonzero; }
 .zwei { stroke: #3983ab; stroke-width: 3px; fill: #dfac20; fill-rule: evenodd; }

<polygon class="eins" points="100,10 40,200 190,75 10,75 160,200"/>


SVG ( User-Paletten ) W3C

Oft werden mit ECMAScript geeignete Farbstufungen und Farbkombinationen zusammen gestellt, die dann z.B.
aufgerufen werden mit var red5 = col.red[5] || "#f00"; 

 var col = {
 red:  [#ffebee","#ffcdd2","#ef9a9a","#e57373","#ef5350","#f44336","#e53935","#d32f2f","#c62828","#b71c1c","#ff8a80","#ff5252","#ff1744","#d50000"],
 pink: [#FCE4EC","#F8BBD0","#F48FB1","#F06292","#EC407A","#E91E63","#D81B60","#C2185B","#AD1457","#880E4F","#FF80AB","#FF4081","#F50057","#C51162"],
 purple:[#F3E5F5","#E1BEE7","#CE93D8","#BA68C8","#AB47BC","#9C27B0","#8E24AA","#7B1FA2","#6A1B9A","#4A148C","#EA80FC","#E040FB","#D500F9","#AA00FF"],
 deeppurple:[#EDE7F6","#D1C4E9","#B39DDB","#9575CD","#7E57C2","#673AB7","#5E35B1","#512DA8","#4527A0","#311B92","#B388FF","#7C4DFF","#651FFF","#6200EA"],
 indigo:[#E8EAF6","#C5CAE9","#9FA8DA","#7986CB","#5C6BC0","#3F51B5","#3949AB","#303F9F","#283593","#1A237E","#8C9EFF","#536DFE","#3D5AFE","#304FFE"],
 blue: [#E3F2FD","#BBDEFB","#90CAF9","#64B5F6","#64B5F6","#2196F3","#1E88E5","#1976D2","#1565C0","#0D47A1","#82B1FF","#448AFF","#2979FF","#2962FF"],
 lightblue:[#E1F5FE","#B3E5FC","#81D4FA","#4FC3F7","#29B6F6","#03A9F4","#039BE5","#0288D1","#0277BD","#01579B","#80D8FF","#40C4FF","#00B0FF","#0091EA"],
 cyan: [#E0F7FA","#B2EBF2","#80DEEA","#4DD0E1","#26C6DA","#00BCD4","#00ACC1","#0097A7","#00838F","#006064","#84FFFF","#18FFFF","#00E5FF","#00B8D4"],
 teal: [#E0F2F1","#B2DFDB","#80CBC4","#4DB6AC","#26A69A","#009688","#00897B","#00796B","#00695C","#004D40","#A7FFEB","#64FFDA","#1DE9B6","#00BFA5"],
 green:[#E8F5E9","#C8E6C9","#A5D6A7","#81C784","#66BB6A","#4CAF50","#43A047","#388E3C","#2E7D32","#1B5E20","#B9F6CA","#69F0AE","#00E676","#00C853"],
 lightgreen:[#F1F8E9","#DCEDC8","#C5E1A5","#AED581","#9CCC65","#8BC34A","#7CB342","#689F38","#558B2F","#33691E","#CCFF90","#B2FF59","#76FF03","#64DD17"],
 lime: [#F9FBE7","#F0F4C3","#E6EE9C","#DCE775","#D4E157","#CDDC39","#C0CA33","#AFB42B","#9E9D24","#827717","#F4FF81","#EEFF41","#C6FF00","#AEEA00"],
 yellow:[#FFFDE7","#FFF9C4","#FFF59D","#FFF176","#FFEE58","#FFEB3B","#FDD835","#FBC02D","#F9A825","#F57F17","#FFFF8D","#FFFF00","#FFEA00","#FFD600"],
 amber:[#FFF8E1","#FFECB3","#FFE082","#FFD54F","#FFCA28","#FFC107","#FFB300","#FFA000","#FF8F00","#FF6F00","#FFE57F","#FFD740","#FFC400","#FFAB00"],
 orange:[#FFF3E0","#FFE0B2","#FFCC80","#FFB74D","#FFA726","#FF9800","#FB8C00","#F57C00","#EF6C00","#E65100","#FFD180","#FFAB40","#FF9100","#FF6D00"],
 deeporange:[#FBE9E7","#FFCCBC","#FFAB91","#FF8A65","#FF7043","#FF5722","#F4511E","#E64A19","#D84315","#BF360C","#FF9E80","#FF6E40","#FF3D00","#DD2C00"],
 brown:[#EFEBE9","#D7CCC8","#BCAAA4","#A1887F","#8D6E63","#795548","#6D4C41","#5D4037","#4E342E","#3E2723"],
 grey: [#FAFAFA","#F5F5F5","#EEEEEE","#E0E0E0","#BDBDBD","#9E9E9E","#757575","#616161","#424242","#212121"],
 bluegrey:[#ECEFF1","#CFD8DC","#B0BEC5","#90A4AE","#78909C","#607D8B","#546E7A","#455A64","#37474F","#263238"]
};
Beispiel: SVG-Bild innerhalb "figure" Beispiel

SVG-Bilder können analog zu img-Bilder verwendet werden. Hier wird SVG mit Hilfe von figure > svg, figure, figcaption, figcaption.top dargestellt. Bitte auch den figure-Style beachten. Quelltext steht in der Seite.

Text für <path id='mein_id1' nach rechts    schräg runter       nach rechts
Mit SVG werden
Texte mit an die Linien angepaßt 
Dies
  ist
    Text
      neben
        dem Bild



Beispiel: SVG-Bild als Weblink mit "figure" Wie geht das?

Hinweise:
alert: window.alert(hinweis)
arrow-up: "gehe zu Bert Bos: figure?" ( nutzt !!confirm() und window.open )
arrow-down: Weblink zu svg-einfuehrung ( nutzt a-Tag und _blank )
"figure" ( W3C, CSS, Bert Bos, Style Activity Leiter ),

alert
arrow-up
arrow-down
bell
book


Beispiel: SVG-Symbol-Generator entwickeln Wie?

Mehr in der Vorlesung.

Wie können SVG-Symbole gemacht werden? Wie können SVG-Symbole in a-Tags verwendet werden? Wie kann ein Kunst-Designer-Toolchen gemacht werden? Hier einige Beispiele für a-Tags mit SVG-Symbolen ( <path d="..."></path> ):



Beispiel: SVG und ECMAScript Einführendes

Wie können mit ECMAScript SVG-Elemente und SVG-Bilder erzeugt werden? 

<div id="DIV_WRAPPER" style="border:0.1rem solid #00f;width:200px;height:200px;"></div>
 <script>
   var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

    var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circle.setAttribute("cx", 20);
    circle.setAttribute("cy", 20);
    circle.setAttribute("r", 10);
    circle.setAttribute("fill", "#f00");

    svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
    svg.setAttribute("width", "200");
    svg.setAttribute("height", "200");
    svg.setAttribute("viewBox", "0 0 50 50");
    svg.appendChild(circle);

    document.querySelector("#DIV_WRAPPER").appendChild(svg);
  </script>

Anzeige:



Beispiel: SVG-Animation Einführendes

Der SVG-DOM kann mit dem HTML-DOM, CSS und ECMAScript zusammen wirken. Hier wird für die Animation
setInterval(function () {...tu was mir SVG-Elementen ... }, 20); verwendet. 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1"  
     width = "100%" 
     height = "100%" 
     viewBox = "-4 -4 8 8" onload = "rotate(evt)"
     style = "background:#fee"
     xmlns = "http://www.w3.org/2000/svg"
     xmlns:xlink = "http://www.w3.org/1999/xlink">

 <title>SVG animation mit ECMAScript</title>
 <script type="text/ecmascript">
  function rotate(evt) {
  
   var object = evt.target.ownerDocument.getElementById("rotierender_kreis");
   setInterval(function () {
     var now = new Date();
     var ms  = now.getTime() % 1000;
     var deg = ms * 0.36; // 360 deg in 1000 ms
     object.setAttribute('transform', 'rotate(' + deg + ')');
    }, 20);
  }
 </script>
 <circle id="rotierender_kreis" 
  cx="0" cy="1" r="2" stroke="green" fill="none"/>
</svg>

Anzeige:

SVG animation mit ECMAScript


Beispiel: SVG-Elemente draggable Einführendes

Das folgende Beispiel kann als motivierender Einstieg dienen. Mit Hilfe von ECMAScript können SVG-Elemente erzeugt werden. Mit Hilfe von "Drag and Drop" können Elemente mit der Maus positioniert werden. Plagiate und fremde Bibliotheken sind out. Als Basis für das zu erstellende selfmade-Toolchen dienen W3C-SVG, W3C-HTML und von ECMAScript ( non-poprietär ).

Das ECMAScript-Objekt vg ( vg = [V]ektor-[G]rafik, siehe Quelltext ) nimmt als Bibliothek die selbst erstellten Funktionen auf. Z.B. zeigt vg.el2top(el) das ausgewählte Objekt im Vordergrund an. Jedes SVG-Element, das mit der Maus positioniert werden kann, erhält die Attribute transform="matrix(a b c d e f) und onmousedown="vg.draggable(evt)" und mit dem Style .draggable {cursor: move;} bekommt der Maus-Cursor das "moveing-Icon".

Bitte Kreis oder ein Rechteck an einen anderen Ort ziehen und auch mal shiftKey/ctrlKey halten.

xmlns:xlink="http://www.w3.org/1999/xlink"
http://www.w3.org/wiki/SVG_Links

Anzeige: SVG-Quelltext SVG-Vorschau



Projekt-Kurzfassung ( "mySVG-Experimente" ) Was genau?

Nähere Hinweise in der Veranstaltung.

Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine Do 12.00 Uhr