Accueil

Tutoriel Inkscape - sommaire

Vous pouvez me contacter via Facebook (questions, critiques constructives) : page Facebook relative à mon site

Les filtres avec Inkscape - suite

Inkscape : ombrage des formes avec un filtre

Nous allons utiliser le sous menu "Ombres et lueurs".

Le sous menu "Ombres et lueurs"

images SVG avec Inkscape

Dans l'image ci-dessus nous avons appliqué à chaque rectangle vert citron un filtre appartenant à la catégorie "ombres et lueurs".

L'option "ombre portée" est la plus intéressante ! C'est avec cet item que l'on peut produire véritablement un ombrage d'objet.

Mais il faut renseigner une boîte de dialogue ...
Pour le rectangle de gauche les décalages H et V sont positifs alors qu'ils sont négatifs dans le rectangle de droite.
Sinon les valeurs absolues sont identiques : 10px tant pour le rayon du flou, le décalage horizontal et vertical.

Ici les ombres portées sont de couleur noire à demi transparente (code RVBA : 0,0,0,122) et sont extérieures
Il est possible de paramétrer la couleur de l'ombrage et sa transparence donc le code RVBA du floutage.

Ombres portées

Il est important de bien savoir paramétrer la boîte de dialogue relative à l'option "ombre portées" puisque c'est sans doute le filtre dont vous vous servirez le plus.

Pour l'instant nous n'avons utilisé que l'onglet "options" de cette boîte de dialogue.
Mais il y a un deuxième onglet "couleur du flou". images SVG avec Inkscape

Ci-dessous un document Inkscape avec 4 rectangles rouges (code RGB : 255,0,255 ou #FF0000)

Attention pour le dernier rectangle dans l'onglet "options" j'ai remplacé la proposition par défaut (extérieur) dans la liste "type d'ombre" par "ombre seulement".

Inkscape : éditeur de filtres

Vous pouvez créer vos propres filtres grâce à la commande Filtres/Editeur de filtre.
Mais attention c'est un peu plus compliqué ...

Les filtres de couleur : primitive feColorMatrix

image SVG avec Inkscape

Commentaire

Ci-dessus six images SVG reposant sur l'incorporation d'une photo ; son clonage puis la duplication cinq fois du modèle.

Pour bien comprendre la notion de filtre de couleurs, je vous conseille de visiter mon tutoriel "dessiner avec SVG" et plus précisément la page relative aux filtres de couleur.

Donc la primitive feColorMatrix peut avoir différents types (matrix, saturate, hueRote et LuminanceToAlpha).

Utilisation de l'éditeur de filtres

Extraits du code du document

<filter id ="filter5800"> <feColorMatrix type ="hueRotate" values ="90" /> </filter> ... <use x="0" y="0" xlink:href="#image5761" transform="translate(480)" width="100%" height="100%" style="filter:url(#filter5800)" /> ...

image5761 identifie l'image matricielle incorporée dans le document SVG.

Atelier sur les filtres

À vous de bosser un peu !

Les filtres prédéfinis

image SVG avec Inkscape

Ci-dessous un document Inkscape.
La photo originale a été clonée 5 fois (incorporation de l'image matricielle puis génération cinq fois de la commande use).
A chaque copie il a été appliqué un filtre prédéfini appartenant au sous menu "Dessin et peinture d'image".

Essayez de reconstituer ce document !

Atelier sur l'éditeur de filtres

image SVG avec Inkscape

Essayez de reconstituer ce document !

Pour le filtre de couleurs de type "saturate" la valeur de saturation est de 4.
Or dans le cadre de boîte de dialogue (de l'éditeur de filtres et pour les filtres de couleurs de type saturation) on arrive à sélectionner 0 ou 1 mais des entiers supérieurs à 1 ...
Aussi ai-je ouvert avec notePad le fichier SVG et j'ai modifié le code SVG relatif au filtre appliqué à la deuxième image : remplacer 0 par 4 pour l'attribut values.

Extrait du code

... <filter id="filter5792"> <feColorMatrix type="saturate" values="4" /> </filter> ... <use id="use5766" xlink:href="#image5761" y="0" x="0" transform="translate(480,0)" width="100%" height="100%" style="filter:url(#filter5792)" />