-----------------------------------------------------------------------------------------------------------
|                    SVG-Codesnippets zum Ausprobieren | by Dr. Thomas Meinike 06/2016                    |
-----------------------------------------------------------------------------------------------------------

Vorgehen:

• Code in das nachfolgende Grundgerüst einfügen und die mit der Erweiterung .svg gespeicherten Datei(en)
  im Browser öffnen.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- beim svg-Element ggf. ergänzen: width="…" height="…" viewBox="… … … …" -->

  <!-- weitere SVG-Inhalte hier einfügen … -->
</svg>

• Im Online-Werkzeug http://svglbc.datenverdrahten.de/pocketsvgeditor/ oder lokal über pocketsvgeditor.html
  den jeweiligen Codeblock in das (obere) Textfeld einfügen und das Ergebnis direkt betrachten.

<SVG-Fun>

(1) ✂ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!-- Hallo SVG! -->
<text x="10" y="30" font-size="24">Hallo SVG!</text>
<circle cx="100" cy="100" r="30" fill="red"/>
<circle cx="210" cy="100" r="40" fill="green"/>
<circle cx="340" cy="100" r="50" fill="blue"/>
<rect x="135" y="200" width="150" height="75" fill="#FF0" stroke="#000"/>

(2) ✂ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!-- Kreis, Ellipse, Rechteck, Polygon -->
<circle cx="100" cy="100" r="50" fill="red"/>
<ellipse cx="250" cy="100" rx="60" ry="30" fill="green"/>
<rect x="50" y="200" width="100" height="75" fill="blue"/>
<polygon points="250,200 200,275 300,275" fill="yellow"/>

(3) ✂ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!-- Linie, Mehrfachlinie, Pfad mit verschiedenen Farbzuweisungen [Hex kurz, Farbname, rgb()] -->
<line x1="10" y1="10" x2="100" y2="100" stroke="#00F"/>
<polyline points="150,100 150,10 200,10 250,100" fill="none" stroke="green"/>
<path d="M 10,250 L 150,150 v 50 h 100" fill="none" stroke="rgb(255,153,102)" stroke-width="2"/>

(4) ✂ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!-- Quadratische Bézierkurve mit Erklärung (Punkte blau, Anfasser grün, berechneter Punkt rot) -->
<text x="20" y="30" font-size="24">Quadratische Bézierkurve</text>
<path d="M 200,50 Q 50,100 300,250" fill="none" stroke="blue"/>
<circle cx="200" cy="50" r="3" fill="blue"/>
<circle cx="300" cy="250" r="3" fill="blue"/>
<circle cx="50" cy="100" r="3" fill="green"/>
<circle cx="150" cy="125" r="3" fill="red"/>
<line x1="50" y1="100" x2="200" y2="50" stroke="grey" stroke-dasharray="10 5"/>
<line x1="50" y1="100" x2="300" y2="250" stroke="grey" stroke-dasharray="10 5"/>
<text x="25" y="105">P1</text>
<text x="210" y="55">P0</text>
<text x="310" y="255">P2</text>
<text x="160" y="130">P(t=0.5)</text>

<!--
  Quadratisches Bézier-Polynom (darüber zeichnen Grafikanwendungen die Kurven in kleinen Schritten von t):
  C(t) = (1 - t)² P0 + 2t(1 - t) P1 + t² P2 | t ∈ [0,1]

  Exemplarische Berechnung des Punktes auf der resultierenden Kurve bei t=0.5 -> (150,125):
  x = 0.25 * 200 + 0.5 * 50 + 0.25 * 300 = 50 + 25 + 75 = 150
  y = 0.25 * 50 + 0.5 * 100 + 0.25 * 250 = 12.5 + 50 + 62.5 = 125
-->

(5) ✂ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!-- Text -->
<text x="10" y="30" font-family="sans-serif" font-size="24" fill="blue">SVG kann auch Text.</text>

(6) ✂ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!-- Hyperlink auf Text bzw. Grundform (hier Kreis) -->
<a xlink:href="http://www.hs-merseburg.de/">
  <text x="30" y="50" font-size="24" text-decoration="underline" fill="red">Hochschule Merseburg</text>
</a>
<a xlink:href="http://www.tekom.de/">
  <circle cx="130" cy="100" r="20" fill="blue"/>
</a>

(7) ✂ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!-- Rasterbild einbinden (Bildname und Breite/Höhe anpassen) -->
<image xlink:href="pocketsvged.png" x="0" y="0" width="475" height="318" stroke="blue"/>

(8) ✂ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!-- Symbol (einfache Zuweisung, zusätzliche Umrandung und mit Transformation) -->
<defs>
  <symbol id="figur">
    <polygon points="10,10 0,30 20,30" fill="green"/>
    <circle cx="10" cy="10" r="5" fill="red"/>
  </symbol>
</defs>
<use xlink:href="#figur" x="50" y="50"/>
<use xlink:href="#figur" x="150" y="50" stroke="blue"/>
<use xlink:href="#figur" x="50" y="100" transform="scale(2) rotate(45,100,100)"/>

(9) ✂ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!-- Muster (Textur als Füllung) -->
<defs>
  <pattern id="muster" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
    <rect x="0" y="0" width="10" height="10" fill="yellow"/>
    <rect x="0" y="10" width="10" height="10" fill="blue"/>
    <rect x="10" y="0" width="10" height="10" fill="blue"/>
    <rect x="10" y="10" width="10" height="10" fill="yellow"/>
  </pattern>
</defs>
<rect x="50" y="50" width="200" height="100" fill="url(#muster)"/>

(10) ✂ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!-- Filter (vergleichbar mit box-shadow in CSS) -->
<defs>
  <filter id="shadow">
    <feOffset in="SourceAlpha" result="out1" dx="5" dy="5"/>
    <feGaussianBlur in="out1" result="out2" stdDeviation="3"/>
    <feBlend in="SourceGraphic" in2="out2" mode="normal"/>
  </filter>
</defs>
<rect x="20" y="20" width="200" height="100" fill="blue" filter="url(#shadow)"/>

(11) ✂ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!-- Linearer Farbverlauf (gelb nach rot) wird auf ein Rechteck und einen Text angewendet -->
<defs>
  <linearGradient id="gra">
    <stop offset="0%" stop-color="#FF0"/>
    <stop offset="100%" stop-color="#F00"/>
  </linearGradient>
</defs>
<rect x="50" y="50" width="600" height="50" fill="url(#gra)" rx="10"/>
<text x="50" y="175" font-size="50" fill="url(#gra)">Bachelorstudiengang TREL</text>
<text x="50" y="250" font-size="50" fill="url(#gra)">Masterstudiengang IDMM</text>

(12) ✂ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!-- Animation (hier wird die Breite des Rechtecks inerhalb von 10 Sekunden auf 500 erhöht) -->
<rect x="20" y="20" width="0" height="40" fill="#00C" stroke="#FF0" stroke-width="2" opacity="0.5" rx="10">
  <animate attributeType="XML" attributeName="width" begin="0s" dur="10s" from="0" to="500" fill="freeze"/>
</rect>

(13) ✂ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!-- Rechteck mit Gradientfüllung und Animation (hier Start nach 5 Sekunden, Laufzeit 20 Sekunden) -->
<defs>
  <linearGradient id="gra">
    <stop offset="0%" stop-color="#F00"/>
    <stop offset="50%" stop-color="#FF0"/>
    <stop offset="100%" stop-color="#00F"/>
  </linearGradient>
</defs>
<rect x="20" y="20" width="0" height="40" fill="url(#gra)" rx="10">
  <animate attributeType="XML" attributeName="width" begin="5s" dur="20s" from="0" to="800" fill="freeze"/>
</rect>

(14) ✂ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!-- CSS-Nutzung / hier intern, extern mittels <?xml-stylesheet href="name.css" type="text/css"?> -->
<defs>
  <style type="text/css">
    circle
    {
      fill: yellow;
      stroke: blue;
      stroke-width: 2;
    }
  </style>
</defs>
<circle id="kreis" cx="100" cy="100" r="50"/>

(15) ✂ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!-- Zugriff auf SVG-Objekte mit JavaScript (Kreis anklicken / rot vs. grün) -->
<defs>
  <script type="text/javascript">
    function Test()
    {
      var o = document.getElementById("kreis");
      var f = o.getAttribute("fill");
      if(f == "red")o.setAttribute("fill", "green");
      else o.setAttribute("fill", "red");
    }
  </script>
</defs>
<circle id="kreis" cx="100" cy="100" r="50" fill="red" onclick="Test()"/>

-----------------------------------------------------------------------------------------------------------

</SVG-Fun>