Un article sur la rénovation d'appartements , sur l'utilisation efficace des ressources graphiques des appareils modernes. Des montres intelligentes aux téléviseurs au mur.
L'histoire de la façon d'insérer des images répétitives d'arrière-plan dans la page, pour que tout le monde aille bien.
Eh bien, ĂŞtes-vous prĂŞt Ă jouer ..? Alors conduit
Introduction
Il y avait une tâche pour créer une page de site avec une image répétitive.
Comment allons-nous décider?
Niveau 1 Trite primitive
La façon la plus simple pour un grand nombre de typographes de l'utiliser est de récupérer l'image d'arrière-plan en une seule fois (le plus souvent au format png, car elle est définie par défaut dans Figma et Avocode) et de la floper sur le bloc via background-image;
(* bien, tu n'es pas comme ça, mon jeune lecteur?)
body { background: url('bg.png') 50% 50% no-repeat; background-size:contain; }
Si le développeur est un peu plus expérimenté et sait que jpg est compressé, en règle générale, mieux que png, l'arrière-plan sera au format jpg.
Niveau 2 je me fiche de la performance
Si le concepteur de mise en page ne se soucie pas des performances de la page développée et qu'il sait qu'à cet endroit, vous pouvez économiser considérablement le trafic des utilisateurs, il peut isoler le motif (la partie répétée de l'arrière-plan) de cette image s'il a de la chance.
Si la mise en page a été implémentée dans PhotoShop, vous devez recadrer. Parce que l'arrière-plan est défini par un élément inséparable là -bas.
Exemple de prise d'un arrière-plan extensible depuis Avocode
Dans Figma, cela est implémenté un peu plus facilement. Bien que cela dépende de la façon dont le concepteur a créé cet arrière-plan pour vous.
* Qui veut jouer, je vais laisser mon exemple en téléchargement.
Dans l'exemple, il existe deux options avec des motifs png et svg, qui seront discutées plus tard.
Ok, maintenant au lieu d'une grande image d'arrière-plan, nous avons un élément de tuile répétitif (CSS Tiling).
body { background: url("bg.jpg"); }
Bravo, bravo. Maintenant, au lieu de (586kB), l'utilisateur prend tout du serveur (~ 24kB); Profit!
Niveau 3 je vais vous serrer au maximum
Réfléchissons, est-il possible d’améliorer la situation d’une manière ou d’une autre? Hmm, mais l'image n'est pas compliquée, peut-être pouvez-vous la dépasser dans un vecteur?
Et puis le démon de la tentation s'est caché.
Visant le meilleur, nous gâchons souvent le bon William Shakespeare
Lorsque cela n'est pas fait de manière rationnelle, ou pas du tout:
- Vous avez un motif répétitif complexe. Il faudra n heures pour le redessiner, et si vous stressez également le concepteur par cette tâche, votre karma diminuera certainement.
- Il y a des ombres ou des éléments flous dans l'image et vous n'acceptez pas de les refuser.
* Ici il faut expliquer
Si vous exportez des graphiques SVG, supposons à partir de Figma ou Illustrator, mais ne le codez pas vous-même dans l'éditeur, alors les éléments de flou ou d'ombre seront probablement insérés dans SVG au format base64 et cela n'améliorera en rien vos performances, car un tel fichier, en fait, peut peser plus que le format jpg analogique.
Vérifiez toujours ce qui vous est proposé. Bien sûr, certains de ces éléments peuvent également être créés avec du code en utilisant le filtre de balises, l'utilisation, l'objet ... mais pour travailler avec eux, vous avez besoin d'une compétence pompée, ce qui est rare.
Ok, créons un SVG et voyons ce qui se passe.
* Pour des raisons de pureté de l'expérience, les images présentées n'ont pas été compressées par des utilitaires tiers et enregistrées en qualité 100% à l'aide de PhotoShop, Illustrator et Avocode.
Ok, notre svg est inférieur à jpg / png de la version originale.
Cela n'est pas surprenant, car nous n'y avons laissé que les couleurs de base que nous avons vues, et non celles qui apparaissent à la jonction des objets avec du flou.
La différence entre les tailles des fichiers png / jpg ne semble pas très significative, et elle ne commence à jouer un rôle que si l'image est grande.
* Je préfère le png et définissez la couleur d'arrière-plan sur la propriété background-color, mais cela vient de la tâche.
J'étais un peu confus que le png / jpg résultant créé à partir de svg était plus petit que SVG (même effacé des ordures du système (pattern-bg_cleared.svg) en utilisant SVGO )
Mais ensuite, il m'est apparu que si je voulais réduire / augmenter la taille de la tuile d'arrière-plan pour les mobiles ou les téléviseurs, cela nécessiterait de connecter de nouveaux modèles (pattern-bg_min) et SVG resterait le même (15 Ko - toujours), et il n'y a pas de flou observé
C'est un avantage considérable, surtout si l'utilisateur consulte la page à partir d'un téléphone coûteux avec une bonne résolution, et que le concepteur de la mise en page, en faveur de Google Page Speed, a piqué tous les graphiques avant l'apparition des chacals. Ici, c'est économiser =)
body { background-image: url(picture.svg); }
Cela semble assez familier.
D'accord, compliquez. Supposons les styles que le corps inclura dans le CSS critique, puis rendons le vecteur directement dans les styles. * Afin de ne pas salir la page, je vais prendre un motif différent, un plus petit.
body { background: url:(' <svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 16A8 8 0 108 0a8 8 0 000 16zm0-2A6 6 0 108 2a6 6 0 000 12zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="#000" fill-rule="evenodd"/></svg>'); }
Il y avait beaucoup de CSS et cela a cessé de fonctionner.
Donc, maintenant, il est nécessaire de coder correctement tout cela. L'insertion SVG non chiffrée n'est prise en charge que par les navigateurs Webkit. Merci, Julia Bukhvalova, pour une ressource de codage utile qui nous aidera avec cela.
body { background-color: #DFDBE5; background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"); }
Exemples d'illustration, Comment SVG peut être compressé en CSS.
Le curseur est SVG
Tout semble aller bien, mais je suis sûr que je vais utiliser ce modèle sur toutes les pages de mon site? Il doit sûrement être inséré dans un CSS critique, ou peut-être sera-t-il plus correct dans le CSS habituel - plug-in et espère que le navigateur le cache? Peut-être tout de même, vous ne pouvez le connecter que pour certaines pages? Quelqu'un intelligent a dit que le code placé en HTML est collecté par le navigateur plus rapidement et a une priorité plus élevée en termes de vitesse de rendu. Tant de questions ... vous devez essayer.
Niveau 4, je te soutirerai tous les jus
Tout d'abord, nous allons créer un élément svg qui aura une hauteur et une largeur de 100% de l'unité extérieure afin qu'il occupe tout conteneur dans lequel nous l'avons placé.
<svg width="100%" height="100%"> </svg>
Pour créer un motif, nous devons le mettre dans la balise svg defs (definition), par exemple comme ceci:
<svg width="100%" height="100%"> <defs> <pattern> </pattern> </defs> </svg>
Déjà pas mal, alors vous devez ajouter des attributs à l'aide desquels nous pouvons interagir avec le modèle et l'appeler d'une manière ou d'une autre.
<svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> </pattern> </defs> </svg>
Nous lui donnerons un identifiant afin qu'il puisse être référencé plus tard, nous indiquerons également les coordonnées de départ de la référence X et Y, dont nous définissons la largeur et la hauteur dans l'éditeur graphique, définissons la portée de la ViewBox (vous pouvez le prendre à partir du svg fini)
... et définissez l'attribut patternUnits sur userSpaceOnUse (cela définit un système de coordonnées, dont vous pouvez en savoir plus sur MDN )
En bref, avec patternUnits = ”userSpaceOnUse”, la forme sur la toile SVG est complètement remplie de tuiles de motif. Si la dernière tuile ne tient pas entièrement en longueur ou en largeur, elle est coupée.
Maintenant, nous devons décider de l'image qui sera répétée
<svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"> </circle> </pattern> </defs> </svg>
Tout est presque prêt, il reste à appeler notre motif sur un certain objet, eh bien, par exemple, créer une zone rectangulaire pour le remplissage.
<svg width="100%" height="100%"> <defs> < pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect> </svg>
Vous pouvez voir que l'attribut fill (qui contient généralement la couleur de remplissage pointe maintenant vers une URL contenant l'identifiant de notre modèle nouvellement défini: fill = "url (# pattern-bg)".
Notre motif répété occupe tout l'espace en largeur, mais j'aimerais aussi qu'en hauteur tout prenne. Pour ce faire, enveloppez notre svg avec une hauteur: 100vh;
<div style="height: 100vh"> <svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect> </svg> </div>
maintenant c'est bon. Bien sûr, dans la balise, vous devez essayer d'insérer vos images les plus sérieuses, mais je vous ai indiqué la bonne direction.
Cette méthode d'insertion, contrairement à la méthode en arrière-plan, vous permet de contrôler le détail des éléments SVG. Il y a une certaine liberté de ce qu'il faut donner à l'utilisateur et de ce qui ne l'est pas. Et s'il y a un désir d'expérimenter et d'ajouter un peu de JS, vous pouvez également réaliser un morphing (changer de forme).
Parmi les problèmes de cette méthode d'insertion d'une tuile répétitive, j'ai trouvé qu'il n'y avait aucun moyen (enfin, ou je ne pouvais pas le trouver, et ceux qui savent écrire dans les commentaires) comment changer la taille de la tuile lors du changement de la taille de l'écran du navigateur. En fait, les attributs largeur / hauteur de la balise pattern sont responsables de cela, mais je ne pouvais pas les atteindre via CSS et les médias. Eh bien, il y a toujours JS si vous en avez vraiment besoin
Cheats je ne connais pas les graphismes, mais je veux toucher la belle
Si pour une raison quelconque, vous ne savez pas comment dessiner un élément répétitif d'un motif dans un éditeur graphique, ou si vous n'avez pas le temps pour cela. Voici des sites avec des solutions toutes faites dans lesquelles de bonnes personnes partagent de bonnes choses avec le monde.
* un petit supplément (où est-il sans porno de nos jours)
https://svgporn.com/
Support d'Ă©quipe Quoi de neuf avec le support?
Au début de l'article, j'ai écrit que tout le monde ira bien, je l'avoue, c'était un canular.
Les utilisateurs d' IE de vos efforts ne verront pas le support de cette balise sur IE et ne sont pas venus et ne viendront pas, mais sinon avec SVG tout n'est pas si mal, mĂŞme jusqu'Ă 9 IE caniuse.com
Je recommanderais également de vérifier le travail terminé dans Firefox, parfois il y a des incidents.
Pour que les fans lisent la documentation, laissez Ă©galement quelques liens
https://developer.mozilla.org/en/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/patternhttps://developer.mozilla.org/en/docs/Web/SVG/Tutorial/PatternsPour ceux qui passent jusqu'au bout, je vais laisser mon exemple de la façon de s'amuser avec le SVG intégré, du début de l'article
Améliorons le Web.PS Remerciements particuliers à Alexandr_TT et son site https://svg-art.ru/ pour la promotion de SVG sur le vaste Internet russophone