Zelf-responsive SVG + JavaScript-crop

Twee technieken om één infographic-SVG te laten meebewegen: puur in de SVG (schakelt tussen een brede en een staande weergave), en een optionele JavaScript-crop om overtollige witruimte onder de brede weergave weg te knippen. Kopieer de blokken met de knop rechtsboven.

1. De responsieve SVG (zonder JavaScript)

De SVG bevat twee versies van je infographic in aparte groepen — .layout-breed en .layout-staand — en een @media-regel die tussen beide schakelt. Het font wordt in de SVG ingebakken, zodat het bestand zelfstandig werkt.

<svg viewBox="0 0 608 1210" xmlns="http://www.w3.org/2000/svg">
  <style>
    /* 1) Font meeleveren -> de SVG werkt zelfstandig, ook als los bestand */
    @font-face {
      font-family: RijksoverheidSansWebText;
      src: url(data:font/woff2;base64,PLAK-HIER-JE-BASE64-FONT) format("woff2-variations");
    }

    /* 2) Breekpunt: onder 430px EIGEN breedte -> toon de staande weergave */
    @media (max-width: 430px) {
      .layout-breed  { display: none; }
      .layout-staand { display: block; }
    }
  </style>

  <!-- Witte achtergrond over de hele viewBox -->
  <rect x="0" y="0" width="608" height="1210" fill="#ffffff"/>

  <!-- BREED (landscape). Optioneel verticaal gecentreerd met translate. -->
  <g class="layout-breed" transform="translate(0,143)"
     font-family="RijksoverheidSansWebText, Arial, sans-serif">
    <!-- ... jouw brede content: <text>, <rect>, <path> (iconen) ... -->
  </g>

  <!-- STAAND (portret). Standaard verborgen boven 430px. -->
  <g class="layout-staand" display="none"
     font-family="RijksoverheidSansWebText, Arial, sans-serif">
    <!-- ... jouw staande content ... -->
  </g>
</svg>

De belangrijkste voorwaarde. Gebruik de SVG als bestand via <img> (of <object> / CSS-achtergrond). Als je de SVG-broncode inline in je HTML plakt, kijkt de @media-regel naar het browservenster in plaats van naar de eigen breedte van de SVG — en dan werkt het trucje niet.

<!-- Gebruik de SVG als BESTAND via <img> - NIET de SVG-broncode inline plakken! -->
<img src="jouw-infographic.svg" alt="Beschrijving van de infographic"
     style="width:100%; max-width:608px; height:auto;">

Waar zetten & wat aanpassen

Waar: dit ís je .svg-bestand. Plaats het waar je wilt en toon het met de <img> hierboven.

Aanpassen	Wat
`viewBox`	De maat van je tekening: `0 0 <breedte> <hoogte>`. De hoogte is die van de staande (langste) weergave.
`@media (max-width: 430px)`	Het breekpunt: onder deze EIGEN breedte klapt de SVG om. Kies wat bij jouw ontwerp past.
`.layout-breed` / `.layout-staand`	Vul deze twee groepen met jouw eigen brede en staande content (`<text>`, `<rect>`, `<path>`).
`@font-face … base64`	Plak je eigen webfont als base64 data-URI, of verwijder het blok als je een systeemfont gebruikt.
`transform="translate(0,143)"`	Optioneel: schuif de brede groep omlaag om hem verticaal te centreren. Waarde = (viewBox-hoogte − hoogte brede content) ÷ 2 − bovenmarge. Weglaten = bovenaan uitlijnen.

2. De JavaScript-crop (optioneel)

Eén SVG-bestand heeft één viewBox, dus één vaste hoogte/verhouding. De brede weergave is meestal lager dan de staande, waardoor er onder de brede weergave witruimte overblijft. Kun je een stukje HTML/JS rond de SVG zetten? Dan knipt dit blok die witruimte weg door de hoogte van een kader mee te laten bewegen.

Let op: gebruik hiervoor een SVG waarvan de brede content bovenaan begint (dus zónder de translate(...)-centrering uit stap 1). Anders knip je onderaan een deel van je gecentreerde content weg.

<!-- 1) Zet de SVG in een 'kader' dat de witruimte kan bijknippen -->
<div class="svg-frame">
  <img src="jouw-infographic.svg" alt="Beschrijving van de infographic">
</div>

<style>
  .svg-frame     { position: relative; width: 100%; max-width: 608px;
                   margin: 0 auto; overflow: hidden; }   /* overflow:hidden = knipt bij */
  .svg-frame img { display: block; width: 100%; height: auto; }
</style>

<!-- 2) Script: zet de hoogte van het kader gelijk aan de actieve layout -->
<script>
  var frame = document.querySelector('.svg-frame');

  var NATIVE  = 608;   // breedte uit je viewBox
  var FULL_H  = 1210;  // hoogte uit je viewBox (= staande weergave, volledig)
  var BREED_H = 956;   // hoogte tot net onder je BREDE content (witruimte weg)
  var BREAK   = 430;   // zelfde breekpunt als de @media in je SVG

  function crop() {
    var w = frame.getBoundingClientRect().width;
    var staand = w < BREAK;
    // staand -> volledige hoogte, breed -> ingekorte hoogte (witruimte weggeknipt)
    frame.style.height = (w * (staand ? FULL_H : BREED_H) / NATIVE) + 'px';
  }
  new ResizeObserver(crop).observe(frame);  // reageert op elke breedte-wijziging
  crop();
</script>

Waar zetten & wat aanpassen

Waar: de <div class="svg-frame"> zet je in je pagina waar de infographic moet komen. De <style> mag in je stylesheet; het <script> ergens ná de div (of in een DOMContentLoaded).

Variabele	Wat
`NATIVE`	De breedte uit je `viewBox` (hier 608).
`FULL_H`	De hoogte uit je `viewBox` — de staande weergave krijgt de volledige hoogte.
`BREED_H`	De y-waarde waar je BREDE content ophoudt, plus wat marge. Alles daaronder wordt weggeknipt.
`BREAK`	Hetzelfde breekpunt als de `@media` in je SVG, zodat crop en layout tegelijk omslaan.

Tip om BREED_H te vinden: kijk naar de laagste y (+ hoogte) van je brede content en tel er ~40–60 px marge bij op, zodat het niet abrupt afgebroken lijkt.