|
SVG permet de réaliser des graphismes vectoriels dans un
format XML. Du fait que SVG fait appel aux vecteurs et non
aux pixels pour construire ses images, celles-ci peuvent,
si elles ne sont pas travaillées, sembler trop plates ou propres
face à ce qu'un graphique construits avec un éditeur bitmap
pourrait apporté.
Les concepteurs de SVG ont résolu ce problème en créant les
filtres SVG qui, s'ils ne cherchent pas à offrir aux vecteurs
les capacités des pixels, permettent d'arriver à un résultat
ayant plus de profondeur. Ces filtres permettent ainsi d'obtenir
du flou, des ombres, des embossages.
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
Le fonctionnement
En pratique, ces filtres agissent une fois le graphique dessiné
: ils n'ont dont aucune influence sur leur source, et sont
définis à part du conteneur principal :
<defs>
<filter id="ombrePortee">
</filter>
</defs>
<g filter="url(#ombrePortee)">
</g>
L'appel du filtre peut également être fait de la manière
suivante :
<g style="filter:url(#ombrePortee)">
Ou ne s'appliquer qu'à un élément précis, conteneur ou graphique
:
<text filter="url(#ombrePortee)">
Si le
filtre est appliqué à un conteneur, il touche tous ses éléments.
Les filtres s'appliquent indépendamment les uns des autres,
mais peuvent utiliser le résultat d'un filtre précédent par
le biais de tampons nommés. Sinon, un filtre travail toujours
avec le graphique vectoriel d'origine, inchangé.
Il est donc possible soit de construire une séquence en enchaînant
les filtres, soit de créer plus tampon pour chaque filtre
et de les lier pour créer le graphique final. Selon qu'un
filtre construire sur l'image d'origine ou une image déjà
filtrée, le résultat final peut être très différent.
Les filtres
Une quinzaine de filtres de base a ainsi été créée, ainsi
que trois éléments servant de source de "lumière". Voici les
actions de quelques filtres :
feBlend : fusionne de graphique
en un seul, en fonction d'un mode de fusion défini : normal,
multiply, screen, darken, lighten.
<filter id="Darken">
<feBlend mode="darken" in2="Image2" in="SourceGraphic"/>
</filter>
feComposite : crée un composite
de deux images.
feGaussianBlur : créé un
flou gaussien sur l'image.
fFeOffset : décale l'image
d'une certaine distance sur l'axe x et/ou y.
feMerge : permet de mélanger
les différents tampons créés par les filtres sur une seule
couche.
Un exemple
Voyons comment, à partir d'un graphique classique, réaliser
une version plus "vallonnée" : trois cercles de couleur avec
ombre portée :
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter
id="filtre" filterUnits="userSpaceOnUse" x="0" y="0" width="640"
height="480">
<feGaussianBlur
in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset
in="blur" dx="4" dy="4" result="offsetBlur"/>
<feComposite
in="blur" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite
in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0"
k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode
in="offsetBlur"/>
<feMergeNode
in="litPaint"/>
</feMerge>
</filter>
</defs>
<g style="fill-opacity:0.4;
stroke:black; stroke-width:0.1cm; filter:url(#filtre);" >
<circle
cx="6cm" cy="2cm" r="100" style="fill:#FF0000;" transform="translate(0,50)"
/>
<circle
cx="6cm" cy="2cm" r="100" style="fill:#0000FF;" transform="translate(70,150)"
/>
<circle
cx="6cm" cy="2cm" r="100" style="fill:#00FF00;" transform="translate(-70,150)"/>
</g>
</svg>
La succession des filtres se fait ici comme suit : feGaussianBlur
créé un flou de nos trois cercles et le stocke
sous le nom blur. feOffset
prend ce blur est le décale
légèrement. feComposite
mélange l'image originale et notre blur
et stocke le tout dans specOut.
feComposite mélange
specOut et l'image de base
pour stocker le tout dans litPaint.
Enfin, feMerge mélange
litPaint et offsetBlur.
|
