MORE FUN MIT #SVG

Carolina Koehn

Contao-Konferenz 2016

Über mich

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 ...

Alle sind XML-basiert, alle sind daher editierbar und steuerbar.

Link: https://www.w3.org/TR/SVG/shapes.html

Stile und Farben

Styling-Properties

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

- Mapael.js

- Metamodels

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

Link: http://www.vincentbroute.fr/mapael/

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

Für diese Funktion wird JavaScript benötigt.
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:

@carolinakoehn

ck@kikmedia.de