SVG Archives | DOTPROGS DOTPROGS - Conception de sites web Wed, 17 Nov 2021 15:32:52 +0000 fr-FR hourly 1 https://www.dotprogs.com/wp-content/uploaded-files/cropped-dotprogs-favicon-32x32.png SVG Archives | DOTPROGS 32 32 SVG et son utilisation pour le web : des ressources variées https://www.dotprogs.com/format-svg-utilisation-web/ Sun, 13 Nov 2016 17:25:02 +0000 https://www.dotprogs.com/?p=305 SVG - Scalable Vector Graphics

Des possibilités d'intégration intéressantes avec le format "SVG"

Ses atouts majeurs

"SVG" (pour "Scalable Vector Graphic") est un format d'image pour les vecteurs graphiques et c'est ce qui fait son charme !
Ceci implique que ce format est facilement adaptable en dimensions, sans perte de qualité. Les fichiers en format "SVG" ont une taille réduite et bénéficie d'un bon taux de compression. L'affichage des images "SVG" sur des périphériques à haute définition et densité de pixel (type "retina" ou autre) est du coup bien géré.

Les formes dessinées sont aisément contrôlables, nous pouvons les animer facilement et leur appliquer des styles et de l'interactivité avec CSS et JavaScript.

Les navigateurs modernes permettent désormais de profiter de ce format, mais bien que "SVG" ne soit pas une véritablement une nouveauté, il n'est pas régulièrement utilisé sur un site web.

L'intégration, bien que clairement documentée nécessite un certain apprentissage. Il existe aussi certaines limites et exceptions comme souvent qui nécessitent de les contourner notamment en consultant caniuse, notre référence pour les problématiques d'utilisation.

"SVG" est basé sur le langage "XML", un fichier est donc facilement manipulable dans un simple éditeur de code.
un exemple de format "SVG" qui représente un pictogramme "tools" présent sur le visuel de cet article :

<svg version="1.1" id="Tools" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M3.135,6.89c0.933-0.725,1.707-0.225,2.74,0.971c0.116,0.135,0.272-0.023,0.361-0.1c0.088-0.078,1.451-1.305,1.518-1.361
 C7.82,6.341,7.9,6.231,7.795,6.108C7.688,5.985,7.301,5.483,7.052,5.157c-1.808-2.365,4.946-3.969,3.909-3.994
 c-0.528-0.014-2.646-0.039-2.963-0.004C6.715,1.294,5.104,2.493,4.293,3.052C3.232,3.778,2.836,4.204,2.771,4.263
 c-0.3,0.262-0.048,0.867-0.592,1.344C1.604,6.11,1.245,5.729,0.912,6.021C0.747,6.167,0.285,6.513,0.153,6.628
 C0.02,6.745-0.004,6.942,0.132,7.099c0,0,1.264,1.396,1.37,1.52C1.607,8.741,1.893,8.847,2.069,8.69
 c0.177-0.156,0.632-0.553,0.708-0.623C2.855,8.001,2.727,7.206,3.135,6.89z M8.843,7.407c-0.12-0.139-0.269-0.143-0.397-0.029
 L7.012,8.63c-0.113,0.1-0.129,0.283-0.027,0.4l8.294,9.439c0.194,0.223,0.53,0.246,0.751,0.053L17,17.709
 c0.222-0.195,0.245-0.533,0.052-0.758L8.843,7.407z M19.902,3.39c-0.074-0.494-0.33-0.391-0.463-0.182
 c-0.133,0.211-0.721,1.102-0.963,1.506c-0.24,0.4-0.832,1.191-1.934,0.41c-1.148-0.811-0.749-1.377-0.549-1.758
 c0.201-0.383,0.818-1.457,0.907-1.59c0.089-0.135-0.015-0.527-0.371-0.363c-0.357,0.164-2.523,1.025-2.823,2.26
 c-0.307,1.256,0.257,2.379-0.85,3.494l-1.343,1.4l1.349,1.566l1.654-1.57c0.394-0.396,1.236-0.781,1.998-0.607
 c1.633,0.369,2.524-0.244,3.061-1.258C20.057,5.792,19.977,3.884,19.902,3.39z M2.739,17.053c-0.208,0.209-0.208,0.549,0,0.758
 l0.951,0.93c0.208,0.209,0.538,0.121,0.746-0.088l4.907-4.824L7.84,12.115L2.739,17.053z"/>
</svg>

Des formes géométriques simples peuvent être traitées (rect, circle, elipse et polygon), ou plus complexes (balises polyline et path) comme l'exemple ci-dessus.

Le code avec balise "svg" ci-dessus peut-être placé tel quel dans une page web en HTML5, il existe en réalité différentes manières d'afficher et utiliser un "SVG" pour un site web dont notamment la balise "iframe", "object" et "img" et également l'intégration en background CSS.

L’attribut "viewBox" est important et permet l'affichage des formes représentées. Les attributs "width" et "height" définissent quant à eux le cadre fondamental qui va le contenir et l'afficher dans une page web. Lors de l'intégration, il faut donc apporter une attention particulière à ses valeurs. Voici ce que cela donne concrètement avec une illustration.

Vous pouvez exporter un fichier SVG à partir d'un éditeur graphique tel que Illustrator, Inkscape ou autres, cependant le code généré nécessitera d'être optimisé.

"SVG" permet des effets graphiques comme le détourage, masquage (clipPath et mask), ainsi que des filtres, et surtout il est adaptatif ce qui le rend pratique pour le responsive design.

Le "profil" de "SVG" a été brièvement abordé dans cet article, pour aller plus loin dans le domaine, je vous propose un lien très riche avec de nombreuses ressources et une revue assez large de ses capacités et surtout comme apprendre à l'utiliser.

Cet article SVG et son utilisation pour le web : des ressources variées est apparu en premier sur DOTPROGS.

]]> SVG - Scalable Vector Graphics

Des possibilités d'intégration intéressantes avec le format "SVG"

Ses atouts majeurs

"SVG" (pour "Scalable Vector Graphic") est un format d'image pour les vecteurs graphiques et c'est ce qui fait son charme ! Ceci implique que ce format est facilement adaptable en dimensions, sans perte de qualité. Les fichiers en format "SVG" ont une taille réduite et bénéficie d'un bon taux de compression. L'affichage des images "SVG" sur des périphériques à haute définition et densité de pixel (type "retina" ou autre) est du coup bien géré. Les formes dessinées sont aisément contrôlables, nous pouvons les animer facilement et leur appliquer des styles et de l'interactivité avec CSS et JavaScript. Les navigateurs modernes permettent désormais de profiter de ce format, mais bien que "SVG" ne soit pas une véritablement une nouveauté, il n'est pas régulièrement utilisé sur un site web. L'intégration, bien que clairement documentée nécessite un certain apprentissage. Il existe aussi certaines limites et exceptions comme souvent qui nécessitent de les contourner notamment en consultant caniuse, notre référence pour les problématiques d'utilisation. "SVG" est basé sur le langage "XML", un fichier est donc facilement manipulable dans un simple éditeur de code. un exemple de format "SVG" qui représente un pictogramme "tools" présent sur le visuel de cet article : 
<svg version="1.1" id="Tools" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M3.135,6.89c0.933-0.725,1.707-0.225,2.74,0.971c0.116,0.135,0.272-0.023,0.361-0.1c0.088-0.078,1.451-1.305,1.518-1.361
 C7.82,6.341,7.9,6.231,7.795,6.108C7.688,5.985,7.301,5.483,7.052,5.157c-1.808-2.365,4.946-3.969,3.909-3.994
 c-0.528-0.014-2.646-0.039-2.963-0.004C6.715,1.294,5.104,2.493,4.293,3.052C3.232,3.778,2.836,4.204,2.771,4.263
 c-0.3,0.262-0.048,0.867-0.592,1.344C1.604,6.11,1.245,5.729,0.912,6.021C0.747,6.167,0.285,6.513,0.153,6.628
 C0.02,6.745-0.004,6.942,0.132,7.099c0,0,1.264,1.396,1.37,1.52C1.607,8.741,1.893,8.847,2.069,8.69
 c0.177-0.156,0.632-0.553,0.708-0.623C2.855,8.001,2.727,7.206,3.135,6.89z M8.843,7.407c-0.12-0.139-0.269-0.143-0.397-0.029
 L7.012,8.63c-0.113,0.1-0.129,0.283-0.027,0.4l8.294,9.439c0.194,0.223,0.53,0.246,0.751,0.053L17,17.709
 c0.222-0.195,0.245-0.533,0.052-0.758L8.843,7.407z M19.902,3.39c-0.074-0.494-0.33-0.391-0.463-0.182
 c-0.133,0.211-0.721,1.102-0.963,1.506c-0.24,0.4-0.832,1.191-1.934,0.41c-1.148-0.811-0.749-1.377-0.549-1.758
 c0.201-0.383,0.818-1.457,0.907-1.59c0.089-0.135-0.015-0.527-0.371-0.363c-0.357,0.164-2.523,1.025-2.823,2.26
 c-0.307,1.256,0.257,2.379-0.85,3.494l-1.343,1.4l1.349,1.566l1.654-1.57c0.394-0.396,1.236-0.781,1.998-0.607
 c1.633,0.369,2.524-0.244,3.061-1.258C20.057,5.792,19.977,3.884,19.902,3.39z M2.739,17.053c-0.208,0.209-0.208,0.549,0,0.758
 l0.951,0.93c0.208,0.209,0.538,0.121,0.746-0.088l4.907-4.824L7.84,12.115L2.739,17.053z"/>
</svg>
Des formes géométriques simples peuvent être traitées (rect, circle, elipse et polygon), ou plus complexes (balises polyline et path) comme l'exemple ci-dessus. Le code avec balise "svg" ci-dessus peut-être placé tel quel dans une page web en HTML5, il existe en réalité différentes manières d'afficher et utiliser un "SVG" pour un site web dont notamment la balise "iframe", "object" et "img" et également l'intégration en background CSS. L’attribut "viewBox" est important et permet l'affichage des formes représentées. Les attributs "width" et "height" définissent quant à eux le cadre fondamental qui va le contenir et l'afficher dans une page web. Lors de l'intégration, il faut donc apporter une attention particulière à ses valeurs. Voici ce que cela donne concrètement avec une illustration. Vous pouvez exporter un fichier SVG à partir d'un éditeur graphique tel que Illustrator, Inkscape ou autres, cependant le code généré nécessitera d'être optimisé. "SVG" permet des effets graphiques comme le détourage, masquage (clipPath et mask), ainsi que des filtres, et surtout il est adaptatif ce qui le rend pratique pour le responsive design. Le "profil" de "SVG" a été brièvement abordé dans cet article, pour aller plus loin dans le domaine, je vous propose un lien très riche avec de nombreuses ressources et une revue assez large de ses capacités et surtout comme apprendre à l'utiliser.

Cet article SVG et son utilisation pour le web : des ressources variées est apparu en premier sur DOTPROGS.

]]>