Comment exporter des modèles SVG

Auparavant, il était possible de balayer une image en tant que gif ou jpg à 72 dpi et de la coller avec CSS. C'est une pratique courante chez les concepteurs de sites Web depuis des années. c'est un moyen simple et rapide d'ajouter un motif ou une texture à votre travail. Puis ces bods embêtants chez Apple ont publié des écrans de rétine et avant que nous le sachions pixel n'était pas un pixel plus longtemps. Soudain, ces modèles bien-aimés sont devenus une histoire.

Les SVG (Scaleable Vector Graphics) deviennent rapidement la norme pour les graphiques nets sur le Web. Ils résolvent le problème de devoir créer des fichiers d'image séparés pour accueillir les appareils à rétine. Ils sont vraiment amusants et faciles à créer et ils ouvrent un monde de possibilités ...

Étape 1: Créer un motif

Il existe des dizaines d'applications différentes qui vous permettront de concevoir un motif SVG. Mon préféré est Illustrator, donc c'est ce que je vais utiliser.

Ouvrez Adobe Illustrator et créez un nouveau document de 300 x 300 pixels. Ensuite, allez à Objet> Motif> Créer et votre canevas changera. Vous remarquerez qu'il y aura un carré bleu au milieu de votre planche graphique. De plus, le panneau d'options de motif sera ouvert.

Nous devons faire un léger ajustement avant de commencer. Passez au panneau Options de motif et décochez l'option « Déplacer la mosaïque avec Art. (Cette fonctionnalité est agaçante, car vous ne pourrez ni déplacer ni positionner votre illustration dans le carré du motif. Elle se déplacera si vous ne décochez pas cette option.)

Ensuite, le ciel est la limite du type de motif que vous pouvez créer. Par défaut, le carré du motif est défini sur 100 pixels x 100 pixels. Vous pouvez composer n'importe quelle taille de votre choix. J'ai laissé le mien au défaut.

Ensuite, dessinez un carré, à 50 pixels sur 50 pixels. Alignez-le avec les bords supérieur et droit du carré.

Ensuite, cliquez et maintenez votre souris sur l' outil Plume . Des sous-outils apparaîtront, où vous pourrez sélectionner l' outil Ajouter un point d'ancrage . De là, ajoutez un point d'ancrage au centre des côtés gauche et droit du carré.

À l'aide de l' outil Sélection directe , sélectionnez les points d'ancrage (maintenez la touche Maj enfoncée pour sélectionner les deux). Dans le menu principal, sélectionnez Objet> Transformer> Déplacer.

Déplacez les deux points 20px vers la droite pour former une sorte de flèche.

Ensuite, dupliquez la forme en la faisant glisser vers une nouvelle position tout en maintenant la touche Alt enfoncée. (Ou copier et coller si vous préférez.)

Sélectionnez la nouvelle forme et faites-la glisser dans le coin inférieur gauche du motif.

Avec la forme toujours sélectionnée, prenez un coin et faites-le pivoter de 180 degrés. (Maintenez la touche Maj enfoncée pour vous caler exactement à 180 degrés.)

Dans le menu du haut, sélectionnez Objet> Transformer> Déplacer et déplacez la nouvelle forme -20px.

Enfin, cliquez sur le bouton Enregistrer une copie en haut de la fenêtre, nommez le motif et enregistrez-le pour terminer votre motif. Enregistrer une copie est important si vous souhaitez le modifier ultérieurement. Cela vous évite de devoir tout recréer.

Étape 2: Exporter le motif

Vous remarquerez qu'une fois que vous quittez le mode Pattern, le pattern est automatiquement sélectionné comme remplissage. Tout ce que vous devez faire est de dessiner une forme sur le plan de travail et il sera rempli avec le motif. (Si, pour une raison quelconque, vous avez modifié le remplissage de la forme, vous pouvez trouver votre motif dans le panneau Nuancier, appliquez-le comme tout autre remplissage.)

Ensuite, redimensionnez votre forme afin qu'elle couvre la totalité des 300px par 300px.

Sélectionnez Fichier> Enregistrer sous. Enregistrez votre fichier en tant que fichier .svg.

Ensuite, une boîte de dialogue apparaîtra, vous permettant de choisir parmi différents formats et options SVG. Assurez-vous de cliquer sur plus d'options, dans le coin inférieur gauche, pour voir toutes les options disponibles pour votre fichier SVG.

Le format typique est SVG 1.1, car il s'agit du format SVG le plus couramment utilisé et le plus largement pris en charge. Dans cette zone, vous contrôlerez également si vous conservez la possibilité de modifier le fichier SVG dans Illustrator ou si vous activez le texte sur un chemin, ce qui peut être pratique. Vous avez la possibilité d'utiliser le SVG en tant que fichier réel, ou vous pouvez copier le code et le coller directement dans votre document HTML. Une fois que vous avez terminé, cliquez sur OK.

Étape 3: Modifier le motif SVG

Ouvrez le fichier .svg dans un éditeur de texte. J'utilise Sublime Text, mais vous pouvez utiliser Notepad, Dreamweaver ou tout ce que vous codez dans HTML.

Ouvrez le même fichier dans un navigateur pour pouvoir prévisualiser les modifications apportées au code.

Il y a quelques domaines différents sur lesquels se concentrer. Tout d'abord, nous devons modifier les limites du fichier SVG afin qu'il remplisse le navigateur.

Tu verras: au fond. Changez les deux valeurs de 300 à 100% à la place. Donc, votre code ressemblera à ceci:

Vous ne devriez pas encore remarquer de changement. Ce devrait toujours être un carré. Pourquoi? Parce que la vue est définie sur 300 x 300, qui sont des dimensions carrées. Pour remplir la largeur et la hauteur du navigateur, modifiez le code de la ligne 4 de viewBox = "0 0 300 300" à viewBox = "0 0 100% 100%" .

Lorsque nous actualisons le navigateur, le modèle remplit notre navigateur de bout en bout. Le problème est que si vous voulez changer la taille du motif? Reviens-tu à Illustrator et refais-tu tout? Non, c'est la beauté d'avoir Illustrator pour générer votre code SVG. Vous pouvez simplement modifier le code. Ne le considérez pas comme un simple fichier graphique. Considérez-le comme un fichier de code que vous pouvez manipuler et plier à votre volonté.

Pour modifier la taille du motif, recherchez sur la ligne 5. Changez simplement les valeurs de la largeur et de la hauteur à tout ce que vous voulez. Je recommanderais de le garder à des proportions carrées, à moins que vous ne souhaitiez déformer votre modèle. Lorsque je change les valeurs à 70, le motif est plus petit, mais remplit toujours la largeur et la hauteur de l'écran.

Si vous regardez le code, vous verrez que le motif est constitué de polygones. Le premier polygone a un remplissage de "none" (qui produit du blanc) et le reste des valeurs hexadécimales.

Pour changer les couleurs de notre modèle, il suffit de changer les valeurs de remplissage.

Si vous êtes le genre de personne qui aime copier et coller, voici notre code SVG final:

C'est parfaitement valable, mais c'est un peu en désordre (merci Illustrator). Je vous recommande donc de l’optimiser avant de l’utiliser. Il y a beaucoup d'options d'optimisation disponibles, mais Peter Collingridge est l'un des meilleurs, il nous donne ce code final:

Conclusion

La possibilité d'exporter vos échantillons et modèles Illustrator en tant que fichiers SVG ouvre de nombreuses possibilités. Vous pouvez non seulement créer un modèle SVG, mais vous pouvez également modifier le fichier en quelques minutes, en contrôlant les couleurs, les tailles et le rendu du fichier dans le navigateur.