Wie erstelle ich eigene Design-Vorlagen?

Die Design-Vorlagen sind normale svg-Grafiken, die allerdings, um individuelle Texte zu ermöglichen, einigen Bedingungen entsprechen müssen. Die beste Methode, eine eigene Vorlage zu erzeugen, ist, eine bestehende Vorlage zu kopieren und individuell anzupassen.

Zur Struktur der svg-Datei (am Beispiel des Müggelländer Ur-Alt Etiketts):

Beginn des Dokuments sind ein xml und svg Header

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg width="600" height="567" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Wichtig sind im xml Header die Angabe des Character Encoding (UTF-8) sowie im svg Header neben der Definition der Namespaces die Angabe der Gesamtgröße der Vorlage. Als Standardgröße wird bei den Templates eine Breite von 600 Pixeln empfohlen; die Höhe wird entsprechend des Seitenverhältnisses angepasst.

Direkt nach dem Header folgt der <defs> Block, in dem Elemente definiert werden, die im später an verschiedenen Stellen wiederbenutzt werden sollen. Wenn in der Vorlage besondere Schriften zum Einsatz kommen, müssen sie hier in einem <style> Block definiert werden:

<defs>
 <style type="text/css">
  <![CDATA[
   @font-face {
    font-family: Orotund;
    src: url('http://brauerei.mueggelland.net/tl_files/bw_files/fonts/Orotund_uml.ttf');
   }

...

  ]]>
 </style>
</defs> 

Eine gute Quellen freier ladbarer Webfonts ist Font Sqirrel. Die Schriften müssen von dort heruntergeladen und auf dem Müggelland-Server gespeichert werden. Bitte dabei die Lizenzbestimmungen der Schriften beachten. Wichtig ist auch, zu überprüfen, dass die Schriften deutsche Umlaute besitzen, was nicht bei allen Schriften aus dieser Quelle der Fall ist.

Nach dem defs Block werden die eigentlichen grafischen Elemente erzeugt. Das kann mit allen von svg unterstützten Elementen wie line, rect, circle, ellipse, polyline etc. geschehen. Auch bitmap-Grafiken können mit dem image Element eingebunden werden.

<!-- Grundfläche -->
<rect x="0" y="0" width="600" height="567" fill="#2A1E28"/>
<!-- Ring, Kreis und Raute-->
<ellipse cx="300" cy="283.5" rx="270" ry="253.5" fill="none" stroke="#25503D" stroke-width="10" />
<ellipse cx="300" cy="283.5" rx="252.5" ry="236" fill="#FDFEC5" stroke="none" />
<polyline points="300,65 250,115 300,165 350,115 300,65 250,115" fill="white" stroke="#25503D" stroke-width="8" />
<image x="271" y="87" width="58" height="58" xlink:href="http://brauerei.mueggelland.net/tl_files/bw_files/svg/Brauer.png" />

Dann werden die Textzeilen definiert. Texte können frei platziert, ausgerichtet und bei Bedarf auch an Pfaden entlanggeführt werden. Die Schriftart kann entweder eine der üblichen Standardschriften wie Serif oder Helvetica oder eine ladbare Schrift sein, die vorher wie oben beschrieben im defs Block geladen werden muss.

<!-- Texte -->
<text id="Text1" x="300" y="265" text-anchor="middle" font-family="Orotund" font-size="60pt" fill="#3C5D48" stroke="none" >Müggelländer</text>
<text id="Text2" x="300" y="345" text-anchor="middle" font-family="Orotund" font-size="60pt" fill="#3C5D48" stroke="none" >Ur-Alt</text>
...
<path id="p1" d="M 90 400 A 230 190 0 0 0 510 400" stroke="none" fill="none" />
<text id="Text8" text-anchor="middle" font-family="Quattrocento" font-size="20pt" fill="black" stroke="none"><textPath xlink:href="#p2" startOffset="50%">MÜGGELLAND-BRAUEREI</ 
... 

Wichtigster Punkt ist hier die Vergabe einer eindeutigen id, die aus dem Schlüsselwort "Text" und einer fortlaufenden Nummer besteht. Anhand dieser id werden die austauschbaren Texte erkannt und können im Etikettendesigner mit individuellem Inhalt belegt werden.

Am Ende wird der svg Block abgeschlossen.

</svg>

Die syntaktische Korrektheit kann man mit dem w3c Markup Validation Service überprüfen. Das Design sollte man mit möglichst vielen unterschiedlichen Browsern (IE, Firefox, Chrome, Safari, Opera etc.) überprüfen, da die Darstellung je nach Browser durchaus sehr unterschiedlich sein kann.

Sobald das Design ausgereift und syntaktisch korrekt ist, kann die Vorlage eingesandt werden und wird vom Administrator installiert. Bitte dafür das Kontaktformular benutzen.