MORE FUN MIT #SVG
Carolina Koehn
Contao-Konferenz 2016

Über mich
- Frontend-Entwicklerin
- Kiel, DE
- Contao seit 2007
- kikmedia.de, CCA, MetaModels ...
- @carolinakoehn
Was erwartet Euch?
EIN KURZER BLICK IN DAS FORMAT
REAL-WORLD-BEISPIELE
PITFALLS UND WORKAROUNDS
Ein kurzer Blick ins Format
Grafikformate
gif | jpg | png | svg | |
Raster | ja | ja | ja | ja |
Vektor | nein | nein | nein | ja |
Farben | 8 bit | 24 bit | 3 x 16 bit | 24 bit |
Transparent | ja | nein | ja | ja * |
skalieren | nein | nein | nein | ja |
animiert | ja | nein | nein* | ja |
interaktiv | nein | nein | nein | ja |
Grösse | < | >> | >>> | > |
Styles | nein | nein | nein | ja |
JPEG | PNG | SVG | |
Bild | ![]() |
![]() |
|
Grösse | 17 kB | 12 kB | mit Fallback und Font: 303 kB |
ohne Fallback: 274 kB | |||
ohne Font: 113 kB |
Kompression
gif | jpg | png | svg | ||
Art | Dither | ja | ja | zip | |
Qualität | -- | 0 | ++ | ++ | |
Dateigrösse | |||||
Miniaturen | klein | gross | klein | sehr gross | |
Fotos | mittel | gross | sehr gross | sehr gross* | |
Zeichnungen | klein | klein | mittel | sehr klein |
Beispiel: JPEG

Beispiel: SVG

Mehr Möglichkeiten
Viele Eigenschaften von SVG-Dateien können beeinflusst werden.
Formen
Grundlegende geometrische Formen ...
- ‘rect’ element - Rechtecke
- ‘circle’ element - Kreise
- ‘ellipse’ element - Ellipsen
- ‘line’ element - Linien
- ‘polyline’ element - Linienzüge
- ‘polygon’ element - geschlossene Polygone
Alle sind XML-basiert, alle sind daher editierbar und steuerbar.
Stile und Farben
Styling-Properties
- Font properties (Schrift)
- Clipping, Masking and Compositing (Verschneiden)
- Filter Effects (Filtereffekte)
- Gradient (Verläufe)
- Interactivity (z.B. Pointer-Events)
- Color and Painting (Farben und Füllungen)
- Text (z.B. Laufrichtung, Letterspacing, Transformation)
Liste: https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties
<g clip-path="url(#SVGID_2_)">
<text transform="matrix(0.9781 -0.2079 0.2079 0.9781 100.5757 350.9893)" fill="#FFFFFF" font-family="Arial" font-size="70.4029">Community</text>
</g>
<g clip-path="url(#SVGID_2_)">
<text transform="matrix(0.9781 -0.2079 0.2079 0.9781 100.5757 350.9893)" fill="#FFFFFF" font-family="Arial" font-size="70.4029">Contao rockt!</text>
</g>
Editierbar!
Und hier: Mal eben die Füllfarbe austauschen.
SVG, Realworld
Oder: Wie man aus Geodaten in Contao interaktive Vektorgrafiken erstellt.
Die Zutaten
- Geodaten
Geodaten
- Behörden
- Geodatenportale
- OpenStreetMap
- OpenSource-Geodaten
- ...
Es gibt keine Out-of-the-Box-Lösungen.
SVG
Geodaten müssen ggf. nach SVG transformiert werden.
Werkzeuge:
- Inkscape (gut)
- Illustrator (schlecht)
... weil Illustrator viel kaputt macht und das Format um eigene Tags anreichert.
#LockedIn
Mapael.js
JavaScript-Bibliothek
jQuery-basiert
Raphael.js als Voraussetzung

Website Mapael.js
Eckdaten von Mapael.js
- Open Source
- Interaktivität möglich
- dynamische Updates möglich
- Daten als JSON
- sehr viele Plugins
- eigene Karten möglich
MetaModels
Contao-Extension
modellierbare Datenstrukturen
frei anpassbare Ausgaben
Link: http://now.metamodel.me/
Auf geht's ...
... oder: Entscheidend is' auffen Platz.
Installation MetaModels
MetaModels 2 via Composer
Benötigte Pakete:
- core
- Attribut Text
- Attribut Langtext
- Attribut URL
Konfiguration MetaModels
MetaModel für Geodaten einrichten
- Name wie in Geodaten
- Koordinaten
- Eigenschaften für Farben, Füllungen, Hoverstates
- Links

Übersicht MetaModels

Ein MM für die Farben ...

... und ein weiteres MM für die Kartenobjekte.
Template-Ausgabe planen
Ziele:
- bequemes Pflegen der Daten, Farben, Links
- Einbau in eine JSON-Struktur
- Einbindung der JSON-Struktur in die Map
- (Optional: Befüllung via Importjob mit ConvertX)
Templates
Templatestruktur aufbauen:
- benötigte Script-Fragmente
- strukturierte Ausgabe von Item-Daten
- Rendern als Rawdaten
Javascript
Laden und Einbinden von
- jQuery
- Raphael.js
- Mapael.js
Verschiedene Möglichkeiten zur Einbindung
Module anlegen
- Map-Container
- Map-Geodaten
- angepasstes MetaModels-Listing
Weiter geht's ...
... mit den Templates
Ideen
Die Templates sollen ...
- Rohwerte ausgeben
- Werte in JSON kapseln
- angepasste Attributausgaben ermöglichen
Template-Ausgabe planen
Ziele:
- bequemes Pflegen der Daten, Farben, Links
- Einbau in eine JSON-Struktur
- Einbindung der JSON-Struktur in die Map
- (Optional: Befüllung via Importjob mit ConvertX)
Konfiguration Rendereinstellungen
Rendereinstellungen einrichten
- keine Labels
- Name und Farbwerte als Text
- Links als Rohwert
Templates
Templatestruktur metamodel_list_map.html aufbauen:
- benötigte Script-Fragmente
- Schleife zur strukturierten Ausgabe von Item-Daten
- abschliessende Script-Fragmente
Javascript
Laden und Einbinden von
- jQuery
- Raphael.js
- Mapael.js
Verschiedene Möglichkeiten zur Einbindung
Module anlegen
- Map-Container
- Map-Geodaten
- angepasstes MetaModels-Listing
... und alles in einen Artikel einbinden.
Map-Container

Map-Scripte

Die Karte an sich

Map-MetaModel

Daten erfassen ...

Ergebnis
... oder: Das Spiel dauert 90 Minuten.
Die Schweiz als interaktive Karte
Hier könnte ein Navigationsmodul eingebunden sein.
Quellen
SVG-Shapes: https://www.w3.org/TR/SVG/shapes.html
SVG-Styling-Eigenschaften: https://www.w3.org/TR/SVG/styling.html
Bibliotheken
jQuery - Basis-Javascriptbibliothek - https://jquery.com/
Raphael.js - Basisbibliothek für die Arbeit mit Vektorgrafiken - http://dmitrybaranovskiy.github.io/raphael/
Mapael.js - dynamische Visualisierungen mit Vektorgrafiken - http://www.vincentbroute.fr/mapael/
Geodaten
Geodatenportal Schweiz - http://www.geo.admin.ch/
Swisstopo - http://www.swisstopo.admin.ch/
Bundesamt Kartografie und Geodäsie - http://www.geodatenzentrum.de/
Mapael-Daten: https://github.com/neveldo/mapael-maps
Tools
Inkscape - freier Vektordaten-Editor - https://inkscape.org/de/

Fragen? Gerne.
Darüber hinaus: