C SVG Working Group. SVG is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group. This is a public group, which works on an open mailing list and which welcomes your feedback. Upcoming Events The Graphical Web 2014 – Winchester, England, August 27–30, 2014 The Graphical Web will showcase SVG, as well as related technologies like Canvas, WebGL, CSS, Javascript, and HTML5 video and audio. The theme of the 2014 edition of the conference will be Visual Storytelling – using new technology to produce compelling visual narratives on the web. The Graphical Web 2014 is being organised by the Data Visualisation Centre of the UK's Office for National Statistics. News CSS-SVG Effects Task Force Started The CSS and SVG Working groups have started a joint task force to discuss and develop mutual features such as gradients, transforms, filters, and animation. Que peut-on faire avec SVG? Les meilleures applications actuelles réalisées avec SVG vous ferons voir ce que l'on peut faire avec ce langage graphique standard.
SVG est un langage pour convertir les données en graphiques. Nous allons voir avec la liste d'applications qui suit que cela peut représenter en fait une variété très étendue d'utilisations. Mais avant tout, il ne faut pas se leurrer, SVG ne convient pas à tous les cas de figure et souvent il vaudra mieux remplacer le code par une simple image, éventuellement avec une image map pour ajouter un peu d'interactivité... Parce que le code SVG est lourd, on peut souvent le remplacer par une image sans ralentir le chargement de la page. Il convient donc plutôt quand l'interactivité est essentielle. Mais lorsque les conditions sont réunies, il est alors possible de fournir grâce à SVG des choses étonnantes... SVG Web Demo Ce site propose un outil qui convertit SVG en Flash afin de l'afficher sur tous les navigateurs. Tracer un chemin sur une carte Jeu de plateau.
SVG ou Canvas, que choisir ? Depuis plusieurs années que je m’intéresse à SVG et aux nouvelles possibilités qu’offre HTML5, on me pose régulièrement cette même question : « Quel est le mieux entre SVG et Canvas ? ». Je réponds alors stoïquement et laconiquement : « Les deux mon capitaine, ça dépend ». En effet, ça dépend, voilà donc un petit guide pour vous aider à choisir entre ces deux technologies. Voyons tout d’abord ce que ces technologies ont en commun. Après tout, s’il est si difficile de choisir entre l’une et l’autre c’est qu’elles semblent offrir les mêmes choses... Il est très rare que dans le cadre du Web nous ayons deux standards qui fassent la même chose... Vecteurs contre bitmap La première différence entre ces deux technologies tient aux types de données qu’elles manipulent. La différence entre les deux va donc se jouer sur des questions assez simples finalement : si vous devez envisager un redimensionnement sans perte de qualité, SVG sera plus indiqué.
Déclaratif contre programmatif Conclusion. SVG ou Canvas, que choisir ? Tout ce qu’il faut savoir pour réaliser des jeux HTML5 avec Canvas et SVG - David Rousset - sharing about HTML5, Windows 8 & Gaming. Au sommaire : - Canvas et SVG : 2 façons de dessiner à l’écran - Les librairies et les outils utiles - Les frameworks de jeux - Les tutoriaux pour démarrer - Des exemples de réalisations en ligne et des retours d’expérience Je passe mon temps ces derniers temps à expliquer en boucle comment faire des jeux en HTML5 à des étudiants, des passionnées, des professionnels voire même à des profs. Plutôt que garder cela en petit comité, je me suis donc dit qu’il serait plus intelligent de structurer tout cela et d’en faire un billet sur mon blog. Il est donc basé sur ma propre expérience. Mais au fait pourquoi faire des jeux en HTML5 ?
Tout simplement parce qu’aujourd’hui, on peut vraiment se servir du HTML5 pour faire du multiplateformes : pour les machines de bureau bien sûr (avec IE9/IE10, Firefox, Chrome, Opera & Safari), pour les tablettes ou téléphone iOS & Android et pour finir pour Windows 8 qui vous accueille désormais à bras ouvert ! Canvas et SVG : 2 façons de dessiner à l’écran David. SVG: Graphisme au format XML pour le web. SVG, Scalable Vector Graphic, est une spécification de documents pour décrire des graphiques 2D à dimension variable, en XML.
Il est compatible avec XML 1.0. On l'utilisera principalement pour faire des pages Web graphiques en remplacement de Flash. Il existe des frameworks pour réaliser des applications Web en SVG. Pourquoi utiliser SVG? SVG permet de placer du graphisme dans une page Web ou un document local qui soit en interaction avec des données textuelles. Une page SVG peut être construite à partir d'une base de données, et il peut être consulté par un moteur de recherche. Vous pouvez traduire des données numériques XML en graphiques par une transformation XSL. Par rapport à Canvas, SVG convient mieux comme format pour des graphismes produits avec un logiciel de dessin ou autre, à intégrer dans une page web, tandis que Canvas convient pour du graphisme créé dynamiquement dans la page au moment ou elle s'affiche. Exemple: Fonctions principales de SVG Transformations.
Format du fichier <? SVG vs Canvas, à l'heure du choix. Quel format choisir pour intégrer des graphismes dans une page Web, ou pour réaliser une application en ligne? Balises contre fonctions SVG est un langage à balise dérivé de XML. Canvas est une API, donc un ensemble de fonctions JavaScript utilisant la balise <canvas> comme conteneur (SVG utilise la balise <svg>). Par exemple, voila comment on affiche un texte vectoriel en SVG: <svg width="320px" height="48px"> <g> <text font-size="24" font-style="italic" x="16" y="16" style="fill:purple"> Un texte en SVG </text> </g></svg> Et avec Canvas: <canvas id="can" width="320" height="48">Un texte avec Canvas</canvas><script>function cText(){ var ctx = document.getElementById('can').getContext('2d'); ctx.fillStyle="rgb(255,32,32)"; ctx.font='italic normal 24px Calibri, sans-serif'; ctx.fillText("Un texte avec Canvas", 16, 16);}window.onload=cText;</script> Vectoriel et bitmap?
Interaction avec l'utilisateur Le code SVG est fait de balises qui peuvent se combiner avec les balises HTML. Scripting Vitesse.