Le SVG, pour quoi faire ?

Écrit par Alexandre S.

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 autres 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.

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 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érent 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 concentrent 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.