Maak je SVG in Illistrator. Open daarna voor cleanup in: https://svgomg.net/

Om geen ruimte om je svg over te houden ga naar: https://svgcrop.com/

let op ruimte om SVG

ruimte om SVG weggehaald mbv https://svgcrop.com/

ook in elementor zelf kun je nog extra ruimte om de icoon weghalen: stijl – op maat gemaakt

SVG code cleanup op: https://svgomg.net/

ruimte om SVG weggehaald mbv https://svgcrop.com/

vorm zonder weghalen ruimte en in kleur; werkt niet

SVG met alleen grijstonen; werkt niet voor kleur

SVG met grijstonen als opacity black. wordt gerasterd, werkt niet. voorlopig alls svg’s zwart

SVG lijnen, verkleurd wel

SVG lijnen, ipv vlakken, werkt niet, geen verkleuring. lijnen omzetten in vlakken: Illustrator – Object – Uitbreiden.

SVG kleuren

Sommige svg’s kan ik in elementor wel een andere kleur kan geven als ik ze inlaad en ander niet, die blijven zwart. Dit is een veelvoorkomend iets als je vanuit Illustrator SVG’s maakt en ze daarna in Elementor (of een andere builder) wilt aanpassen qua kleur. Wat hier gebeurt, hangt vooral af van hoe je de vormen en lijnen in Illustrator hebt opgebouwd en hoe Illustrator de SVG exporteert.

Gebruik géén vaste kleuren in je SVG

Als je in Illustrator bijvoorbeeld een vlak of lijn een vaste kleur geeft (bijvoorbeeld zwart #000000) en die kleur direct in het SVG-bestand wordt geschreven, dan kan Elementor die kleur vaak niet “overschrijven” omdat het “inline” in de SVG-code staat.

Oplossing: Zet in Illustrator je kleuren op “none” (geen kleur) of gebruik in het exportproces de optie om styling “presentational attributes” te gebruiken (dit maakt het makkelijker voor Elementor).

Werk met eenvoudige vormen

Zet alle paden om naar echte paden. Dus: geen groepslagen, geen symbolen, geen effecten zoals schaduwen. Gebruik in Illustrator de optie Object > Expand Appearance om alles om te zetten naar pure paden.

Gebruik strokes en fills correct

Als je wilt dat je in Elementor zowel de lijn (stroke) als het vlak (fill) apart kunt kleuren, zorg dan dat je in Illustrator écht strokes gebruikt (geen lijnen die zijn omgezet naar dichte paden).

Tip: Houd de stroke apart en geef de fill een andere kleur of zet de stroke op zwart, maar vermijd complexe samengestelde paden.

Gebruik de juiste instellingen Bij Bestand > Exporteren > Exporteren als > SVG

Zo voorkom je dat kleuren “hard” worden vastgezet in de SVG-code:

  • SVG-profiel: SVG 1.1 of 1.2 is prima.

  • Type CSS eigenschappen: Presentation Attributes (heel belangrijk!)

  • Beperk opties: Geen illustrator-specifieke data toevoegen.

  • Responsive: Aanvinken als je wilt dat de grootte makkelijk aanpasbaar blijft.

Samenvatting

  • Zorg dat alles uit losse paden bestaat.

  • Geen vaste kleuren meegeven in Illustrator.

  • Export-instelling: Presentation Attributes kiezen.

  • Let op gebruik van strokes (lijnen) en fills (vlakken).

  • Eventueel stroke-diktes licht houden zodat Elementor daar flexibeler mee omgaat.

Voorbeeld SVG maken

Ik maak een simpele vorm in Illustrator: een cirkel met een gekleurde rand (stroke) en een gekleurde binnenkant (fill).

Stap 1

  • Teken een cirkel (L sneltoets voor Ellipse Tool).

  • Geef hem een stroke (bijv. 2 pt dik, kleur zwart) en een fill (bijv. wit of transparant).

Stap 2

Zorg dat het een gewoon pad is:
Ga naar Object > Uitbreiden → vink Stroke en Fill aan → OK.
Illustrator zet de vorm om naar “pure paden” (échte vectorlijnen). De originele instellingen zoals “dit is een lijn van 2pt dik zwart” worden vervangen door een gevuld pad dat eruitziet als een lijn.

De vormen moeten zwart zijn. Om te veel ruimte om de SVG te vermijden moet je in Illustrator het werkveld om de svg heen sluiten. (Object – tekengebieden)

Stap 3

Bewaard de SVG

  • Responsive: AAN

  • CSS Properties: Presentation Attributes

  • SVG 1.1 is de beste keuze voor de meeste moderne toepassingen (zoals in Elementor).
  • Dit kun je meestal gewoon op UTF-8 laten staan (standaardinstelling).
  • Aantal Decimalen:
    Meestal stel je dit in op 2 of 3 decimalen. Dit zorgt voor een goede balans tussen bestandsgrootte en nauwkeurigheid. Meer decimalen zorgen voor een grotere bestandsgrootte, zonder dat je echt winst in kwaliteit ziet.
lorum

lorum

leaves1

Leaves1-01. Als losse icoon in container

Complexe SVG. werkt niet altijd goed, veel extra werk in css. in sommige gevallen liever png.

Leaves1-01. Als achtergrond. Zie css hiernaast

.svg-bg-container4a {
position: relative
}

.svg-bg-container4a::before {
content: “”;
width: 100%;
height: 100%;
background: url(‘https://beeldbank.maydiya.nl/wp-content/uploads/images/leaves1-01.svg’) no-repeat bottom left;
background-size: cover;
transform: rotate(0deg); /* pas dit aan voor draaiing */
opacity: 1; /* transparantie */
z-index: 0;
}