Tekplace
Neuen Account einrichten:
Verbindungsproblem Ungültiges Passwort (mindestens 6 Zeichen!) Account mit dieser Email Adresse existiert bereits Der Benutzername existiert bereits Die Bestätigungs-Email konnte nicht gesendet werden Ungültige Email-Adresse Benutzername fehlt Unbekannter Benutzername Falsches Passwort
Benutzername:
Passwort:
Neuer Account
Abbrechen
Ok
Bestätige Deinen Account mit der Dir zugesandten Email! Dir wurde gerade eine Email zugesandt. Öffne sie und klicke auf den Link, den sie enthält um das Löschen Deines Accounts abzuschließen! Fehler beim Verbinden mit dem Server! Dieser Name ist schon vergeben! Das Match ist nicht mehr verfügbar!
OK
Willst Du Deinen Account und alle damit verbundenen Daten wirklich unwiderruflich löschen? Wirklich den Regelsatz löschen?
Ja
Nein
Name des Regelsatzes:
Verbindung fehlgeschlagen! Der Name ist schon vergeben!
OK
Abbrechen

SSVG auf Deiner eigenen Webseite

Unser Editor ermöglicht das Herunterladen von Graphiken als SVG oder PNG Dateien. Diese Formate werden von allen modernen Browsern verstanden und können damit auf Deiner Webseite eingebunden werden. Um beispielsweise eine SVG-Datei zu verwenden, kopiere ihren Inhalt einfach in Dein HTML. Oder verwende einen Tag wie etwa <img src="myfile.svg">.

Es wäre aber weit komfortabler SSVG Code direkt zu verwenden um Grafiken zu definieren. Damit der Browser die SSVG-Sprache versteht ist folgendes nötig:

  • Lade die Javascript-Datei ssvg.min.js vom obigen Link herunter und kopiere sie in Deinen HTML-Ordner
  • Füge diesen Tag zum HTML-Header hinzu:
    <script type="text/javascript" src="ssvg.min.js"></script>

Damit ist ein globales Javascript-Objekt auf der Seite verfügbar und kann verwendet werden um Grafiken mittels reinem SSVG-Code hinzuzufügen. Hier ist ein einfaches Beispiel:

HTML

<!DOCTYPE html>
<html>
    <header>
        <title>SSVG Demonstration</title>
        <script type="text/javascript" src="ssvg.min.js"></script>
    </header>
    <body>
        <h1 style="text-align:center;font-size:36pt;margin:50px">
            SSVG Demonstration
        </h1>
        <div data-ssvg="mygraphic" data-width="400" data-height="400"
            style="width:400px;margin:0 auto">
        </div>
        <script>
            SSVG.init("mycollection");
        </script>
    </body>
</html>
			

SSVG-Collection-Datei mycollection.json

{
    "mygraphic": "24,24!C100b!C482!a56[8(M5,12M12,1T72[5+g8t-72+g8t144]f)*R9,12,12]"
}
			

Die Collection-Datei ist im JSON-Format. Sie definiert eine Grafik namens "mygraphic" mittels des angegebenen SSVG-Codes. Du musst diese Datei nun unter dem Namen "mycollection.json" im HTML-Ordner abspeichern. Der Dateiname "mycollection" muss mit dem Namen, der im HTML-Script verwendet wird, übereinstimmen (SSVG.init("mycollection")). Genauso muss der Grafikname "mygraphic" mit dem Wert des div-Attributes data-ssvg übereinstimmen.

Wenn die Seite nun geladen wird passiert folgendes: Die Anweisung SSVG.init("mycollection") lädt die JSON-Datei mycollection.json in den Browser und durchsucht dann das HTML nach data-ssvg Attributen, wo sie dann die entsprechenden Grafiken erzeugt (als SVG).

Dynamisches Beispiel

Abgesehen vom Erzeugen von Grafiken wenn die Seite geladen wird, mittels einer SSVG-Collection, können Grafiken auch dynamisch jederzeit erzeugt werden.

HTML

<!DOCTYPE html>
<html>
    <header>
        <title>Dynamisches SSVG Beispiel</title>
        <script type="text/javascript" src="ssvg.min.js"></script>
    </header>
    <body>
        <h1 style="text-align:center;font-size:36pt;margin:50px">
            Dynamisches SSVG Beispiel
        </h1>
		
        <div style="width:360px;margin: 40px auto">
            <label>Noch keine Graphic auf dieser Seite aber ... </label>
            <button onclick="draw()">Drück mich!</button>
        </div>
        <div id="container" style="width:60%;margin: 40px auto">
        </div>
        <script>
            function draw() {
                var code = "!C2M360,360+o240f!C1M360,480" 
                    + "+e120,120,90,-180m0,-240+e120,120,90,180" 
                    + "m0,120+e240,240,270,180m0,-120"
                    + "+o40m0,240+o40f!w20m0,-120+o240p";
                var dynamicSsvg = SSVG.compile(code);			
                SSVG.renderAt(document.getElementById('container'), dynamicSsvg);
            }
        </script>
    </body>
</html>
			

Wir brauchen hier keine Collection-Datei im HTML-Ordner (jedoch natürlich wieder das Skript ssvg.min.js). Der Grund dafür ist, dass der SSVG-Code direkt im Inline-Skript angegeben ist. Wie funktioniert dieses Skript?

Das Javascript SSVG-Objekt gibt uns zwei weitere Funktionen: SSVG.compile und SSVG.renderAt. Die erste verwandelt einen String (der eine Grafik kodiert) in ein Javascript Objekt. Die zweite bekommt ein HTML-Element (hier das div mit id "container") und das von SSVG.compile erzeugte Objekt, und erzeugt dann die Grafik (als SVG) an der entsprechenden Stelle.

Bemerkungen:

  • Wir brauchen hier kein data-ssvg Attribut da wir SSVG.renderAt direkt sagen, wo die Grafik erzeugt werden soll.
  • In diesem Beispiel haben wir weder data-width noch data-height auf dem div verwendet. Dadurch bekommt die Grafik automatisch die Größe des div-Elements, hier: 60% der Seitenbreite. Wenn Du das Browser-Fenster verkleinerst oder vergrößerst, ändert sich auch die Größe der Grafik. Vergleiche dies mit dem Verhalten im ersten Beispiel.
  • Wenn Du JQuery verwendest, kannst Du document.getElementById('container') durch $('#container')[0] ersetzen.


Hinweis: Die Datei ssvg.min.js, herunterladbar vom obigen Download-Link, steht unter der MIT Lizenz. Sie kann somit frei in Deinen eigenen Projekten verwendet werden.