SVG ganz einfach
Bei den Experimenten rund um die Datumsanzeige hier im Blog, wollte ich ursprünglich Inline-SVG verwenden, um das Datum eines Artikels darzustellen.
Dabei habe ich einfache Textelemente verwendet und festgestellt, dass Inkscape dabei überhaupt nicht behilflich ist. Es produziert einen furchtbaren Codemüll. Also habe ich schnell zu Kate gegriffen. Die Idee habe ich dann aber aus zwei Gründen verworfen:
- SVG kann nur Inline verwendet werden, wenn die die Website als xhtml ausgeliefert wird
- die Idee der Konvertierung für den Internet Explorer per Javascript ist mir (noch) nicht gelungen
Das Beispiel für die einfache Erstellung eines SVG, will ich aber hier kurz darstellen:
<?xml version=“1.0” encoding=“UTF-8” standalone=“no”?>
<svg
xmlns:svg=“http://www.w3.org/2000/svg”
xmlns=“http://www.w3.org/2000/svg”
version=“1.0” >
<defs>
<style type=“text/css”><![CDATA[
text {font-family:"Kalenderblatt Grotesk",sans-serif}
text.date {fill: #2cb3f1;font-size:30px;}
text.month {fill: #2cb3f1;font-size:15px;font-weight:bold}
text.year {fill: #d20;font-size:20px;font-weight:bold}
]]></style>
</defs>
<text class=“date” x=“5” y=“30”>23</text>
<text class=“month” x=“55” y=“30” transform=“rotate(-90, 55, 30)“>JUN</text>
<text class=“year” x=“5” y=“52”>1994</text>
</svg>Zunächst wird der Namesspace deklariert. Spannend wird es ab <defs>. Hier werden Stylesheets definiert. Für alle Textelemente kann die Schriftart festgelegt werden und zusätzlich finden auch noch Klassen Verwendung. Das unterscheidet sich kaum von html/css und dürfte deshalb recht übersichtlich sein.
Die Elemente werden frei auf der Leinwand platziert, wobei die Koordinaten der linken oberen Ecke genutzt werden. Die Elemente sind auch veränderbar. In unserem Beispiel wird der Monat um 90 Grad nach links gekippt. Der Rotationspunkt kann auch beliebig auf der Leinwand gewählt werden. Damit der gewünschte Effekt eintritt, ist in dem Beispiel ebenfalls die linke obere Ecke verwendet worden.
Wer seine Seiten als xhtml ausliefert kann deshalb in das Template seines CMS das SVG einfügen und läßt das Datum aus der Datenbank einfügen.
geschrieben von Pawel