Key Takeaways

SVG-filters passen GPU-versnelde visuele effecten toe zoals vervaging, schaduw en vervorming direct in de browser
Filterprimitieven (feGaussianBlur, feColorMatrix, feTurbulence, etc.) kunnen worden geschakeld om complexe effecten te creëren
Creatieve recepten zoals matglas, neongloed en reliëf worden gebouwd door eenvoudige filterprimitieven te combineren
De prestaties variëren sterk — feColorMatrix is lichtgewicht terwijl feTurbulence rekenintensief is
Gebruik CSS-filters als fallback voor eenvoudige effecten en reserveer SVG-filters voor geavanceerde composities

De kracht van SVG-filters

SVG-filters maken geavanceerde visuele effecten mogelijk zonder rasterafbeeldingen. Van eenvoudige schaduwen tot complexe vervormingen, filters transformeren vectorafbeeldingen op krachtige manieren.

Overzicht van SVG-filtereffecten met vervaging, schaduw en kleurtransformaties — SVG-filters veranderen eenvoudige vormen in verbluffende visuele composities

Filterbasis

Filterstructuur

xml

<defs>
  <filter id="myFilter">
    <!-- Filterprimitieven hier -->
  </filter>
</defs>

<rect filter="url(#myFilter)" .../>

Filterregio

Beheer filtergrenzen:

xml

<filter id="f" x="-20%" y="-20%" width="140%" height="140%">
  <!-- Breidt het filtergebied uit voorbij het element -->
</filter>

Pro Tip: Breid altijd de filterregio uit (bijv. x="-20%") bij het gebruik van vervagings- of schaduweffecten. Als uw filteruitvoer er afgesneden uitziet, is de filterregio te klein.

Veelgebruikte filtereffecten

Vervaging (feGaussianBlur)

xml

<filter id="blur">
  <feGaussianBlur stdDeviation="5"/>
</filter>

Variabele vervaging:

xml

<!-- Alleen horizontale vervaging -->
<feGaussianBlur stdDeviation="10 0"/>

<!-- Alleen verticale vervaging -->
<feGaussianBlur stdDeviation="0 10"/>

Slagschaduw (feDropShadow)

Eenvoudige schaduw:

xml

<filter id="shadow">
  <feDropShadow dx="3" dy="3" stdDeviation="2" flood-opacity="0.5"/>
</filter>

Aangepaste schaduw

Meer controle:

xml

<filter id="custom-shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
  <feOffset in="blur" dx="4" dy="4" result="offset"/>
  <feFlood flood-color="#000" flood-opacity="0.5" result="color"/>
  <feComposite in="color" in2="offset" operator="in" result="shadow"/>
  <feMerge>
    <feMergeNode in="shadow"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

A Full Year of Conversions for $49

Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime

Get the Annual Deal

Kleureffecten

Kleurmatrix (feColorMatrix)

Grijswaarden-conversie:

xml

<filter id="grayscale">
  <feColorMatrix type="saturate" values="0"/>
</filter>

Sepiatoon:

xml

<filter id="sepia">
  <feColorMatrix type="matrix"
    values="0.393 0.769 0.189 0 0
            0.349 0.686 0.168 0 0
            0.272 0.534 0.131 0 0
            0     0     0     1 0"/>
</filter>

Tintrotatie:

xml

<filter id="hue-rotate">
  <feColorMatrix type="hueRotate" values="90"/>
</filter>

Kleuraanpassing

Helderheid/contrast:

xml

<filter id="bright">
  <feComponentTransfer>
    <feFuncR type="linear" slope="1.5" intercept="0"/>
    <feFuncG type="linear" slope="1.5" intercept="0"/>
    <feFuncB type="linear" slope="1.5" intercept="0"/>
  </feComponentTransfer>
</filter>

"

SVG-filters zijn de Photoshop van de browser — stapel ze verstandig en je kunt effecten creëren die anders zware beeldbewerkingssoftware zouden vereisen.

— Sara Soueidan, SVG-expert

Verplaatsing en vervorming

Turbulentie

Ruis creëren:

xml

<filter id="turbulence">
  <feTurbulence type="turbulence"
                baseFrequency="0.05"
                numOctaves="2"/>
</filter>

Verplaatsingskaart

Vervorming met patroon:

xml

<filter id="displace">
  <feTurbulence type="turbulence"
                baseFrequency="0.02"
                numOctaves="3"
                result="noise"/>
  <feDisplacementMap in="SourceGraphic"
                      in2="noise"
                      scale="30"
                      xChannelSelector="R"
                      yChannelSelector="G"/>
</filter>

Belichtingseffecten

Diffuse belichting

3D-achtige belichting:

xml

<filter id="diffuse">
  <feDiffuseLighting lighting-color="#white" surfaceScale="5">
    <fePointLight x="100" y="100" z="200"/>
  </feDiffuseLighting>
</filter>

Spiegelende belichting

Glanzende highlights:

xml

<filter id="specular">
  <feSpecularLighting specularConstant="1"
                       specularExponent="30"
                       lighting-color="white"
                       surfaceScale="5">
    <fePointLight x="150" y="60" z="200"/>
  </feSpecularLighting>
</filter>

Free SVG Tools for Crafters

Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG

Check Your SVG Free

Filters combineren

Samenvoegoperaties

Resultaten stapelen:

xml

<filter id="glow">
  <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
  <feMerge>
    <feMergeNode in="blur"/>
    <feMergeNode in="blur"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

Compositieoperaties

Combineren met operatoren:

xml

<filter id="cutout">
  <feImage href="mask.svg" result="mask"/>
  <feComposite in="SourceGraphic"
               in2="mask"
               operator="in"/>
</filter>

Creatieve recepten

Matglas

xml

<filter id="frosted">
  <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
  <feColorMatrix in="blur" type="saturate" values="1.5" result="saturate"/>
  <feTurbulence type="fractalNoise" baseFrequency="0.1" result="noise"/>
  <feDisplacementMap in="saturate" in2="noise" scale="5"/>
</filter>

Neongloed

xml

<filter id="neon">
  <feFlood flood-color="#ff00ff" result="flood"/>
  <feComposite in="flood" in2="SourceGraphic" operator="in" result="mask"/>
  <feGaussianBlur in="mask" stdDeviation="5" result="blur"/>
  <feMerge>
    <feMergeNode in="blur"/>
    <feMergeNode in="blur"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

Reliëfeffect

xml

<filter id="emboss">
  <feConvolveMatrix
    order="3"
    kernelMatrix="-2 -1 0
                  -1  1 1
                   0  1 2"/>
</filter>

Geanimeerde SVG-effecten waaronder gloed, turbulentie en dynamische overgangen — Het animeren van SVG-filters voegt diepte en interactiviteit toe aan webgrafiek

Animatie met filters

Geanimeerde vervaging

xml

<filter id="animated-blur">
  <feGaussianBlur stdDeviation="0">
    <animate attributeName="stdDeviation"
             values="0;10;0"
             dur="2s"
             repeatCount="indefinite"/>
  </feGaussianBlur>
</filter>

Dynamische turbulentie

xml

<feTurbulence baseFrequency="0.02">
  <animate attributeName="baseFrequency"
           values="0.01;0.05;0.01"
           dur="5s"
           repeatCount="indefinite"/>
</feTurbulence>

A Full Year of Conversions for $49

Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime

Get the Annual Deal

Prestatieoverwegingen

Prestatie-impact

Filterprestaties:
feGaussianBlur: Zwaar (afhankelijk van straal)
feColorMatrix: Licht
feTurbulence: Zeer zwaar
feDisplacementMap: Zwaar
Geschakelde filters: Cumulatief

Optimalisatietips

Filterregio minimaliseren
Vervagingsstraal verminderen
Geschakelde effecten beperken
Statische filters cachen
CSS-filters gebruiken waar mogelijk

Voor eenvoudige effecten zoals vervaging, grijswaarden of slagschaduw is het CSS filter aanzienlijk sneller dan SVG-filters omdat het gebruikmaakt van hardwareversnelde compositing. Reserveer SVG-filters voor effecten die CSS niet kan repliceren.

CSS-filteralternatief

Gebruik indien mogelijk CSS:

css

.blurred {
  filter: blur(5px);
}

.grayscale {
  filter: grayscale(100%);
}

Browsercompatibiliteit

Ondersteuningsstatus

Brede ondersteuning:
- feGaussianBlur
- feColorMatrix
- feOffset
- feMerge

Variabele ondersteuning:
- feDisplacementMap
- feTurbulence
- feDiffuseLighting

Fallbackstrategieën

css

.element {
  /* Fallback */
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

@supports (filter: url(#shadow)) {
  .element {
    box-shadow: none;
    filter: url(#shadow);
  }
}

Conclusie

SVG-filters maken geavanceerde effecten mogelijk die onmogelijk zijn met alleen CSS. Hoewel rekenintensief, bieden ze nauwkeurige controle over visuele behandelingen. Gebruik ze doordacht voor impactvolle effecten, altijd rekening houdend met prestaties en met fallbacks.

Gefilterde vectoreffecten maken

Filterprimitief	Effect	Prestatiekosten
feGaussianBlur	Zachte vervaging / matglas	Gemiddeld (GPU-versneld)
feColorMatrix	Kleurverschuiving, desaturatie	Laag
feTurbulence	Ruis, organische texturen	Hoog (pixelniveau-berekening)
feDisplacementMap	Vervorming, golfeffecten	Hoog
feDropShadow	Slagschaduwen	Laag–Gemiddeld

Free SVG Tools for Crafters

Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG

Check Your SVG Free

Bronnen & verder lezen

MDN Web Docs: SVG-filtereffecten — Gedetailleerde referentie voor elke SVG-filterprimitief en zijn attributen
W3C SVG 2: Filtereffecten — Officiële specificatie van de SVG-filterpipeline en het compositingmodel
CSS-Tricks: SVG-filters — Visuele voorbeelden en recepten voor creatieve SVG-filtercombinaties
Smashing Magazine: SVG-filters — Geavanceerde tutorials over het schakelen van filterprimitieven voor productie-visuele effecten

Key Takeaways

Filterstructuur

Filterregio

Vervaging (feGaussianBlur)

Slagschaduw (feDropShadow)

Aangepaste schaduw

Kleurmatrix (feColorMatrix)

Kleuraanpassing

Turbulentie

Verplaatsingskaart

Diffuse belichting

Spiegelende belichting

Samenvoegoperaties

Compositieoperaties

Matglas

Neongloed

Reliëfeffect

Geanimeerde vervaging

Dynamische turbulentie

Prestatie-impact

Optimalisatietips

CSS-filteralternatief

Ondersteuningsstatus

Fallbackstrategieën

Try VectoSolve Now

Related articles

Hoe we de laadtijd met 70% verlaagden met SVG-optimalisatie: een echte casestudy

Gids voor webontwikkelaars: Best practices voor SVG-integratie

Drukklare vectoren maken: van scherm naar professionele druk

Related Conversion Tools

PNG to SVG Converter

JPG to SVG Converter

JPEG to SVG Converter

Explore related tools

Ready to vectorize your images?