Débat développement Web : SVG (Scalable Vector Graphics) peut-il remplacer Flash ?

Les rubriques (actu, forums, tutos) de Développez
Tags
Réseaux sociaux


 Discussion forum

Le , par Orvinfait, Membre à l'essai
Scalable Vector Graphics qui, traduit de l'anglais, signifie « graphique vectoriel adaptable »[1] et est couramment abrégé par le sigle SVG, est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML. Ce format est spécifié par le World Wide Web Consortium.

Le SVG est très utilisé dans le monde de la cartographie et du téléphone portable.

Détails

Les coordonnées, dimensions et structures des objets vectoriels sont indiquées sous forme numérique dans le document XML. Un système spécifique de style (CSS ou XSL) permet d’indiquer les couleurs et les polices de caractères à utiliser.
Manipulation d’image SVG avec Inkscape.

Ce format gère quelques formes géométriques de base (rectangles, ellipses, etc.), mais aussi des chemins (paths), qui utilisent les courbes de Bézier et permettent ainsi d’obtenir presque n’importe quelle forme. Le remplissage peut se faire à l’aide de dégradés (gradients) de couleurs de motifs (pattern) qui sont des objets SVG quelconques, ou de filtres (appelés shaders en imagerie 3D). On peut également appliquer des motifs le long des chemins (markers) et utiliser les fonctions de remplissage. Le canal alpha, pour la transparence, est géré à tous les niveaux.

Comme dans tout document XML, les objets sont organisés sous forme d’arbre. Le format permet l’intégration d’animations, ou la manipulation des objets graphiques par programmation, notamment grâce à des scripts qui peuvent être intégrés dans le SVG.

Un des intérêts majeurs de SVG est qu’il peut être inclus dans d’autres documents XML, comme par exemple des documents XHTML ou des documents XML devant être traités par XSL-FO. Respectant la norme XML, une image SVG peut également être manipulée par l’intermédiaire du modèle Document Object Model (DOM).

SVG peut être visualisé nativement avec des navigateurs web modernes ou à l’aide d’un plug-in pour d’autres (voir : les navigateurs SVG).

Certains environnements graphiques l’utilisent pour la gestion et l’affichage d’icônes, et d’interface, comme X.org, GNOME, KDE ou certains téléphones portables.

Des logiciels graphiques permettent de modifier facilement chaque forme, par exemple en déplaçant des points, ou en changeant la couleur des traits, … Il en est de même pour le texte qui peut être modifié sans toucher aux formes, ce qui facilite grandement la modification de schémas.


Pour moi SVG est dès aujourd'hui utilisable puisque j'ai créé un jeu de cartes en réseau avec Ajax et SVG. Pour voir ce que cela donne : http://www.orvinfait.fr/svg/jeux/ten...ur_gagner.html

Le logiciel fonctionne avec Firefox 3, Opera et Internet Explorer avec le plugin d'Adobe. Je ne l'ai pas testé avec Safari mais il devrait fonctionner.

L'annonce qui devrait faire bouger les choses n'est peut-être pas mon jeu mais celle-ci :
Dreampark lance la nouvelle génération de logiciels médiateurs télévisuels SVG lors de l'IBC 2008
http://www.mobifrance.com/articles/p...?f=2021788.xml

L'article commence ainsi :
"Les graphiques vectoriels adaptables apportent des possibilités d'interface graphique sans précédent en qualité haute définition, sans compromis sur la vitesse ou la performance".

Cet article parait sur de nombreux sites exemple :
http://fr.biz.yahoo.com/29082008/175...suels-svg.html

Plus d'une personne va se dire: mais c'est donc possible en SVG ! Cela devrait changer l'image de ce langage.

Par SVG j'entends pas seulement la norme SVG mais SVG fonctionnant avec d'autres langages.

Avec SVG il est possible de créer ses propres polices de caractères. (mais cela n'est pas encore géré par Firefox mais par Opera et peut-être Safari)

SVG a été intégré dans le test acid3.

SVG est indexable

SVG est comme le HTML une technologie du W3C alors que Flash est aujourd'hui la propriété exclusive d'Adobe.

SVG 1.2 a des balises audio et video non encore disponibles dans les navigateurs actuels. Audio existe avec le plugin d'Adobe mais ce plugin est en cours d'abandon. Par contre il est possible d'ajouter la balise video de html5 dans un document SVG comme le montre l'exemple suivant : http://pecita.fr/ (en utilisant Firefox 3.1)

L'auteur de cet exemple en parle ici
http://www.svgfr.org/forum/?action=v...3&topic=910#17
Le site http://pecita.fr/ est en SVG.
Firefox 2 gérait SVG très lentement ce qui me faisait conseiller Opera. Ce n'est plus le cas avec Firefox 3


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de vintz72 vintz72
http://www.developpez.com
Membre confirmé
le 28/09/2009 10:12
Citation Envoyé par nethebes  Voir le message
Un excellent tuto(fr) en rapport direct avec les exemples précités: http://midiwebconcept.free.fr/
Pour les animations: http://www.mediasites.fr/pageditor_pro.php

J'aime bien l'exemple ultra-simple d'un rectangle sur http://midiwebconcept.free.fr/ où il indique que le faire avec svg requiert 4811 octets, alors que si l'on clique sur son lien on obtient un fichier html de 119 octets + un fichier svg de 309 octets. C'est certes plus que le fichier vml de 197 octets mais bon, ça reste dans les même proportions.

En outre, le souci principale de VML est de ne pas être supporté par tous les navigateurs (y'a-t-il des plugins à l'instar de SVG pour IE ?)
Avatar de Orvinfait Orvinfait
http://www.developpez.com
Membre à l'essai
le 28/09/2009 18:00
Citation Envoyé par Jérémie A.  Voir le message
Absolument aucune chance que SVG dépasse Flash, tout comme Silverlight ne dépassera pas Flash non plus. Flash s'est plus que tranquillement et profondément installé sur le marché, et va y rester pour un bon moment.

Bonjour,

Pour moi le début de la fin est proche. J'ai fait un très long article intitulé
SVG peut-il être rapide ou comment Google va grossir? http://www.orvinfait.fr/svg_rapide.html Si cela t'intéresse tu verras comment Google a préparé l'arrivée de SVG+ et devrait en retirer de gros bénéfices.
Avatar de nethebes nethebes
http://www.developpez.com
Membre à l'essai
le 28/09/2009 19:57
Citation Envoyé par vintz72  Voir le message
si l'on clique sur son lien on obtient un fichier html de 119 octets + un fichier svg de 309 octets.

Oui, l'introduction d'un SVG dans une page Web nécessite <embed <object ou <iframe. Il faut donc retenir fichiers HTML+SVG.
Pour VML rien de comparable. Il est intégré directement dans le code HTML. Ceci est un avantage considérable.

Citation Envoyé par vintz72  Voir le message
En outre, le souci principale de VML est de ne pas être supporté par tous les navigateurs (y'a-t-il des plugins à l'instar de SVG pour IE ?)

90% des internautes sont sur Windows + IE, donc de ce côté là pas de souci. Il y a tjs possibilité.
Par contre c'est dommage pour les utilisateurs Mac, Linux, Ubuntu...
Avatar de Costranovo Costranovo
http://www.developpez.com
Invité de passage
le 19/11/2009 9:55
Bonjour

C'est vrai que SVG à toujours été un peu douteux pour les performances.
Je suis très sidéré par VML et ses possibilités.
J'ai etudié ce format et je pense qu'il merite d'etre connu et exploité plus par les développeurs.
C'est bien de ne pas être à genou et lutter contre la suprématie de géant Microsoft. Mais c'est bien aussi de ne pas etre a genou devant W3C qui n'a pas toujours bonne décisions.
VML n'a pas assez été mediatisé je pense. Ce serait bien de l'utiliser plus et faire les navigateurs implémenter.
(excusez le mauvais français)
Avatar de imppao imppao
http://www.developpez.com
Invité de passage
le 02/12/2009 15:19
Citation Envoyé par Orvinfait  Voir le message
Bonjour,

Pour moi le début de la fin est proche. J'ai fait un très long article intitulé
SVG peut-il être rapide ou comment Google va grossir? http://www.orvinfait.fr/svg_rapide.html Si cela t'intéresse tu verras comment Google a préparé l'arrivée de SVG+ et devrait en retirer de gros bénéfices.

Bonjour, Orvinfait
j'ai lu ton article sur le svg+ vraiment très intéressant comme point de vue. Je m'intéresse au svg par l'intermédiaire de inkscape et dans un but d'illustration et d'animation (la prochaine version d'inkscape la 0.48 devrait permettre de réaliser des animations .svg sans toucher au code un peu comme flash).
Il faut savoir que Google organise chaque année les Google Summer of Code, et parmi les logiciels on retrouve inkscape, un élément supplémentaire pour confirmer l'intérêt de google pour le svg, avec inkscape il s'adresse directement aux illustrateurs et bientôt aux animateurs ce qui ne manquera pas d'augmenter la notoriété du .svg

Une petite remarque sur ton site, la mise en page est un peu dure et rend difficile la lecture du texte
Avatar de charmico charmico
http://www.developpez.com

le 07/12/2009 9:16
Citation Envoyé par imppao  Voir le message
réaliser des animations .svg sans toucher au code un peu comme flash).

Pour avoir des animations vectorielles optimisées avec des langages comme SVG ou VML vous devez inévitablement passer par le code. Tous les bons développeurs le savent bien.
Inkscape s'arrange comme il peut pour formater le code mais laisse plein de compositions détournées et lourdes. Tout comme Dreamweaver laisse plein de bricoles inutiles.
Là encore permettez-nous d'avancer que VML est exemplaire pour les manipulations sur le code car il est très accessible.
Nous avançons très vite sur ce format et le découvrir est un ravissement.
Pour reprendre les sites cités plus haut, essayez par exemple d'animer un groupe complexe comme le balancier de cette horloge: http://midiwebconcept.free.fr/Horloge.htm
Avec SVG nous avions tenté ce type d'animation et ce fût galère et bourré d'écritures pour un résultat finalement plus que médiocre. Même Flash ne semble pas à la hauteur. VML est la simplicité même pour réaliser du vectoriel.
Nous developpons actuellement un site proposant des cliparts pour le Web en VML. Nous avons du abandonner SVG pour rediriger vers du jpg gif ou png car les réalisations étaient trop lourdes et trop lentes.
Pourquoi le W3C ne change-t-il pas de standard !!! c'est abérant.
Avatar de Orvinfait Orvinfait
http://www.developpez.com
Membre à l'essai
le 31/01/2011 22:29
Avec HTML5 SVG va fortement se développer. Il est possible d'utiliser les polices de caractères SVG, ce que j'ai un peu détourné pour faire un cadre magique qui permet de faire apparaître en clair un message codé.
http://www.orvinfait.fr/svg/polices/code_1.php

Sur xmltoday.org il y a un article du 30 janvier 2011 sur SVG et sa capacité à remplacer Flash. Pour l'illustrer il y a une tasse de thé en SVG qui ressemble à une photo.
http://xmltoday.org/2011/01/the-svg-...have-some-tea/

Il va encore falloir du temps pour que SVG supplante Flash mais il je pense qu'il est souhaitable de s'intéresser à ce langage dès maintenant.

Il y a une norme pour imprimer des documents en SVG je pense que c'est un atout par rapport à Flash.

SVG est dès maintenant utilisé par des logiciels de découpe
http://crafty.actifforum.com/t16153-...vier-2011_-pro
Avatar de neo2k2 neo2k2
http://www.developpez.com
Candidat au titre de Membre du Club
le 27/02/2012 10:21
Bonjour à tous!

Je me permets de relancer le sujet car je pense qu'il est pertinent et qu'il sertait intéressant de le suivre régulièrement en fonction de l'avancement des divers projets: SVG, Flash, etc.

La mort du flash est-elle annoncée? Sachant que flash 11 sera la dernière version sur les smartphones, pourrait-on penser et anticiper le fait que svg (entre autres) a réussi à s'implenter sur le terrain d'Adobe?

Qu'en pensez-vous?

Autre question qui me turlupine (c'est pas un gros mot): quel langage utiliser pour créer un appli capable de lire sous forme graphique et modifier du svg?
Avatar de Richard Trigaux Richard Trigaux
http://www.developpez.com

le 27/02/2012 10:34
Bonne idée, d'autant plus que, depuis, certains appareils portables n'ont plus le flash... ce qui pose un problème grave, si on ne peut pas le remplacer. En principe, avec HTML5 et SVG arrivant à une forme stable, ça devrait être maintenant possible...

Rappel: Ce qui différencie le flash d'un simple format graphique (gifs animés, etc.) est un ensemble de capacités:
-boutons de choix
-son synchronisé avec la (les) animation(s)
-téléchargement intelligent (si le son n'est pas chargé, l'animation s'arrête, au lieu de perdre la synchronisation avec le son)
Tout format qui prétendra remplacer le flash devra bien évidemment implanter ces caractéristiques, faute de quoi il ne sera utile qu'à des choses simples comme les bandeaux publicitaires ou des cartes.

HTML5+SVG implante t-il ces caractéristiques?
Je n'en suis pas sûr, et à ma connaissance peu semblent s'en soucier. J'avais en particulier discuté sur le forum des concepteurs du SVG, on m'a répondu que ce n'était pas utile...

J'ai testé (Janvier 2012) une page HTML5 et SVG, avec un joeur de son en boucle. Seul Opera le jouait correctement. Firefox le jouait, mais sans la boucle. Safari, Chrome et IE9 restaient silencieux.

Donc, clairement, c'est pas encore au point. Espérons qu'il ne faudra pas encore attendre des années... avec des appareils sans flash, on a besoin d'un remplaçant tout de suite.
Offres d'emploi IT
Ingénieur Systèmes et Réseaux H/F
CDI
Maximo - Champagne Ardennes - Taissy (51500)
Parue le 10/10/2014
Développement c# h/f
Stage
Société Générale France - Ile de France - Paris (75000)
Parue le 16/10/2014
Responsable production IT H/F
CDI
Transatel - Ile de France - Neuilly-sur-Seine (92200)
Parue le 22/10/2014

Voir plus d'offres Voir la carte des offres IT
 
 
 
 
Partenaires

PlanetHoster
Ikoula