SVGDes filtres


Syntaxe

  • Déclaration de filtre: <filter id="filter-id" > ... liste des primitives enfants ... </filter>
  • Appliquer le filtre via l'attribut SVG: <elementname filter="url(#filter-id)" ... />
  • Appliquer le filtre via la propriété CSS: (-prefix- ) filter: url ("# filter-id");

Paramètres

Attributs d'élément Détails
Région de filtre L'élément filtrant peut éventuellement définir la position, les dimensions, la résolution et les unités pour la sortie d'un effet de filtre. La position et les dimensions d'un filtre peuvent être spécifiées à l'aide des paramètres suivants: x, y, width, height. Les valeurs par défaut ne sont pas intuitives et sont: x: -10% y: -10% largeur: 120% hauteur: 120%
Résolution du filtre L'attribut filterRes est un attribut facultatif de SVG 1.1 qui peut être utilisé pour spécifier la résolution à laquelle le filtre est traité. Cet attribut avait un support inégal et est maintenant obsolète dans les navigateurs actuels.
Unités de filtrage Par défaut, les unités et le système de coordonnées de la région des effets de filtre (x, y, largeur, hauteur) d'un élément de filtre sont définis par rapport au cadre de sélection de l'élément faisant référence au filtre. En termes SVG, cela s'appelle "objectBoundingBox". Lorsque nous écrivons x = "50%", cela signifie "définir la position x de départ de la zone de filtrage à gauche du cadre de sélection de l’élément de référence + 50% de la largeur de l’élément". Mais vous pouvez également spécifier les unités et les coordonnées explicitement en définissant la propriété filterUnits. Les deux alternatives sont "objectBoundingBox" (la valeur par défaut que nous venons de décrire) ou "userSpaceOnUse". userSpaceOnUse définit les unités de filtrage et le système de coordonnées sur le canevas de l'élément de référence ou, en termes de SVG, sur "userSpaceOnUse".
Unités primitives En plus du système d'unités pour le filtre lui-même, vous pouvez également spécifier le système d'unités que les primitives de filtres enfants du filtre utiliseront via l'attribut primitiveUnits. Encore une fois, le choix est entre userSpaceOnUse et objectBoundingBox. Celles-ci affectent les coordonnées 0,0 et les valeurs unitaires des primitives de filtrage de la même manière que pour les unités de filtrage.
Espace de couleur L'espace de couleur par défaut pour les filtres SVG est linearRGB. L'attribut optionnel color-interpolation-filters peut être défini sur sRGB pour changer l'espace colorimétrique en espace sRGB plus conventionnel.

Remarques

La plupart des attributs de filtre peuvent être animés via l'élément <animate> , même si vous devez utiliser la bibliothèque "fakeSMIL" sur IE pour obtenir les mêmes résultats. L'animation SMIL (l'élément <animate> ) sera déconseillée au profit de la nouvelle spécification Web Animations - qui a un support très limité à la mi-2016.

Les éléments enfants de l'élément Filter - primitives de filtre - ont deux attributs facultatifs qui spécifient l'espace colorimétrique dans lequel les calculs d'interpolation de couleur sont effectués: interpolation de couleur et filtres d'interpolation de couleur. La valeur par défaut pour le premier est sRGB, et la valeur par défaut pour le dernier est linearRGB. Les manipulations qui inversent l'espace colorimétrique (via feColorMatrix ou feComponentTransfer) peuvent donner des résultats non intuitifs - pour ceux utilisés dans l'espace colorimétrique CSS sRGB. Par exemple, une inversion de couleur d'une image en niveaux de gris dans linearRGB entraînera un décalage prononcé vers des tons plus blancs. Cela peut être corrigé en définissant la valeur de la primitive sur sRGB. Ces attributs peuvent être définis sur les primitives de filtre individuelles ou hérités de l'élément de filtre lui-même.

Si aucune autre entrée n'est spécifiée, mais une seule est requise, la première primitive de filtre dans un filtre prendra comme entrée une version pixellisée (bitmap) de l'élément de référence. Les primitives de filtrage suivantes qui attendent une entrée prennent en entrée le résultat de la primitive de filtre immédiatement précédente.

Dans les filtres complexes, il peut être difficile de suivre (et de déboguer) les entrées et les sorties si elles sont implicites. et il est recommandé de déclarer explicitement les entrées et les sorties pour chaque primitive.


Les primitives de filtre SVG peuvent être familièrement divisées en entrées, transformations, effets d'éclairage et combinaisons.

Contributions:

feFlood: génère un champ de couleur

feTurbulence: génère une grande variété d'effets sonores

feImage: génère une image à partir d'une référence d'image externe, d'un URI de données ou d'une référence d'objet (les références d'objet ne sont pas prises en charge dans Firefox à la mi-décembre '12)

Transformations:

feColorMatrix: transforme les valeurs d'entrée d'un pixel RBGA en valeurs de sortie

feComponentTransfer: ajuste la courbe de couleur d'un canal de couleur individuel

feConvolveMatrix: remplace chaque pixel par un nouveau pixel calculé à partir des valeurs de pixels dans une zone par rapport au pixel en cours)

feGaussianBlur: remplace le pixel actuel par une moyenne pondérée de pixels dans une zone autour du pixel

feDisplacementMap: déplace chaque pixel de sa position actuelle en fonction des valeurs R, G ou B d'un autre graphique d'entrée.

feMorphology: remplace chaque pixel par un nouveau pixel calculé à partir de la valeur maximale ou minimale de tous les pixels dans une zone rectangulaire autour de ce pixel.

feOffset: déplace l’entrée de sa position actuelle

Effets d'éclairage:

feSpecularLighting: fournit un effet d'éclairage "brillant" 2D ou pseudo-3D

feDiffuseLighting: fournit un effet d'éclairage 2D ou pseudo-3D "mat"

feDistantLight: fournit une source de lumière distante pour l'éclairage spéculaire ou diffus

feSpotLight: fournit une source de lumière conique pour l'éclairage spéculaire ou diffus

fePointLight: fournit une source lumineuse ponctuelle pour un éclairage spéculaire ou diffus

Combinaisons:

feMerge: crée un simple sur-composite à partir de plusieurs entrées (y compris les entrées de filtre précédentes)

feBlend: mélange plusieurs entrées en utilisant les règles de mixage

feComposite: combine plusieurs entrées à l'aide de règles de combinaison définies, en tenant compte des valeurs alpha.

feTile: entrée de tuiles pour créer un motif répétitif


Autres notes

Bien que SVG soit une technologie graphique vectorielle, il est important de souligner que les filtres SVG effectuent des opérations au niveau des pixels sur toutes les entrées (y compris les formes SVG) et produisent des sorties tramées (bitmap) à un niveau de résolution spécifié. L'application d'une transformation à l'échelle 10x (par exemple) sur une courbe SVG simple qui a été filtrée à une résolution d'écran normale produira des bords pixellisés car l'anticrénelage du graphique d'origine a été converti en pixels par le filtre et mis à l'échelle. (On ne sait pas si cela est conforme aux spécifications ou juste une limitation des implémentations actuelles)

Rappelez-vous que SVG est XML lorsque vous écrivez des filtres, donc toutes les balises doivent être fermées et de nombreuses propriétés et attributs doivent être spécifiés explicitement ou le filtre ne s'exécutera pas.

Un élément de filtre n'est jamais rendu directement. Il est uniquement référencé à l'aide de la propriété filter sur l'élément auquel le filtre est appliqué. Notez que la propriété display ne s'applique pas à l'élément filter et que les éléments ne sont pas directement rendus même si la propriété display est définie sur une valeur autre que "none". Inversement, les éléments de filtre sont disponibles pour référencer même lorsque la propriété d'affichage de l'élément de filtre ou de l'un de ses ancêtres est définie sur "none".

Les filtres SVG peuvent être référencés via un filtre CSS, bien qu'à la mi-2016, seul un sous-ensemble de primitives soit pris en charge via ce mécanisme, et ce mécanisme n'est pas pris en charge dans les navigateurs Microsoft.

Des filtres Exemples Liés