Transcription
1. Introduction: Apprendre à utiliser
un SVG optimisé est une compétence importante pour tout
concepteur ou développeur. Dans ce mini-cours, qui
ne comporte qu'une leçon, nous
allons partir d'une photo prise avec
un téléphone normal. Nous allons
optimiser cette image. Nous allons le convertir
en SVG. Nous allons ensuite optimiser ce SVG pour le
préparer pour le Web, puis créer un composant
React SVG. Et puis en prime, nous ajouterons un
hook React personnalisé pour animer l'
arrière-plan de ce SVG. Et pendant tout ce temps, React
utilisera TypeScript. C'était vraiment
amusant d'enregistrer ce mini-cours. J'espère que tu as beaucoup appris.
Commençons maintenant.
2. Comment convertir les photos en SVG optimisé, prêt pour le Web et le port pour réagir TypeScript: J'ai pensé que ce serait cool de mettre ce
logo vraiment cool au dos
ici et sur le devant à peu près à l'occasion du sixième anniversaire. Mais ce serait cool de le
transformer en SVG. Et en prime,
j'ajouterai un hook
React personnalisé pour changer, à
terme, cette couleur de
fond rose. Ainsi, au fur et à mesure que nous déplaçons la souris, nous allons changer la couleur
d'arrière-plan. Je vais donc vous en montrer le flux complet. J'ai pris une photo du
devant et du dos de la chemise. Alors oui, passons au
code et commençons à l'examiner. Comme je l'ai dit, j'ai déjà pris une photo du
devant et du dos de la chemise juste avec un appareil photo iPhone normal
et rien de spécial. La première chose que
nous allons faire pour créer
notre SVG
basé sur React est d'ouvrir
ces deux images dans GIMP. Je vais donc sélectionner les deux. Et nous allons les
ouvrir dans GIMP ici. Maintenant que nous avons
les deux images ici, la première chose à
faire est de les faire pivoter. Nous descendons donc à Transform, faisons une
rotation de 90 degrés. Et aussi pour le dos de la
chemise, faites pivoter à 90 degrés. Ensuite, je vais
passer à l'index du mode image. Et je vais convertir
cela en une image en trois couleurs. Nous avons donc le noir, bleu
clair et cette couleur rose
vif. J'espère donc que Gimp
fera du bon travail pour nous. Voyons comment ça
se passe. Génial. Il a donc plus ou moins
fait du bon travail. Je vais également
faire de même ici. Et dans ce cas, nous n'avons pas trois couleurs, mais nous avons 12345, je suppose. Je crois qu'ils sont
de la même couleur. Essayons donc d'indexer avec cinq couleurs et
voyons ce qui se passe. Très bien, donc ça
a l'air plutôt bien. La prochaine chose que nous allons
faire est d'exporter ces images. Je vais juste dire que
cette chemise est propre. Assurez-vous que la
qualité est réglée à 100 %. Et pareil pour la façade ici. Et j'appellerai ça de la même façon. Chemise propre. Nous avons 100 % de qualité
et nous les exporterons. Ensuite,
nous allons ouvrir Inkscape. Maintenant qu'
Inkscape est ouvert, nous allons importer
ces deux photos nettoyées. J'ai les deux
ici, vous pouvez sélectionner les deux avec Commande et cliquer. Et nous allons
les ouvrir. Maintenant, Inkscape va vous demander ici quelques réglages que nous souhaitons fluides
pour optimiser la qualité. L'intégration est correcte et à partir d'un fichier. Donc, assurez-vous que la seule chose importante ici est la fluidité, car nous
voulons que la meilleure qualité d'image soit importante. Inkscape ouvrira donc
par défaut ces deux images distinctes. Nous pouvons prendre le recto ici, et je vais juste le recopier
au verso. L'avant se trouve à l'
arrière, côte à côte. Ce sont toujours des images
bitmap, et c'est là
que la magie intervient. Comme nous l'avons dit, il s'agit
d'une image en trois couleurs, et voici une image en cinq couleurs. Faisons donc d'abord les
trois couleurs. Une fois que vous avez sélectionné
votre bitmap. Je vais monter
ici, Trace Bitmap. Et nous voulons effectuer
plusieurs scans. Et au lieu d'utiliser des niveaux
de luminosité, nous n'utiliserons pas de couleurs. Ensuite, nous voulons trois
scans, un par couleur. En général, je supprime toutes
ces optimisations, mais votre kilométrage peut varier. Ce qui est bien, c'est que vous
pouvez continuellement les mettre
à jour et décider si vous souhaitez et décider si vous souhaitez
modifier ces valeurs. Parfois, le lissage permet
d'obtenir des bords plus lisses, mais il semblerait que la valeur par défaut ici, sans aucune optimisation ni sélection de lisse, soit plutôt
belle. Je vais donc dire OK. Et vous allez maintenant le voir ici, exactement superposé
au bitmap. Ce n'est pas un bitmap
comme celui-ci l'est toujours, indique l'image ci-dessous. Nous voyons plutôt qu'il s'agit d'un
groupe de trois objets. Cela signifie que la trace
a parfaitement fonctionné. Je vais juste le déplacer
ici et me
débarrasser de l'ancienne image. Maintenant, je vais faire de
même pour le dos de la chemise. Tracez un bitmap. Numérisation multiple. Dans ce cas, nous
avons cinq couleurs. Mettons-le à jour, voyons s'il
reprend toutes les couleurs. Parfait. Ça a l'air génial. Disons, d'accord. Et maintenant, nous voyons que nous avons un
groupe de cinq objets. Je vais donc le déplacer à
nouveau et me débarrasser
de l'ancienne image. Maintenant, nous allons
nettoyer ces images. Donc, pour le devant de la chemise, je n'ai vraiment pas besoin de
ce fond. Je veux juste le lettrage. Donc le bleu et le rose. Donc, la première chose que je
vais faire est de me dissocier. Ce groupe de trois couleurs. En général, la trace
se regroupe automatiquement. Et dans l'ensemble, nous pouvons
simplement dissocier cela. Et nous voyons que nous avons sélectionné
ce chemin obscur ici. Nous allons juste nous en
débarrasser. Il semblerait donc qu'il y
ait eu un artefact
lors de la conversion en GIMP,
mais ce n' est pas un problème non plus. Faites juste attention lorsque
vous sélectionnez ici. Nous ne voulons pas supprimer
la couche entière. Nous voulons simplement
supprimer ce coin. Et comme il s'agit désormais d'un SVG, nous voulons juste récupérer les nœuds
de ce SVG et nous allons supprimer
ce coin. ne nous reste
donc plus que la couche rose. Juste ce joli lettrage. Nous pouvons donc faire de même pour
le dos de la chemise. Je vais dissocier cela. Et ici, il faut être
un peu prudent car si l'on regarde de près la façon
dont la chemise a été imprimée, ce noir n'est pas
une couleur distincte. C'est littéralement l'
arrière-plan de cette image. Nous devrons donc conserver
une partie de cet arrière-plan, mais je vais en quelque sorte le remodeler de
manière à créer un contour
autour de l'ensemble de l'image. Ça va être un peu plus beau. Je crois. La première chose que je vais faire est de me
débarrasser de ce rouge. Je ne sais pas exactement comment c'est
apparu, mais je vais me débarrasser complètement de
cette couche rouge. Nous pouvons donc simplement le supprimer. Et comme je l'ai dit, je vais commencer à remodeler ce fond noir. Nous pouvons donc faire de nombreuses
optimisations ici. Je vais supprimer
la majorité de ces nœuds et nous pourrons
commencer à nettoyer. Maintenant, vous constaterez peut-être qu'à un
moment donné, vous aurez besoin d'un autre nœud. C'est assez facile à résoudre. Assurez-vous simplement qu' au
moins deux nœuds sont
sélectionnés en maintenant la touche Maj enfoncée. Et nous appuyons simplement sur le bouton plus ici
pour insérer un nouveau nœud, il va en avoir besoin de quelques autres. Donc, même s'ils sont
tous les trois sélectionnés, je vais appuyer à nouveau sur le bouton plus et
vous verrez
qu'il en place un
nouveau entre chaque sélection. Cela devrait donc me permettre de
parcourir un bon kilomètre ici. Maintenant, nous allons le récupérer
de haut en haut. Il suffit de le mettre sur le dessus.
Ça a l'air plutôt sympa. Et j'ai remarqué que cette couleur ne se transférait pas
vraiment parfaitement. Je vais juste prendre Aqua. Ça a l'air vraiment sympa. Et je vais également m'
assurer que les sous-titres cet arrière-plan
sont de la même couleur. Juste pour un peu d'unité. Peut copier ce code hexadécimal. Et quand je choisirai ceci ici, pourrai le coller à nouveau. Et ça a l'air plutôt bien. Je veux dire, l'arrière-plan
n'est pas très propre, mais ce n'est bien sûr pas
le but de cette vidéo. C'est pourquoi j'ai passé en revue
un grand nombre de ces trucs. Et bien sûr, comme nous le savons, vous pouvez trouver une infinité de
SVG sur Internet. Parfois, vous commencerez de
toute façon avec un SVG. C'était juste un petit bonus pour vous montrer mon
processus de conversion d'images bitmap en
SVG. Nous avons presque terminé. Je vais sélectionner cette option et
accéder aux propriétés du document. Je vais redimensionner la
page en fonction du contenu. Je vais ajouter quelques marges. 50, c'est probablement très bien. Assurez-vous simplement que
lorsque vous faites cela, vos unités sont exprimées en pixels. Si vous mesurez un pouce ou quelque chose comme ça, vous
aurez d'énormes marges. Mais 50 me semble plutôt correct. Et je pense que c'est
une bonne chose pour nous d'économiser. Je vais donc sélectionner Save As et
je vais juste mettre le design de la chemise. Et bien sûr, avec
l'extension SVG. Maintenant, Inkscape
nous propose des options SVG, l'Inkscape SVG
ou le SVG plan. Et puisque nous nous
dirigeons vers le Web, nous voulons passer au format SVG pur et simple. Inkscape supprimera une
petite partie de son balisage. Ce n'est donc pas si détaillé. Mais comme nous le verrons bientôt, nous allons encore optimiser
le SVG. Je vais donc enregistrer ça. Maintenant, juste pour illustrer ce que
nous allons faire ici, je suis dans mes téléchargements. Il s'agit du SVG que
nous venons d'exporter. Et je vais
ouvrir cela avec Visual Studio Code. Nous pouvons voir qu'il y
a pas mal de déchets par ici. Il s'agit d'un énorme SVG. Ne serait-ce pas formidable s'
il existait un outil capable de
réduire la taille du
SVG que nous venons d'exporter ? Nous pouvons donc l'utiliser facilement
ou plus facilement dans React. Heureusement, il existe un tel
outil pour nous et il s'agit cet outil SVG OMG
de Jake Archibald. Il est hébergé sur l'une
de ses pages GitHub. Je vais donc ouvrir
le SVG que nous venons d'exporter. Et maintenant, l'avantage
de cet outil, c'est que nous pouvons jouer
avec de nombreux paramètres, réduisant ainsi
la taille de notre SVG. En général, ceux qui économisent le plus d'espace
sont ces deux-là, mais vous devez faire attention. Si je commence à réduire
la précision trop bas, vous pourriez commencer à voir des arêtes
étranges, etc. Mais vous pouvez voir qu'en faisant cela, nous sommes déjà descendus à 16 ko. Mais juste pour que ce ne soit pas si grossier, je pense que je vais laisser la précision
numérique à un. Et nous pouvons jouer un peu avec la précision de la
transformation. Je n'ai pas l'air d'y remarquer
quoi que ce soit. Vous pouvez embellir le balisage. Peut effectuer plusieurs passes. Je ne vois pas quelles sont
les différences, mais nous économisons un peu. Nous allons donc prendre ça. Et immédiatement, nous pouvons
simplement appuyer sur Copier ici, et ce SVG est copié
dans notre presse-papiers. Maintenant, je suis dans le sandbox du code
et nous allons créer un sandbox. Et bien sûr, réagissez
avec TypeScript. Et la première chose que nous
allons faire ici est de créer un nouveau dossier appelé components. Et je vais
créer un nouveau composant appelé SVG qui est un fichier TSX. Et ce n'est qu'un composant
fonctionnel. Maintenant, nous pouvons essayer de simplement coller le
SVG que nous venons de copier. Et si je nettoie ça, nous allons
avoir quelques problèmes. Et essentiellement, le
problème est que puisque le SVG est du XML original, il n'est pas exactement prêt pour le JSX. Heureusement, il existe un autre
outil que nous pouvons utiliser pour cela. Et cet outil est Magic
Dot React js.net. Nous pouvons donc simplement coller
notre SVG et le générateur
générera pour nous une syntaxe JSX
valide. Maintenant, pour une raison quelconque,
il décide toujours de créer un composant de classe. Mais bien sûr, nous n'avons besoin que du balisage contenu dans la déclaration de
retour. Donc, si je fais défiler
la page jusqu'en bas, nous aurons tout ce dont
nous avons besoin et nous pourrons retourner dans notre bac à sable
et réessayer. Maintenant, nous ne devrions pas avoir
d' avertissement de syntaxe lorsque
je mets en forme le document. Parfait, donc je vais enregistrer le composant SVG de
ce t-shirt, et je vais nettoyer
le composant de l'application ici. Disons que React plus SVG plus
TypeScript est égal à cœur. Et je vais ajouter
mon composant SVG. Je vais l'importer
depuis les adversaires, au format SVG. Donc ça a déjà l'
air plutôt bien. Et comme je l'ai mentionné, nous utiliserions un crochet personnalisé pour un crochet personnalisé pour
changer cette couleur
d'
arrière-plan lorsque
nous déplaçons la
souris sur l'écran, changer cette couleur
d'
arrière-plan lorsque
nous pour la rendre un
peu amusante. Et je pense aussi que ce
serait vraiment cool de changer ces deux couleurs. Nous devons donc d'abord
revenir dans notre SVG, identifier quel chemin ou quels chemins y
contribuent. Ensuite, nous utiliserons
le crochet pour changer la couleur en fonction de
la position de la souris. Alors d'abord, montons ici. Et si nous regardons le
premier chemin répertorié, nous avons cette couleur. OK, c'est la, cette couleur beige
clair. Ensuite, nous avons cette couleur FC. Bingo, nous avons trouvé notre couleur. Maintenant, si je cherche
ça, oui, exactement. Je devrais le voir deux fois. Et c'est la couleur que nous voulons changer au
fur et à mesure que la souris se déplace. La première chose que je
vais faire, c'est qu'au lieu de garder cela codé
en dur sous forme de chaîne, je vais le remplacer par une
variable appelée simplement color. Et bien sûr, Code
Sandbox va nous
crier dessus parce que nous ne l'avons pas encore
défini. Donc là-haut, je
vais dire couleur. Et appelons ce hook, qui n'a pas encore été défini
et qui n'a pas encore été implémenté. Disons que c'est un peu comme
utiliser la couleur sur la souris. Déplacez-vous. Maintenant, il faut réellement
implémenter ce hook. J'aime garder mon
code organisé. Je place généralement mes crochets dans
un dossier de crochets séparé. Nous pouvons l'appeler du même nom, utiliser la couleur au déplacement de la souris
et exporter les const, utiliser la couleur au déplacement de la souris. Et pour l'instant, revenons
au rouge. Nous pouvons déjà vérifier si tous
les points sont correctement connectés. Je vais donc importer, utiliser la couleur lors des
déplacements de la souris à partir des crochets. C'est un dossier de retour. Utilisez la couleur lorsque vous déplacez la souris. Sympa. Nous sommes donc à mi-chemin. Nous avons sélectionné la bonne
couleur que nous voulons modifier. Et maintenant, c'est juste l'animation
réelle lorsque nous déplaçons la souris pour
changer cette couleur. Nous pouvons donc ajouter la définition du
type de retour et indiquer que nous voulons toujours que la chaîne soit renvoyée par ce hook. Et bien sûr, étant donné que la couleur elle-même
changera lorsque vous déplacez la souris, nous allons utiliser
l'état d'utilisation pour définir notre couleur. Nous avons donc une couleur constante, couleur
définie, et c'
est l'état utilisé. Et je vais continuer à utiliser le
rouge ici comme valeur initiale. Et nous devons l'importer
depuis React. Bien, tout
va toujours bien. Maintenant, pour
commencer à écouter le mouvement de la souris, c'est une fenêtre. Ajoutez un écouteur d'événements. Et l'événement est un mouvement de souris. Et je vais définir
une fonction de déplacement de la souris. Maintenant, dans React, ce n'est pas une bonne pratique de simplement
définir cela ouvertement. Nous devrions faire un nettoyage de démontage
et de démontage. Je vais donc le mettre dans un hook à effet utilisateur
qui se trouve sur Mount. Avec un tableau de dépendances vide. J'ajouterais cet auditeur d'événements. Et la
fonction de nettoyage, comme nous le savons, consiste à renvoyer une
fonction depuis US Effect. Et ce serait Window
Dot, supprimez Event Listener. Maintenant fluide et en mouvement de la souris. Nous allons maintenant définir cette fonction de déplacement de la
souris. Et si nous examinons cet écouteur d'
événements d'ajout pour le mouvement de la souris, nous voyons que nous obtenons un événement souris. Cela serait donc transmis
dans cette fonction. Et comme notre image occupe une
grande partie de l'écran, je ne pense pas qu'il soit trop naïf, comme implémentation initiale, de prendre toutes
les dimensions de
l'écran et de les baser sur une sorte de
pourcentage de l'endroit où nous en sommes actuellement avec notre souris. Ainsi, par exemple, le pourcentage x de l'emplacement de notre
souris sera le client x divisé par la largeur
intérieure de l'écran. Et pareil pour pourquoi la fenêtre. Et puis peut-être en pourcentage
moyen, nous pouvons additionner les 2 % x
plus y, divisés par deux. Nous avons maintenant
une sorte de pourcentage. Et ce qui me vient immédiatement à
l'esprit, c'est que nous pouvons avoir
une sorte de mélange de couleurs. Donc, la chose la plus simple à l'heure
actuelle
serait peut-être deux couleurs. Et avec ce cadeau, il y a une sorte de
mélange entre eux. Vous pouvez essayer d'écrire votre propre fonction pour
ce faire avec deux couleurs. Mais pour ma part, je vais utiliser une dépendance très populaire pour
faire ce genre de choses. Et c'est ce qu'on appelle les chromosomes AS. Et avec chroma js, nous pouvons importer Kromer depuis un JS et définir une échelle à l'aide de la fonction d'
échelle de Chrome. C'est donc une gamme chromatique. Et nous pouvons transmettre une
ou plusieurs couleurs. Pour l'instant, je pense que
je vais faire quelque chose. Essayons le rose et le violet. Et je vais également
changer cette couleur
initiale en rose, afin qu'elle soit plus proche de ce que nous avions à
l'origine et du design. Maintenant, avec cette échelle se
mélange entre
les deux, avec une décimale, qui se
mélange entre
les deux, avec une décimale, c'est exactement
ce que cela signifiera avec
cet objet d'échelle. C'est aussi simple que d'appeler. Échelle moyenne. Et puis obtenir un hexagone. Je vais donc appeler cette couleur. Ensuite, bien sûr, réglez la
couleur sur l'état, qui déclenchera l'exécution de ce
hook puis,
bien sûr, renverra la nouvelle couleur. Et la dernière chose
à nettoyer ici, c'est qu'il semblerait que code sandbox se plaint ou plutôt
TypeScript se plaint. Impossible de trouver les types de chroma JS. Ajoutons donc également les
types pour Chroma JS. Maintenant, nous pouvons nettoyer tout cela et
retrouvons l'application. Découvrez notre travail manuel ici. C'est très cool. Ainsi, lorsque nous déplaçons la souris, elle passe du rose au violet. Et grâce à cet algorithme nous avons défini ici, bien entendu,
le total de 0 % est égal à 0 % lorsque x
et y sont égaux
à zéro, cela vous rapprochera le plus possible du rose. Et lorsque x et y sont proches de la
hauteur intérieure ou de la largeur intérieure, cela vous donnera la valeur la
plus proche du violet. Donc, comme dernière
cerise sur le gâteau, nous allons revenir à
notre SVG et corriger. Il semblerait qu'il y ait
quelques petits problèmes frontaliers que nous pourrions régler. Et nous pouvons y
remédier simplement en ajoutant une petite largeur de trait à notre SVG noir ici.
Donc je vais juste le faire. Ce chemin noir du SVG est en fait celui-ci
avec cette couleur foncée. Nous voyons donc que la première
chose qui manque, c' est la couleur du
trait elle-même,
qui, en langage SVG, est simplement
désignée par un trait. Et je vais
faire le trait, bien sûr
de la même couleur. Le remplissage. Sauvegardez-le et actualisez-le ici. Cela a peut-être fait quelque chose, mais augmentons le score
à un et voyons à
quoi cela ressemble. Rechargez ici. C'est presque résolu. Peut-être que si nous en passons à deux, cela nous
suffira enfin. C'est très agréable. Voyez-le toujours,
voyons à quoi ça ressemble. Si on saute
jusqu'à quatre. Très bien, c'est plutôt
bien. Nous pourrions revenir à Inkscape et corriger ces
deux petits conseils ici, mais je suis plutôt
satisfait de la façon dont cela est sorti. Petit projet sympa et amusant que nous avons fait. J'espère que vous avez appris
quelque chose sur le fait transformer
des bitmaps en SVG et de les
transformer en SVG plus propres. C'était vraiment amusant pour moi. Et oui, faites-moi savoir si
vous souhaitez plus de détails sur les astuces et les stratégies pour
créer ces crochets personnalisés. À part ça, je suis
super contente d'être de retour et je vous verrai la
prochaine fois. Prends soin de toi.
Chris Frewin, Full Stack Software Engineer
