Responsive SVG image map

Vroeger gebruikte ik vaak clickable maps als navigatie, bijvoorbeeld een kaartje van Nederland waar elke provincie een link is naar een aparte pagina. “Ouderwetse” image maps (bitmap plaatjes met klikbare hotspots in html) hebben als nadelen:

  • Bewerkelijk om te maken.
  • Niet responsive: plaatje schaalt wel, hotspots niet.
  • Vaak grote bestanden.

Op zoek naar een alternatief dus: de oplossing is SVG (scalable vector graphic).

Voordelen:

  • Hotspots zijn makkelijk en snel te maken.
  • Vector bestand, dus klein.
  • Responsive, vergroten en verkleinen zonder kwaliteitsverlies en hotspots schalen mee.

In dit artikel leg ik uit hoe je een responsive SVG image map kunt maken. Het resultaat kun je zien op de website Keuzehulp epilepsiezorg.

Kaartje maken en bewaren als SVG

Op Wikipedia vind je allerlei kaarten. Ik vond dit kaartje van Nederland.
In illustrator heb ik het kaartje een beetje bewerkt. Elke provincie is een pad en wordt een link naar een aparte pagina. Je kunt de paden in illustrator een vulling en lijn geven, of dit later met css regelen.

Het Illustrator bestand heb ik bewaard als svg (niet compressed).
Na het exporteren heb ik de links handmatig aan de paden toegevoegd, in de html.

Later zag ik dat je de hyperlinks ook al in illustrator kunt toevoegen: Add a hyperlink within Illustrator.

  1. Selecteer een pad
  2. Open het “Attributes panel” (Cmd/Ctrl + F11)
  3. Selecteer in dropdown menu  “Image input” en vervolgens “Polygon”
  4. Plak de link in “URL”
  5. Bewaar als svg

hyperlinks toevoegen in Illustrator

SVG code opschonen en in apart bestand zetten

Het svg bestand bestaat uit erg veel code en dit kun je beter niet rechtstreeks in de teksteditor van WordPress plakken. Die wil na het bewerken en opnieuw bewaren van een pagina die code nog wel eens wissen.

Daarom heb ik de code van de svg in een php bestand gezet. Ik noem dit bestand kaartje.php en bewaar het in de map van mijn child theme.

In kaartje.php staat dit:

[code]
<div id=”kaartje class=”svg-container”>
<svg version=”1.1″ viewBox=”0 0 711 843″ preserveAspectRatio=”xMinYMin meet” class=”svg-content”>
… (en dan de hele code van de svg) …
</svg>
</div>
[/code]

Alle code die boven “<svg” staat kan dus weg, en je kunt in de tag “<svg>” ook het een en ander schrappen, zie: Make SVG Responsive).

Shortcode om kaartje in content te plaatsen

Met een shortcode  [kaart] kan mijn klant het kaartje waar zij wil in elke pagina plaatsen.

Hoe maak je een shortcode in WordPress? Voeg onderstaande code toe aan functions.php van je childtheme:

[code]
//* shortcode voor svg kaartjes
function alva_kaartje() {
return file_get_contents( get_stylesheet_directory() . ‘/kaartje.php’ );
}

add_shortcode(‘kaart’, ‘alva_kaartje’);
[/code]

CSS voor kleuren van de links en mouseover

[code]
.svg-content path {
fill: #F78F1E;
transition: .6s fill;
stroke: #FFFFFF;
stroke-width: 4;
}

.svg-content path:hover {
fill: #ffc99a;
}
[/code]

Voor de kleinere schermen voegde ik op de pagina behalve het kaartje ook een lijstje met links naar de provincies toe (<ul class=”smallscreen”>). In CSS stel ik in dat dit lijstje op grotere schermen niet zichtbaar is.

[code]
.smallscreen {display: none;}

@media only screen and (max-width: 800px) {
.smallscreen {display: block;}
}
[/code]

CSS voor  responsive SVG

[code]
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 119% /* hoogte svg gedeeld door breedte */;
vertical-align: middle;
overflow: hidden;
}
.svg-content {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
[/code]

Als het kaartje nog teveel ruimte links of rechts heeft kun je dat aanpassen met de getallen achter “translate”:
[code]
<g id=”layer1″ transform=”translate(-50,-150)” inkscape:label=”Calque 1″ inkscape:groupmode=”layer”>
[/code]
Hoe dat werkt snap ik niet helemaal, maar het werkt.

Testen

Het werkt goed in alle browsers (behalve Internet Explorer versie 8 en lager). Het werkt ook goed op iPad en iPhone. Mijn klant zag het kaartje op de iPad in andere kleuren. Op mijn iPad waren de kleuren goed. Haar browser paste blijkbaar de stijl in de css niet toe. Daarom veranderde ik later de kleur van de paden nog handmatig in het bestand kaartje.php. Hoe dat kan is me nog een raadsel…

Links

Wil je reageren?

Graag!
Je kunt hier een berichtje achterlaten. Het is noodzakelijk daarvoor je naam en emailadres in te vullen. Het emailadres zal nooit openbaar worden gemaakt.
Na goedkeuring door WP-bieb zal je bericht op de website verschijnen.

*