Lors de la création d'un site Web, le concepteur de sites Web doit prendre en compte quatre points principaux penser à la mise en page et à la conception visuelle du Web, texte, images, couleurs et polices employés.
De ces quatre points, celui auquel nous allons accorder le plus d'importance dans ce post est celui des images, puisque nous allons parler de comment créer des fichiers svg car il est très important de prendre en compte la qualité des images avec lesquelles vous travaillez.
Traitements avec des fichiers SVG, a augmenté par les professionnels et pas si professionnels du monde du design.
Qu'est-ce qu'un fichier SVG ?
SVG est l'abréviation en anglais de Scalabe Vector Graphics, en espagnol, Scalable Vector Graphics. Il s'agit d'un format ouvert et libre avec lequel créer des graphiques 2D, deux dimensions.
Contrairement à d'autres formats d'image, tels que JPG ou PNG, SVG est un format évolutif, peu importe à quel point vous souhaitez augmenter sa taille, car la qualité de l'image sera conservée. C'est l'un des formats les plus utilisés dans les pages Web pour placer des graphiques ou des images vectorielles.
Pourquoi devrions-nous utiliser SVG ?
Avec ce type de format, les images vectorielles conserveront une qualité élevée, quelles que soient leur taille et leur résolution. Au contraire, les images composées de bitmaps, composées de pixels, perdent en qualité si elles sont redimensionnées. Le format SVG se définit par sa légèreté et sa polyvalence.
Un autre point en faveur de l'utilisation de ce format est sa petite taille, c'est-à-dire grâce à ce augmente la vitesse de chargement des pages où elles se trouvent. Ces images sont construites par le navigateur, ce qui permet de réduire la charge et la consommation sur le serveur.
De plus, ils peuvent créer des images SVG animées avec lesquels donner à notre site Web un air de proximité et attirer l'attention des téléspectateurs qui le visitent.
SVG est un format ouvert, c'est-à-dire peut subir des améliorations et des mises à jour. De plus, les fichiers SVG peuvent être édités avec des programmes d'édition vectorielle, par exemple Adobe Illustrator sans perte de qualité dans son affichage, il peut être visualisé sur n'importe quel appareil. Cela nous permet également de l'imprimer sans perte de qualité.
Comment créer facilement des fichiers SVG
Le moyen le plus simple de créer des fichiers SVG, si vous les connaissez, consiste peut-être à utiliser un programme de conception graphique, tel qu'Illustrator, Corel Draw, entre autres.
En se concentrant sur le programme Illustrator, lorsque nous allons utiliser le format SVG, nous devons prendre en compte si nous avons utilisé des dégradés ou d'autres effets, tels que l'effet artistique, le flou, les pinceaux, les pixels, etc. car ils sont pixellisés lorsqu'ils sont enregistrés au format de fichier SVG. Il est recommandé d'utiliser des effets de filtre SVG, pour ajouter des effets afin qu'ils ne puissent pas être pixellisés ultérieurement.
Un autre conseil que nous vous donnons est d'utiliser symboles et chemins simples dans les illustrations pour de meilleures performances dudit format. Évitez d'utiliser des pinceaux avec beaucoup de traçage car cela génère une charge de données plus élevée.
Pour créer un fichier SVG dans ce programme, La première chose que nous devons ouvrir est une toile vierge sur laquelle nous travaillerons sur notre idée.
Une fois notre travail terminé, nous allons aller dans la barre d'outils qui s'affiche au-dessus du programme, et nous sélectionnerons l'option de fichier, enregistrer sous, et un écran contextuel apparaîtra où il nous demandera de donner un nom à notre fichier et indiquez le format dans lequel nous voulons l'enregistrer. C'est dans cette dernière section qu'il faut marquer l'option SVG.
Lors de la sélection du type SVG, une boîte de dialogue apparaît nous montrant différentes options qui doivent être prises en compte.
En règle générale, dans le premier champ qui apparaît dans le tableau, le profil SVG 1.1 apparaît. Dans ce qui suit, il nous donne la possibilité de choisir les sources, dans lesquelles ils nous donnent par défaut, le texte est balisé en SVG et le sous-ensemble est aucun. Dans notre cas, ce travail n'a pas de polices, si c'était le cas, l'option des sous-ensembles devrait être modifiée de aucun à tous les pictogrammes.
La section suivante est très importante, si nous soulignons le option embed, les images de la composition seront incorporées dans le fichier, ce qui lui fera prendre du poids si nous utilisons beaucoup d'images bitmap. Si, par contre, nous marquons l'option de lien, nous devons être prudents avec les images si nous allons les utiliser sur un site Web, car nous devons inclure les fichiers de nos images, et aussi, très important, conserver leur chemin. L'avantage de cette option est que les fichiers pèseront beaucoup moins.
Dans la section des options avancées, nous trouvons la possibilité de Code SVG, cette option indiquera comment le fichier est à l'intérieur, c'est-à-dire le code derrière notre travail. Cette option est indispensable si vous souhaitez ajouter votre fichier SVG, par exemple à votre WordPress personnel, il vous suffit de copier le code et de l'ajouter directement dans votre éditeur HTML WordPress.
Le dernier conseil que nous vous donnons est que lors de l'enregistrement au format SVG, gardez à l'esprit que si vous travaillez avec différents plans de travail, seul le plan de travail actif sera conservé.
Si nous voulons aller plus loin et appliquer des effets SVG à notre illustration, Illustrator nous propose un ensemble d'effets. Pour ce faire, nous devrons sélectionner un objet ou un groupe. Pour appliquer un effet, nous devons sélectionner la fenêtre des effets, les filtres SVG et l'appliquer.
Lors de l'application d'un filtre SVG, le programme de conception nous montre une fenêtre où Une liste de filtres pouvant être appliqués s'affiche, une fois que nous en avons sélectionné un, Illustrator nous montre à quoi il ressemble, mais dans une version pixellisée.
Comme vous l'avez vu, le Le format SVG a été une révolution. Grâce à son potentiel et à la qualité qu'il propose, rend les pages Web que nous trouvons beaucoup plus attrayantes sans sacrifier les performances, à condition qu'elles utilisent correctement ledit format. SVG est devenu l'union parfaite entre le monde du design et le développement web.