Filtros

Los filtros SVG se pueden aplicar a cualquier forma, texto o imagen. Generalmente se crean en el encabezado <defs> con un ID al que se puede hacer referencia mediante url(#id) usando el atributo filter. El elemento <filter> puede contener varios tipos de filtros diferentes y también se pueden crear filtros compuestos. El siguiente ejemplo crea dos configuraciones diferentes para el filtro <feGaussianBlur>, aplicado a un elemento de texto y a un círculo:

<body>
<h2>SVG filter</h2>
<svg width="600" height="300">
    <defs>
        <filter id="filter1">
            <feGaussianBlur stdDeviation="7" />
        </filter>
        <filter id="filter2" x="-100" y="-100" height="200" width="200">
            <feGaussianBlur stdDeviation="0,5" in="SourceGraphic" />
        </filter>
    </defs>
    <text id="text" font-size="40" fill="black" x="50" y="60" filter="url(#filter2)">Do you need glasses?</text>

    <g id="stardot" transform="translate(100,25) scale(0.5)">
        <polygon id="star" points="250,0 400,500 0,200 500,200 100,500" fill="red" fill-rule="evenodd"/>
        <circle  id="circ" cx="250" cy="283" r="75" fill="blue" filter="url(#filter1)" />
    </g>
</svg>
</body>

El resultado se muestra a continuación: