Gebruik deze checklist voordat je een SVG-bestand in Mosaic gebruikt. Mosaic verwerkt SVG-afbeeldingen anders dan een normaal grafisch programma. Vooral bij SVG’s die dynamisch worden gevuld of geanimeerd, is het daarom belangrijk dat de afbeelding uit een eenvoudige, goed opgebouwde vorm bestaat.
Je kunt de SVG bijvoorbeeld maken in:
- Adobe Illustrator
- Inkscape
- Figma
1. Maak van de afbeelding één vorm
☐ De SVG bestaat uit één samengesteld pad (compound path).
☐ Er zijn geen losse vormen of paden meer aanwezig.
☐ Losse vormen zijn niet alleen gegroepeerd, maar daadwerkelijk samengevoegd tot één samengesteld pad.
Waarom?
Mosaic moet de afbeelding als één geheel kunnen behandelen. Wanneer een SVG uit meerdere losse vormen bestaat, kunnen onderdelen afzonderlijk worden gevuld of geanimeerd.
Illustrator:
Object → Compound Path → Make
Controleer na het samenvoegen altijd of eventuele uitsparingen en gaten nog correct zichtbaar zijn.
2. Zet tekst om naar vormen
☐ Alle tekst is omgezet naar contouren/outlines.
☐ De omgezette tekst maakt onderdeel uit van het samengestelde pad.
☐ Er staan geen gewone tekstobjecten meer in het bestand.
Waarom?
Lettertypen zijn niet altijd beschikbaar in de omgeving waarin Mosaic de SVG toont. Door tekst om te zetten naar vormen blijft de weergave behouden.
Illustrator:
Type → Create Outlines
3. Controleer het artboard en de viewBox
☐ De volledige afbeelding valt binnen het artboard.
☐ Het artboard sluit zo goed mogelijk aan op de afbeelding.
☐ Er is geen onnodige witruimte rondom de vorm.
☐ De SVG heeft een geldige viewBox.
Een viewBox kan er bijvoorbeeld zo uitzien:
viewBox="0 0 100 100"
Waarom?
Extra ruimte rondom de afbeelding kan ervoor zorgen dat de SVG in Mosaic kleiner lijkt of niet goed wordt uitgelijnd.
4. Controleer de afmetingen
☐ Breedte en hoogte hebben een geldige SVG-afmeting.
☐ De verhouding tussen breedte en hoogte klopt.
Gebruik bij voorkeur pixels (px) wanneer expliciete afmetingen nodig zijn.
5. Gebruik eenvoudige vormen en vullingen
☐ De afbeelding kan volledig met een fill worden weergegeven.
☐ Er zijn geen vaste kleuren nodig voor de werking van de afbeelding.
☐ Er worden geen gradients gebruikt.
☐ Strokes/lijnen zijn waar mogelijk omgezet naar vormen.
Wanneer een stroke onderdeel moet zijn van de afbeelding, zet deze dan eerst om naar een vorm (expand of stroke to path).
Waarom?
Mosaic kan de kleur of vulling van de SVG vanuit het dashboard aanpassen. Eenvoudige gevulde vormen geven daarbij het meest voorspelbare resultaat.
6. Vermijd SVG-elementen die Mosaic niet goed ondersteunt
Gebruik waar mogelijk geen:
☐ <style>-elementen
☐ complexe <defs>-constructies
☐ masks
☐ clipping paths
☐ patronen
☐ rasterafbeeldingen
☐ gradients
☐ constructies die afhankelijk zijn van opacity
☐ transforms die nodig zijn om de afbeelding correct weer te geven
Een eenvoudige SVG met alleen het noodzakelijke pad is het meest betrouwbaar.
7. Maak het bestand schoon
☐ Verwijder verborgen en ongebruikte elementen.
☐ Verwijder onnodige ankerpunten.
☐ Controleer of er geen objecten buiten het artboard staan.
☐ Controleer of de SVG zonder transforms nog correct wordt weergegeven.
Illustrator:
Object → Path → Simplify
Gebruik Simplify voorzichtig: controleer daarna of de vorm niet zichtbaar is veranderd.
8. Test de SVG in Mosaic
Upload de SVG voordat je deze definitief oplevert en controleer:
☐ De volledige afbeelding is zichtbaar.
☐ Er ontbreken geen onderdelen.
☐ Uitsparingen en gaten worden correct weergegeven.
☐ De afbeelding wordt als één geheel gevuld.
☐ De afbeelding blijft herkenbaar bij een lage vulling, bijvoorbeeld 10%.
☐ De afbeelding schaalt correct mee.
Veelvoorkomende problemen
| Probleem | Mogelijke oorzaak | Oplossing |
|---|---|---|
| Onderdelen worden afzonderlijk gevuld | De SVG bevat meerdere losse paden | Maak één compound path |
| Tekst ontbreekt of ziet er anders uit | Tekst is niet omgezet naar outlines | Zet tekst om naar contouren |
| De afbeelding lijkt te klein | Er zit veel witruimte in het artboard/viewBox | Laat het artboard aansluiten op de vorm |
| Delen van de afbeelding verdwijnen | Gebruik van masks, clipping paths of complexe SVG-elementen | Zet de vorm om naar eenvoudige paden |
| Een lijn wordt niet goed gevuld | De afbeelding gebruikt strokes | Zet strokes om naar vormen |
| De kleur wordt niet goed overgenomen | Er staan vaste kleuren of stijlen in de SVG | Verwijder vaste styling en gebruik eenvoudige fills |
Klaar voor gebruik?
Als alle controles zijn uitgevoerd, is de SVG in principe geschikt voor Mosaic.
Test de SVG altijd één keer in het daadwerkelijke Mosaic-dashboard voordat je het bestand definitief oplevert.