Share
En tant que concepteur web, il est grand temps de savoir comment implémenter SVG (Scalable Vector Graphics) dans vos sites Web. Voyons maintenant les bases du SVG, ainsi que des conceptions plus complexes telles que des logos ou des icônes..
Récemment, lors de la WWDC 2012, Apple a annoncé la sortie du nouvel écran MacBook Pro à rétine. Les écrans Retina ont une densité de pixels supérieure (220,5ppi) à celle des écrans ou moniteurs normaux et Apple affirme que la densité de pixels de sa technologie Retina est telle que l'œil est incapable de remarquer la pixellisation à une distance de visualisation type. Si vous avez déjà assisté à un affichage de la rétine, je suis sûr que vous serez d'accord pour dire qu'ils ont l'air magnifique. Cependant, ces affichages de rétine peuvent commencer à causer des problèmes pour nous concepteurs Web.
Le problème survient lorsque les images précédemment enregistrées au format 72ppi commencent à apparaître déformées sur les écrans de la rétine. La solution à ce problème n'est toujours pas résolue à 100% et les concepteurs recherchent de nouvelles façons de contourner ce problème..
Une solution possible (dans certains cas) consiste à utiliser SVG. Pourquoi voudriez-vous utiliser SVG? Les SVG sont rendus sous forme de vecteurs et sont donc capables de s’adapter à la résolution de l’écran sur laquelle nous les visionnons, tout en maintenant la netteté et la qualité cristalline que nous souhaitions lorsque nous les avons conçus pour la première fois..
Cela ne résoudra pas tous les problèmes. nous ne sommes pas en mesure d'utiliser SVG pour restituer des images au pixel telles que les .jpg ou les png (toutefois, nous pouvons toujours utiliser la balise canvas). Lorsqu'il s'agit d'éléments tels que des icônes ou des logos illustrés, SVG s'avère extrêmement utile. Aujourd'hui, je vais vous montrer les bases de l'utilisation de SVG et vous montrer comment utiliser les vecteurs que vous avez conçus dans Adobe Illustrator et les implémenter facilement dans vos sites Web..
Avant de vous lancer, je vais vous donner un bref aperçu de SVG:
Commençons simple. Nous allons créer une ligne. Nous faisons cela en ajoutant le code suivant à un document HTML.
Premièrement, nous utilisons la balise 'svg' et ensuite, nous ajoutons le balisage xml. Voici ce que nous définissons:
Ainsi, par exemple, si nous voulions créer une ligne diagonale, nous pourrions définir l'attribut y2 sur 200, ce qui réduirait le point final de la ligne de 200 et créerait donc une ligne diagonale. Nous pouvons également appliquer certains styles à cela et nous le faisons avec CSS. Ici, nous avons utilisé des styles en ligne, mais vous pouvez les utiliser dans une feuille de style externe si vous le souhaitez..
Les cercles peuvent être créés de la même manière qu'une ligne, à l'exception de quelques attributs. Ici, nous allons créer un cercle d’argent, avec une bordure noire et un rayon de 50.
Les attributs cx et cy sont ceux où nous pouvons définir les coordonnées x et y du centre du cercle. Si nous manquions ces attributs, le centre du cercle serait mis à «0», ce qui aurait pour effet de couper le cercle de la page. Enfin, l'attribut marqué 'r' indique le rayon du cercle.
Comme vous pouvez le constater, la création de formes avec SVG est très simple. Créer un rectangle ne fait pas exception.
De manière similaire à la définition de la largeur et de la hauteur d'un élément en CSS, nous procédons de la même manière, mais en utilisant les attributs 'rect' de svg.
Ellipse fonctionne presque de la même manière que pour créer un cercle. Cependant, cette fois, plutôt que de n'avoir qu'un seul rayon fixe, nous avons des attributs distincts pour les rayons x et y..
Les polygones deviennent un peu plus difficiles (mais seulement un peu). Nous commençons par donner au polygone une couleur de remplissage, un trait orange et une largeur de trait de 10. Nous lui passons ensuite les attributs de point. Chaque paire de coordonnées définit les coordonnées x et y de chaque coin du polygone. Dans cette démonstration j'ai créé une star.
Comme mentionné précédemment, SVG est génial car lorsque nous incluons du texte, les moteurs de recherche sont capables de l'indexer - contrairement à d'autres moteurs de rendu tels que Flash..
Voici comment nous ajoutons du texte:
Webdesigntuts+
Dans le code ci-dessus, vous pouvez voir que nous avons ajouté les coordonnées x et y. Puis définissez quelques styles CSS tels que la famille de polices, le poids, la taille et la couleur.
Dans la balise path, nous devons nous concentrer sur l'attribut 'd'. Cet attribut 'd' décrit le chemin à créer. Chaque commande dans l'attribut 'd' est l'une des lettres de commande ci-dessous, suivie de ses paramètres. Les commandes pour l'attribut 'd' sont les suivantes:
Voici un exemple de code:
Nous pouvons même définir notre texte d'en haut pour suivre ce chemin comme ceci:
Nous avons fondamentalement défini le chemin dans la balise 'defs' et lui avons attribué un identifiant de 'chemin1'. Nous pouvons ensuite appliquer cela au texte en utilisant l'attribut 'textPath'.
Maintenant que nous avons couvert les bases de la création de formes avec SVG, il est temps de passer à quelque chose d'un peu plus complexe. Heureusement pour nous bien que cela ne soit pas obligé cette complexe, en fait, c’est très simple grâce à Adobe Illustrator. Pour ceux d'entre vous qui ne connaissent pas Illustrator, il peut être décrit comme suit:
Le premier environnement de dessin vectoriel de l'industrie pour la création de graphiques évolutifs sur tous les supports.
Ouvrez Illustrator et créez votre logo ou votre icône. La plupart des logos professionnels doivent avoir été créés à l'aide de vecteurs afin que vous puissiez les obtenir de vos clients. Sinon, vous pouvez essayer de les recréer vous-même. Si vous n’êtes pas habitué à travailler dans Illustrator, vous trouverez une mine d’informations sur Vectortuts.+
Une fois que vous avez votre logo ou votre icône, allez dans "Fichier> Enregistrer sous", puis sélectionnez "SVG" dans le menu déroulant "Enregistrer en tant que type". Donnez un nom à votre fichier puis cliquez sur "Enregistrer". Le dialogue d'options SVG devrait alors s'ouvrir. De là, sélectionnez "Afficher le code SVG". Cela ouvrira alors le code dans le navigateur. Vous devez simplement copier entre les balises svg et les inclure dans votre document html, et le tour est joué. Comme c'était simple?
Vous pouvez également utiliser Illustrator pour créer des chemins. Tracez simplement une ligne dans Illustrator, prenez les données d'attribut 'd' que vous pouvez utiliser pour un chemin, comme décrit précédemment. Par exemple, le chemin que j'ai créé pour le texte "webdesigntuts +" ci-dessus a été créé dans Illustrator, puis exporté dans mon document..
Vous pouvez ensuite styler ou positionner la balise SVG dans votre document à l'aide de méthodes CSS standard. Vous pouvez également l'envelopper dans une balise d'ancrage pour créer un lien ou le cibler avec JavaScript pour ajouter des fonctionnalités supplémentaires.
Ce n'est maintenant qu'une question de temps avant que la rétine et la densité de pixels fassent partie intégrante de chaque appareil et écran que nous utilisons, et cela continuera d'être étendu avec une plus grande densité dans le futur. En utilisant SVG, nous sommes en mesure de créer des graphiques évolutifs qui rendront le cristal clair et seront prêts pour le futur à mesure que les résolutions d'écran augmentent. Bien entendu, les SVG ne sont pas pratiques dans toutes les situations, mais pour les illustrations vectorielles sur le Web, il s'agit sans aucun doute de la meilleure voie à suivre..
Accentsconagua