Om een SVG bestand correct op te bouwen heb je een van de volgende progamma's nodig.
- Adobe Illustrator
- Inkscape
- Figma
Gebruik deze checklist voordat je een SVG uploadt in Mosaic. Zo voorkom je fouten in weergave en animatie.
Stap 1 – Basisstructuur
☐ Bestaat de SVG uit één compound path
☐ Geen losse paths aanwezig
☐ Geen grouping (<g>) gebruikt als oplossing
Tip (Illustrator): Object → Compound Path → Make
Stap 2 – Tekst
☐ Alle tekst omgezet naar outlines
☐ Tekst samengevoegd in het compound path
☐ Geen losse tekstobjecten aanwezig
Tip: Type → Create Outlines
Stap 3 – Artboard & viewBox
☐ SVG past binnen het artboard
☐ viewBox correct ingesteld (bijv. 0 0 100 100)
Belangrijk: geen witruimte rondom de vorm
Stap 4 – Afmetingen
☐ Breedte en hoogte in pixels (px)
☐ Verhoudingen kloppen
Stap 5 – Vorm & vulling
☐ Vorm werkt volledig op basis van fill
☐ Geen vaste kleuren nodig (wordt via dashboard bepaald)
☐ Geen gradients gebruikt
☐ Geen strokes nodig
Indien gebruikt: strokes eerst expanden
Stap 6 – Niet-toegestane elementen
Controleer dat deze NIET in je SVG staan:
☐ <style>
☐ <defs>
☐ masks / clipping paths
☐ patronen / rasterelementen
☐ opacity-trucs
Stap 7 – Opschonen
☐ Overbodige punten verwijderd (simpel pad)
☐ Geen verborgen elementen
☐ Geen transforms (rotate/scale via code)
Tip: Object → Path → Simplify
Stap 8 – Test
☐ SVG correct zichtbaar bij lage vulling (bijv. 10%)
☐ Geen onverwachte gaten of losse delen
☐ Gedraagt zich als één geheel
Veelgemaakte fouten
Meerdere losse shapes → worden apart gevuld
Tekst niet ge-outlined → verdwijnt of styled verkeerd
Witruimte in artboard → vulling lijkt “kapot”
Gebruik van gradients → werkt niet in dashboard
Klaar?
Als alles is afgevinkt, is je SVG geschikt voor gebruik in Mosaic
Wil je zeker weten dat je bestand goed is? Test het één keer in het dashboard voordat je het oplevert.