Go to Hackademy website

Le SVG, pour quoi faire ?

Alexandre Salaun

Posté par Alexandre Salaun dans les catégories back

Dans un article précédent, nous avions découvert la librairie RaphaelJS et nous avions déjà commencé à parler de SVG. Ici, nous allons voir ce qu’il est possible de faire avec ce dernier et également comment on peut le manipuler avec Ruby et Rails.

Qu’est ce que SVG?

SVG signifie Scalable Vector Graphics, en clair c’est un format de données utilisé pour définir des graphiques vectoriels. Il est inspiré des formats VML (soutenu entre autre par Microsoft) et PGML (soutenu par Adobe et Sun). Contrairement aux deux précédents, SVG est recommandé par la W3C.

Ce format est basé sur du XML et permet de définir des éléments graphiques pour le web. Il est surtout utilisé pour l’affichage de graphiques (vous pouvez visualiser quelques exemples sur ce site) mais également pour les applications mobiles.

Il est possible de réaliser des dessins beaucoup plus complexes que de simples graphiques comme vous pouvez le voir ci-dessous.

Exemple d'utilisation de SVG

Il est possible d’avoir d’autres exemples.

D’autre part, SVG peut être combiné avec du CSS par exemple afin de définir le style de vos éléments graphiques. On peut par exemple spécifier la couleur ou la police pour l’affichage d’un texte. Il est également possible de manipuler des éléments graphiques SVG comme n’importe quel autre élément du DOM.

Les avantages du format SVG

L’un des principaux avantages de ce format et que l’on peut redimensionner une image sans aucune perte de qualité contrairement à une image jpeg ou png par exemple. Ceci est dû au fait que ces images soient vectorielles.

Afin de vous faciliter la tâche, certaines formes géométriques de base sont déjà gérées telles que les rectangles ou les ellipses par exemple. Il est également possible d’obtenir n’importe quelle forme à l’aide des paths qui sont des chemins et vous permettent de tracer ce que vous souhaitez.

<!-- dessiner un carré bleu de 100px de côté -->
<svg height='100%' version='1.1' width='100%'>
  <rect height="100" width="100" fill="#1B4CE0"></rect>
</svg>

Les éléments dessinés au format SVG sont exportables afin d’être ré-importer dans un un autre endroit du dessin SVG.

Enfin, aujourd’hui une très grande partie des navigateurs sont capables de gérer des éléments au format SVG.

Le support de SVG par les navigateurs

Certains navigateurs supportent nativement SVG, pour d’autres il est nécessaire d’utiliser un plugin.

Opéra par exemple supporte en partie ce format depuis la version 8.5 du navigateur (depuis cela s’est amélioré). D’autre part, les moteurs WebKit (Chrome, Safari) et Gecko (Firefox) supportent, au moins en partie, le format SVG. Ce dernier est même disponible à travers Safari sur l’iPhone (au moins depuis le 4). Enfin, Internet Explorer 9 supporte le format SVG. Malheureusement ce n’est pas le cas des versions précédentes de ce navigateur.

Pour les navigateurs qui ne supportent pas nativement ce format, des plugins existent. SVG Web par exemple, est une librairie JavaScript développée par Google qui permet d’utiliser le format SVG sur Internet Explorer (à partir d’IE 6), Safari ou encore Firefox.

L’utilisation de SVG

Comme cela a été dit précédemment, SVG est utilisé pour effectuer des dessins ou afficher des éléments graphiques. Le format SVG est également utilisé par différentes librairies.

RaphaelJS par exemple se sert de ce format pour tracer tous types de formes géométriques allant d’un simple rectangle à la reproduction d’une image comme vous pouvez le voir sur le site de ces derniers. Certaines librairies permettant de tracer des graphiques utilisent également ce format de données comme par exemple HighStock.

SVG et Rails

Avant tout, pour pouvoir utiliser SVG dans une application RubyOnRails vous devez y ajouter le type mime. Pour cela, il faut ajouter cette ligne dans le fichier mime_types.rb qui se trouve dans le répertoire config/initializers de votre application

Mime::Type.register "image/svg+xml", :svg

Dans votre projet, vous pouvez maintenant créer un model image ayant, par exemple, des attributes width, height et fill qui définiront la hauteur, la largeur et la couleur de remplissage de votre image. Ensuite, créer un objet image avec les paramètres que vous souhaitez. Ajouter la route afin de pouvoir accéder à la page ainsi que le controller correspondant (dans notre cas ImagesController).

# dans le fichier routes.rb, ajoutez la ligne suivante
resources :images

# dans le fichier images_controller.rb
class ImagesController < ApplicationController
  def show
    @image = Image.find(params[:id])
  end
end

Vous pouvez maintenant créer une vue pour afficher un élément SVG. Il vous suffit de créer un fichier show.svg.erb et d’y ajouter votre code :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg width="220px" height="120px" xmlns="http://www.w3.org/2000/svg">
  <rect height="<%= @image.height %>" width="<%= @image.width %>" fill="<%= @image.fill %>"></rect>
</svg>

En vous rendant à l’adresse myproject/images/1.svg vous avez donc un rectangle bleu dessiné sur votre page.

Vous avez également la possibilité d’inclure votre SVG comme une image dans une vue HTML, par exemple, en créant un fichier show.html.erb et en y ajoutant cette image.

<p>Affichage de mon SVG :</p>
<%= image_tag image_path(@image, :format => :svg) %>

Il existe différentes gems qui permettent de manipuler des éléments SVG telles que RailRoad ou Gruff. Néanmoins la manipulation du SVG directement avec du Ruby n’est pas courante, il y a peu de documentation à ce sujet. En effet, la plupart des tutoriels se concentre sur la manipulation du SVG avec JavaScript.

Conclusion

Le format SVG apporte donc un avantage conséquent dans différents cas. Tout d’abord, si vous devez développer une application ou un site web en version classique et en version mobile, vous pouvez utiliser SVG pour vos images afin de ne pas avoir à stocker ces dernières dans différentes tailles car il est possible de redimensionner sans perte de qualité. Ensuite, ce format facilite le dessin au travers de différentes librairies.

Pour ce qui est de l’utilisation du format SVG dans une application Rails, nous avons vu qu’il est très simple de générer un élément SVG et de l’afficher où bon vous semble. Cela peut donc être utile dans certains cas.

L’équipe Synbioz.

Libres d’être ensemble.

Articles connexes

Du dosage à la rouille

13/06/2019

Parlons de la rouille, cette délicieuse sauce qui accompagne nos soupes de poisson. Le bon dosage des ingrédients ravira le palais vos convives ! Pour faire une portion de rouille les ingrédients...

Une brève histoire d'Elixir et Erlang/OTP

31/01/2019

Je développe depuis plusieurs années en Ruby. Depuis mon arrivée chez Synbioz, j’expérimente en plus avec Elixir de façon assez naturelle. En quoi Elixir est-il différent, me demanderez-vous ? Pour...

Écrire une thread pool en Ruby

10/01/2019

Pouvoir exécuter plusieurs tâches en parallèle, que ce soit dans un script ou une application, peut être vraiment très utile, surtout dans le cas où le traitement de ces tâches peut être très long....

Translation temporelle

31/05/2018

Cette semaine, je me suis essayé à un nouveau format d’article qui se présente sous la forme d’une nouvelle de Science-Fiction. Je tiens en passant à remercier Valentin pour ses illustrations....