La série d'articles proposée, " SVG Filtering Effects ", par Sara Soueidan, développeur d'interface UI / UX indépendant et auteur de nombreux articles techniques basés au Liban, se concentre sur le travail des filtres SVG et se compose des articles suivants:

Effets de filtrage SVG

1. Effets de filtrage SVG. Partie 1. Filtres SVG 101 .
2. Effets de filtrage SVG. Partie 2. Décrire le texte avec feMorphology
3. Effets de filtrage SVG. Partie 3. L'effet de la postérisation d'images à l'aide de feComponentTransfer .
4. Effets de filtrage SVG. Partie 4. Images bicolores avec feComponentTransfer .
5. Effets de filtrage SVG. Partie 5. Correspondance du texte à la texture de la surface avec feDisplacementMap

Dans la deuxième partie de la série de filtres SVG, Sara Soueidan nous présente le filtre feMorphology et donne quelques exemples d'utilisation pour créer des effets intéressants.

Dans la première partie de cette série sur les effets de filtre SVG, nous avons présenté les bases des filtres SVG - comment les créer et comment les utiliser. Nous avons également examiné certaines des opérations de filtrage les plus couramment utilisées, à savoir filtrer les primitives. Parce que Comme nous allons réutiliser ces informations, je vous recommande d'arrêter et de lire cet article avant de passer à celui-ci.

<feMorphology> est l'une de mes opérations de filtrage SVG préférées. C'est aussi l'une des opérations les plus simples, et les résultats de son application à divers éléments sont toujours prévisibles.

Qu'est-ce que le morphing?

Le morphing signifie transformer ou changer la forme ou l'apparence d'un objet.

Le filtre morphologique agit sur la forme de l'objet. Il fournit deux transformations de forme prédéfinies: l'érosion (c'est-à-dire l'amincissement ou le rétrécissement) et l'expansion (c'est-à-dire A. l'épaississement ou l'expansion). En d'autres termes, la primitive feMorphology peut être utilisée pour compresser ou développer un élément.

Techniquement parlant, ces deux opérations fonctionnent au niveau du pixel, étendant le pixel aux pixels voisins ( dilatés ) ou détruisant les pixels voisins le long des bords du pixel érodé , tout en conservant le contour à la frontière de ce pixel. La valeur par laquelle le pixel se dilate, ou le nombre de pixels voisins utilisés pour «étirer» ou «développer» le pixel, est déterminée par le paramètre de rayon .

<feMorphology in=".." result=".." operator="dilate || erode" radius=""> </feMorphology> 

Le rayon de morphing peut être représenté comme le rayon d'un cercle ou d'une ellipse. Tous les pixels voisins enfermés dans un cercle de ce rayon, à partir du pixel d'entrée, sont considérés comme une seule communauté de pixels et seront utilisés dans l'effet d'expansion ou d'érosion.

Cependant, en fait, le rayon caractérise en fait la taille du noyau, appelé l'élément structurant, qui ressemble plus à une matrice. Pour l'instant, il suffit de le représenter comme un petit rectangle dont la largeur et la hauteur sont spécifiées par les pixels spécifiés dans l'attribut radius .

Pour utiliser un filtre, nous n'avons pas besoin d'aller dans les petites choses fastidieuses que le morphing fait au niveau des pixels. Il suffit de savoir que vous pouvez fournir une ou deux valeurs de rayon dans feMorphology , qui détermineront la quantité de compression ou de développement de l'élément. Si deux nombres sont spécifiés dans l'attribut radius , le premier correspondra au rayon x et le second au rayon y.

Morph image

Si l'opération feMorphology est appliquée aux images, alors deux, en règle générale, des résultats prévisibles suivront:

• La taille de l'image diminue si l'opérateur d' érosion est utilisé ou augmente si l'opérateur de dilatation est utilisé .
• Avec n'importe quel opérateur, l'image semble avoir été peinte avec un grand pinceau, avec une petite quantité de petits détails.

Ainsi, afin d'appliquer l'effet de morphing à l'image, notre code devrait ressembler à ceci:

 <svg width="450" height="300" viewBox="0 0 450 300"> <filter id="erode"> <feMorphology operator="erode" radius="3"></feMorphology> </filter> <image xlink:href="..." width="90%" height="90%" x="10" y="10" filter="url(#erode)"></image> </svg> 

Dans ce fragment, nous floutons (compressons) l'image (en pixels) de 3 pixels. La figure suivante montre le résultat de ce code. Notez que la taille de l'image à droite est légèrement plus petite:

Fig_2. A droite, le résultat de l'application de l'effet de flou du morphing à l'image de gauche.

Maintenant, si nous gardons le même rayon de morphing et changeons l'opérateur d' érode en dilaté , l'effet sera similaire, mais aussi distinctement différent:

Fig_3. A droite, résultat de l'application de l'opération de morphing dilaté à l'image de gauche.

Dans les deux cas, l'image ressemble à une version abstraite peinte d'elle-même, et sa taille globale change à mesure que les pixels se dilatent ou se contractent.

Mais en plus de ces résultats, la première chose que vous remarquerez probablement est la différence de couleur qui résulte de chacun de ces deux effets: éroder crée une image avec beaucoup de pixels sombres, tandis que dilate éclaircit le résultat. Cela est dû au fait que:

• erode (cette valeur est utilisée par défaut) définit pour chaque pixel la luminosité la plus faible ou l'opacité la plus élevée de sa communauté, respectivement, pour chacun des canaux R, G, B et A;
• dilate définit pour chaque canal de chaque pixel les valeurs correspondant à la valeur la plus lumineuse ou la moins transparente de sa communauté.

En mettant de côté les détails techniques, appliquer la feMorphologie aux images aura presque toujours le même résultat: compresser ou étirer de petites parties d'une image comme copie d'une image avec un contour principal sombre ou clair.

Cependant, appliquer la feMorphologie à des éléments monochromes, tels que du texte, ne fait que le compresser ou l'étirer sans apporter de modifications notables de la couleur des pixels, car nous n'avons toujours qu'une seule couleur à utiliser ...

Ajouter un contour de couleur au texte avec feMorphology

Nous pouvons maintenant ajouter un contour au texte dans le SVG en utilisant l'attribut stroke pour ce texte.

 <!-- Adding an outline to SVG text using strokes --> <text font-size="80px" dx="100" dy="200" font-weight="700" stroke="deepPink" stroke-width="3px">Stroked Text</text> 

L'ajout d'un tracé qui est généralement centré sur les bords du texte afin que la moitié de son épaisseur soit chevauchée par le texte lui-même rend le texte plus fin, même s'il n'était pas prévu. Au lieu de cela, nous pouvons dilater le texte à l'épaisseur du contour ou du trait à l'aide de feMorphology .

Sauf indication contraire, le texte a généralement une seule couleur. Ainsi, appliquée au texte, feMorphology vous permet de réduire ou d'augmenter l'épaisseur du texte. Une fois que le texte a été développé avec feMorphology , il peut être utilisé comme entrée pour d'autres primitives de filtre pour créer un contour de texte, ce dont nous avions besoin.

Avant de découvrir comment procéder, jetez un œil au graphique montrant la différence entre le texte avec le contour encerclé et le contour ajouté avec feMorphology .

Fig_4. Comparaison du texte source avec le texte avec un trait et le contour créé à l'aide de feMorphology .

Veuillez noter que le texte source sur la deuxième ligne est devenu plus mince après l'ajout d'un contour lisse, par rapport au texte de la troisième ligne, développé avec feMorphology .

Alors, créons pas à pas un fragment de texte coloré avec un contour. Voici le résultat que nous viserons:

Fig_5. Le résultat final.

Nous allons donc créer un SVG contenant notre texte et un filtre qui lance une opération d'extension simple. La taille de l'extension de texte dépend de l'épaisseur du contour que nous voulons obtenir.

 <svg width="900" height="200" viewBox="100 0 900 200"> <filter id="outline"> <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="4"></feMorphology> </filter> <!-- DILATED TEXT --> <text font-size="85px" dx="125" dy="130" font-weight="700" filter="url(#outline)">upgrade yourself</text> </svg> 

Le code ci-dessus obtiendra le canal alpha du texte, qui n'est qu'une version noire du texte, et augmentera l'épaisseur de la police de 4 pixels. Le résultat du code à ce stade est le suivant:

Fig_6. Texte après épaississement.

... par rapport au texte source, qui a une couleur de remplissage bleu foncé:

Fig_7. Texte source.

Pour créer un effet de contour, nous superposons le texte source au-dessus du texte développé, ne laissant que les bords du texte développé (nos 4 pixels supplémentaires) visibles autour du texte source, en les faisant ressembler à un chemin. La superposition de texte sur son contour (texte étendu) se fera à l'aide de feMerge . Comment cela est fait, nous avons examiné dans un article précédent .

Ce que nous devons faire d'autre avant de placer le contour autour du texte est de colorer le contour lui-même. Tout comme nous l'avons fait dans l'article précédent, remplissez la zone de filtre avec la couleur souhaitée, puis ajoutez le calque de couleur avec le calque de texte déjà développé, c'est-à-dire notre circuit en utilisant l'opérateur in . Par conséquent, seules les parties du remplissage de couleur qui se croisent avec le texte développé seront affichées, le colorant ainsi. Ensuite, nous combinons le contour de couleur résultant avec le texte source pour obtenir le résultat souhaité.

Maintenant, notre code ressemble à ceci:

 <svg width="900" height="200" viewBox="100 0 900 200"> <filter id="outline"> <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="4"></feMorphology> <feFlood flood-color="#32DFEC" flood-opacity="1" result="PINK"></feFlood> <feComposite in="PINK" in2="DILATED" operator="in" result="OUTLINE"></feComposite> <feMerge> <feMergeNode in="OUTLINE" /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> <!-- DILATED TEXT --> <text font-size="85px" dx="125" dy="130" font-weight="700" filter="url(#outline)">upgrade yourself</text> </svg> 

Le processus de création d'effets de filtrage en SVG consiste à représenter le résultat final sous la forme de petites opérations séquentielles, en utilisant le résultat d'une opération en entrée d'une autre et, enfin, en combinant toutes les couches créées par elles pour obtenir le résultat final.

Et voici la démo du code ci-dessus:

La couleur de remplissage du texte peut être spécifiée dans votre CSS ou dans l'élément de texte à l'aide de l'attribut fill . La couleur du contour peut être définie dans l'attribut flood-color de la primitive feFlood .

Super! Et si vous voulez changer la couleur du contour? Vous devrez réutiliser la primitive feFlood et combiner le remplissage de couleur avec le contour. Et chaque fois que vous voulez changer la couleur du contour, vous devez faire la même chose encore et encore. Certes, cela est trop fatigant. Heureusement, il existe un moyen plus simple.

Supprimer le texte

En plus d'ajouter un contour au texte, nous pouvons également créer un contour, c'est-à-dire texte en relief, ce qui signifie que l'intérieur du texte sera «découpé» afin que vous puissiez voir l'arrière-plan derrière lui à travers le contour. Un exemple d'un tel effet peut ressembler à du texte sur le prochain GIF, qui montre un changement dans la couleur d'arrière-plan, et comment cet arrière-plan peut être vu à l'intérieur de notre texte. Voici la démo que nous allons créer dans cette section:

Fig_8. Un exemple de texte en relief.

Cet effet est plus facile à créer et le code nécessaire pour l'exécuter est sensiblement plus court. La principale différence ici est qu'au lieu de superposer le texte source au-dessus du texte développé, nous utiliserons le même texte source pour découper les parties internes du texte développé. Cela signifie que seule l'épaisseur ajoutée du texte développé restera et que la partie intérieure sera supprimée, nous laissant ainsi uniquement le contour.

Si au lieu de capturer et d'agrandir le canal Alpha du texte (qui est noir par défaut), vous capturez le texte source lui-même (qui peut avoir n'importe quelle couleur de remplissage!), Développez-le, puis utilisez à nouveau le texte pour découper l'intérieur du texte développé, vous obtiendrez un contour, qui vient du code source lui-même. Cela signifie que la couleur de ce chemin correspondra toujours à la couleur du texte source. Et comme nous pouvons déterminer la couleur de remplissage du texte source en CSS, cela signifie que vous avez un contour de texte distinct de ses styles. (Vive la séparation des soucis!) Ensuite, vous pouvez appliquer ce filtre à n'importe quel morceau de texte et changer la couleur de ce texte en CSS à tout moment, sans avoir besoin de configurer le code du filtre. Notre code amélioré ressemble maintenant à ceci:

 <svg width="900" height="450" viewBox="0 0 900 450"> <filter id="outliner"> <!-- Start by grabbing the alpha channel of the text and dilating it--> <feMorphology operator="dilate" radius="8" in="SourceAlpha" result="THICKNESS" /> <!-- Next, grab the original text (SourceGraphic) and use it to cut out the inside of the dilated text --> <feComposite operator="out" in="THICKNESS" in2="SourceGraphic"></feComposite> </filter> <text dx="100" dy="300" filter="url(#outliner)" letter-spacing="10px">SVG Rocks</text> </svg> 

En utilisant une bonne police, notre démo ressemble maintenant à ceci:

Fig_9. Le résultat de notre travail.

Dans notre feuille de style, nous pouvons choisir la couleur du contour ainsi que la couleur de fond du SVG. Vous pouvez également sélectionner l'image par texte à l'intérieur du SVG. Dans le code ci-dessous, j'utilise des animations CSS sans raison de changer la couleur de fond, sauf que c'est beau.

 svg text { font-family: 'Bangers', cursive; font-size: 150px; letter-spacing: 13px; fill: #000; /* This fill color determines the color of the outline */ } svg { background-color: gold; animation: colorsssss 2s linear infinite; animation-delay: 3s; } @keyframes colorsssss { 50% { background-color: deepPink; } } 

Le filtre SVG ci-dessus est réutilisable via SVG tout comme HTML. Si vous souhaitez l'appliquer à un élément HTML, vous pouvez le faire en utilisant la propriété filter ; il suffit de mettre le filtre en HTML et de «l'appeler» en CSS:

 h2 { filter: url(#outliner); /* You can change the color of the outline here by changing the color of the heading */ color: deepPink; } 

Et notre démo terminée, qui comprend un en-tête HTML avec un filtre qui lui est appliqué:

Ma chose préférée à propos de cette recette de filtre est qu'elle peut être utilisée comme amélioration visuelle. Si le navigateur ne prend pas en charge les filtres SVG, s'il ne prend pas en charge les filtres CSS ou s'il ne prend pas en charge l'application de filtres SVG aux éléments HTML, l'utilisateur recevra le texte source sans contours et l'effet translucide lui sera appliqué. Oh, et la cerise sur le gâteau sur le dessus? Les textes SVG et HTML seront entièrement consultables et modifiables. Hourra l'amélioration progressive! Vive le SVG!

Conclusion

En utilisant seulement deux opérations de filtrage dans SVG, vous pouvez appliquer l'effet du texte sélectionné au contenu textuel de SVG ou HTML. Mettez ce filtre en HTML et utilisez-le quand vous en avez besoin.

Dans le prochain article de cette série, nous examinerons feComponentTransfer , l'une de mes primitives de filtre préférées, et verrons comment cela fonctionne et quels effets nous pouvons créer avec. Reste avec nous.