Graphiques vectoriels évolutifs - Internet a parcouru un chemin de géant depuis le HTML5 est devenu populaire et les gens ont commencé à regarder Javascript comme un langage capable de développer des applications beaucoup plus complexes. Avec cela, plusieurs Apis ont émergé et il existe un contenu abondant sur la façon dont les navigateurs peuvent tous les gérer avec SVG (Scalable Vector Graphics).
Il y a quelques années, le Microsoft a appliqué une approche de conception différenciée à toutes ses applications et services ainsi qu'à toutes les interfaces utilisateur pour les appareils mobiles. Avec l'avènement de IOS 7, Apple a remplacé ses principes d'apparence et de format, au profit de bonnes pratiques de design épuré et minimaliste. Même ainsi, le lancement que Google a fait du "conception matérielle” qui peut être utilisé n'importe où, des applications au Web.
Au début, le principal avantage de SVG - bien médiatisé sur Internet est son caractère évolutif. Lors de l'assemblage d'une icône, le concepteur n'a pas à se soucier de "comment sera-t-il” dans différentes dimensions ou sur des appareils mobiles avec différentes densités de pixels, et se concentre juste à faire de la ressource de la meilleure façon.
Avec les SVG, il n'est pas nécessaire d'exporter deux formats de fichiers différents basés sur des pixels pour afficher dans mode rétine et pas de rétine. En fait, il n'est pas nécessaire de s'inquiéter de la densité de pixels sur chaque appareil, en particulier compte tenu de sa nature non standard, mais en gardant plutôt l'accent sur l'œuvre d'art.
Une fois l'icône prête, le concepteur l'exporte dans un seul fichier dans le ".SVG», qui peut être redimensionnée par le développeur sans perte de qualité, juste en appliquant des attributs «largeur" et "hauteur» avec leurs valeurs respectives.
Vous pouvez voir un exemple ci-dessous du logo du navigateur Firefox :
upload.wikimedia.org/wikipedia/commons/7/76/Mozilla_Firefox_logo_2013.svg
Cependant, bien que les fichiers générés ".SVG" juste être XML, vous êtes beaucoup plus susceptible d'utiliser un éditeur d'images vectorielles. Les alternatives les plus courantes sont les Adobe Illustrator et paysage d'encre, mais sur macOS nous avons une autre très bonne alternative appelée esquisser.
De plus, SVG fonctionne mieux lorsqu'il n'est pas si complexe. C'est parce que sa taille peut beaucoup augmenter en fonction de ce que vous allez développer : les couleurs unies sont beaucoup plus petites que les dégradés, par exemple. Cependant, cela ne signifie pas que vous ne pouvez pas avoir de graphiques complexes, mais gardez à l'esprit le problème de la taille du fichier si vous envisagez d'utiliser SVG sur une page, par exemple.
Si vous utilisez le logiciel Adobe Illustrator, vous pouvez faire certaines choses pour réduire considérablement cette complexité lors de l'exportation de votre fichier SVG. La première chose à faire est de développer les graphiques, en modifiant les attributs qui définissent son apparence et les autres propriétés des éléments qui s'y trouvent. Cela aidera également avec des choses comme l'opacité et les dégradés.
Un autre aspect important auquel vous devez faire attention est que lors de l'exportation, il y a aussi certaines choses à faire. choisir le profil Svg 1.1, c'est ce que tu as une plus grande compatibilité entre les navigateurs aujourd'hui. les profils SVG Minuscule 1.1 et le reste des variantes SVG sont destinées aux appareils mobiles mais n'ont pas encore de support adéquat.
De plus, si vous n'avez pas besoin de manipuler le texte de manière dynamique, convertissez toutes les polices en objets. Ainsi, le texte conservera les caractéristiques que vous avez définies, sans augmenter la taille finale du fichier, car à toutes fins utiles, les textes ne seront que des objets.
Comme il s'agit d'un fichier texte, le SVG Il a un excellent facteur de compression pour plusieurs segments. un dossier de 30 Ko, par exemple, tombe à 9.6 Ko lorsqu'il est servi avec la technologie GZIP. Si vous utilisez la technique de URI de date, un fichier contenant 13 Ko tombe à 4.9 Ko lorsqu'il est servi avec la technologie de compression GZIP.
J'espère que cela t'aides!
Partagez l'article et laissez vos commentaires ! 🙂
