background preloader

SVG, le dessin vectoriel pour le web

SVG, le dessin vectoriel pour le web
SVG est un format d'images vectorielles basé sur le langage de balisage XML. Il répond parfaitement à des besoins graphiques légers, qu'ils soient statiques, dynamiques ou interactifs. SVG (Scalable Vector Graphics) est un format de dessin vectoriel, élaboré à partir de 1998 par un groupe de travail comprenant entre autre IBM, Apple, Microsoft, Xerox. Il a mis du temps à être estimé à sa juste valeur sur le Web, notamment à cause de sa lente adoption par les navigateurs. En effet, Internet Explorer ne l'a pris en charge qu'a partir de sa version 9. Avantages SVG est un format d'image léger lorsqu'il s'agit de représenter des formes simples, car seules les informations décrivant ces formes sont stockées (coordonnées, couleurs, effets) contrairement aux images bitmap (JPG, PNG, GIF) qui doivent mémoriser le contenu pixel par pixel. SVG est dans la lignée de HTML : spécifié par le W3C, ouvert, libre, simple d'utilisation. Outils Intégrer SVG à sa page web La balise <embed> La balise <object> <? Related:  Structures esthétiques (HTML, CSS, Jquery...)Animation html5

50+ Amazing Jquery Examples- Part1 Dec 20 2007 * This post is regularly updated. * Many of us have been using a good deal of jQuery plugins lately. Menu 1) LavaLamp 2) jQuery Collapse -A plugin for jQuery to collapse content of div container. 3) A Navigation Menu- Unordered List with anchors and nested lists, also demonstrates how to add a second level list. 4) SuckerFish Style Tabs 5) jQuery UI Tabs / Tabs 3 – Simple jQuery based tab-navigation 6) TabContainer Theme – JQuery style fade animation that runs as the user navigates between selected tabs. Accordion 7 ) jQuery Accordion Demo 8) Simple JQuery Accordion menu SlideShows 9) jQZoom- allows you to realize a small magnifier window close to the image or images on your web page easily. 10) Image/Photo Gallery Viewer- allows you to take a grouping of images and turn it into an flash-like image/photo gallery. Transition Effects 11) InnerFade – It’s designed to fade you any element inside a container in and out. 13) Highlight Fade jQuery Carousel Demo : Color Picker 17) jQuery Color Picker

Draw Freely. Un puissant outil de design libre Que vous soyez illustrateur, designer, concepteur de sites web et quel que soit vos besoins en création d'image vectorielle, Inkscape est fait pour vous ! Vous souhaitez en savoir plus sur Inkscape et comment il peut vous aider ? Consultez la liste complète des fonctionnalités ou essayez-le ! Rejoignez notre communauté Quels que soient vos moyens et vos compétences, vous pouvez faire avancer le projet. spécifiez les fonctionnalités que vous souhaiteriez avoir si vous trouvez des défauts, signalez-les améliorez la documentation Pour de plus amples informations, visitez notre section développeurs.

Introduction à Canvas Depuis l’arrivée de HTML5 et de ses nouveaux éléments, les sites et applications web peuvent profiter de grandes avancées pour rendre ce média attractif : audio, vidéo et Canvas pour disposer de fonctionnalités de dessin en 2D et 3D dans le navigateur. L'élément qui nous intéresse ici est <canvas>. Il s'agit d'un espace de pixels initialement transparents, armés de JavaScript pour réaliser un bon nombre de fonctions graphiques, partant du simple tracé de courbe pour aller jusqu'aux animations et jeux vidéo. Le nombre de démonstrations existant aujourd'hui sur le web est impressionnant, il serait difficile de toutes les lister ici pour en donner un avant-goût complet des possibilités. Flash est-il mort ? De nombreux parallèles avec la technologie Flash ont été réalisés et diffusés. Voici quelques avantages de Canvas : De quels outils dispose-t-on ? Qu'en est-il de SVG ? Support navigateur Création du canvas et principes généraux Celles-ci vont toutes exploiter le même système de coordonnées :

Document Object Model (DOM) The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Nodes can also have event handlers attached to them, and once that event is triggered the event handlers get executed. Essentially, it connects web pages to scripts or programming languages. Though often accessed using JavaScript, the DOM is not part of it and it can be used by other languages, though this is much less common. An introduction to the DOM is available. DOM interfaces Obsolete DOM interfaces The Document Object Model is in the process of being heavily simplified. HTML interfaces A document containing HTML is described using the HTMLDocument interface. Static type

Le SVG, pour quoi faire ? 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 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. Les avantages du format SVG L’utilisation de SVG SVG et Rails <? Conclusion

Useful JavaScript and jQuery Tools, Libraries, Plugins Advertisement Recently we’ve been receiving more requests for carefully selected, useful round-ups. We try to avoid round-ups on Smashing Magazine, but sometimes the format is useful and — if the resources are relevant — can be extremely helpful. Besides, we are glad to drive traffic to some obscure, yet useful resources and thus support the developers of these resources. In this round-up, you’ll find some of the useful JavaScript and jQuery tools, libraries and plugins that we have stumbled upon recently. You might want to take a look at the following related posts: Useful JavaScript Libraries Respond.js: Fast CSS3 Media Queries for Internet Explorer 6-8 and More5The goal of this script is to provide a fast and lightweight script to enable responsive Web designs in browsers that don’t support CSS3 Media Queries. Blackbird: Open Source JavaScript Logging Utility6Blackbird offers a dead-simple way to log messages in JavaScript and an attractive console to view and filter them. SlickGrid!

Online image converter to SVG format (JPG to SVG, PNG to SVG, EPS to SVG and more image format) This online SVG converter is based on Potrace When converting from raster images such as EPS, PNG or JPG, converter will convert your forms and objects in black-and-white images in vector graphics that can be scaled without loss of quality. Converting usual photography, likely will not have the desired result. We start new raster to vector converter on based Autotrace. We support the following file formats to convert to the SVG format: EPS to SVG JPG to SVG PSB to SVG PNG to SVG GIF to SVG JPEG to SVG XCFto SVG JP2 to SVG PCT to SVG PICT to SVG PIC to SVG DCM to SVG PCX to SVG TIFF to SVG ICO to SVG and more other support image formats

Introduction aux canvas HTML 5 Cet article est une introduction aux différentes API liées à l'élément HTML 5 canvas qui a fait son apparition il y a quelques temps déjà. J'y aborderai notamment les API de dessin 2D basiques, les chemins, l'utilisation d'images, et la composition. Afin d'être en mesure de suivre cet article dans de bonnes conditions, des notions en HTML et en Javascript sont nécessaires. Pour utiliser un canvas au sein d'une page web, il faut commencer par y ajouter une balise <canvas> : Ensuite, pour commencer à dessiner dans notre canvas, il faut récupérer son contexte de dessin 2D : var canvas = document.getElementById("demo"); var ctx = canvas.getContext("2d"); puis utiliser les fonctions de dessins de l'objet ainsi obtenu. ctx.fillRect( 50, 50, 100, 30 ); Le code précédent nous a permis de dessiner un rectangle rempli de couleur noire. ctx.fillStyle = "red"; ctx.fillRect( 60, 40, 30, 100 ); ctx.strokeStyle = "#0000ff"; ctx.lineWidth = 2; ctx.strokeRect( 100, 100, 50, 50 ); Opérations de composition

Animated Checkboxes and Radio Buttons with SVG By animating an SVG path with JavaScript, we can do many fancy things. Today we want to show you some effects for checkboxes and radio buttons. The idea is to hide the inputs, use pseudo-elements to create a more appealing style and then animate the SVG paths once an input is selected. View demo Download source Today we’d like to share some fancy “check” animations for checkboxes and radio buttons with you. Please note that this is just a proof-of-concept and not a complete solution. For the custom checkbox or radio button we use the ::before pseudo-element of the label and we hide the input by setting the opacity to 0. Initially, we also add the necessary SVG elements after the inputs with JavaScript. Here is an example of a form structure: We are using an unordered list with the inputs and labels. The core styles for making the input invisible and creating the box out of the pseudo-element is the following: We noticed a small glitch for the last example in Firefox (24.0) on Mac.

svg Le format SVG est un format graphique vectoriel ( en langage par balises de la famille XML ) qui permet de faire des dessins en 2 dimensions, des animations ou des applications graphiques pour le web. Cette page recense les logiciels fonctionnant sous Ubuntu qui permettent de créer et manipuler ce type de fichier. Pour information : comparatif SVG vs SWF (Flash). Le format SVG commence a être supporté par de nombreuses applications dont les navigateurs récents. Suivre le défilement vertical avec CSS et jQuery Dans ce tutoriel, nous allons apprendre à créer un élément qui reste affiché à l'écran en permanence même lorsqu'on scroll (barre de défilement) en "suivant" le défilement de l'écran. Tester/ressources/exemple/jquery-rocket/step5.html Résultat final La fusée suit le défilement de la souris L'intérêt est d'attirer l'attention tout en gardant cet élément en dehors du contenu principal de la page, on peut par exemple l'utiliser pour afficher un lien vers les réseaux sociaux : Facebook "like", Twitter, Google +1... Cette technique est notamment utilisée sur l'Apple Store, pour afficher le panier d'achats en permanence - ex: Pour réaliser cet effet, on va utiliser le positionnement CSS "fixed" ainsi que jQuery. Voilà les sources du résultat final pour les gens pressés : jQuery Rocket Sources + bonus + fichier Photoshop du sprite CSS Télécharger Avant tout, on va partir sur avec cette page de base : Et le code CSS qui va avec :

Ajout de SVG à une page Web Cette rubrique présente des méthodes courantes permettant d’afficher SVG dans votre page Web, en partant du principe que vous disposez des connaissances de base des langages HTML et JavaScript. Introduction Si vous venez de découvrir le format SVG (Scalable Vector Graphics) et que vous souhaitez tester cette technologie, vous devez probablement vous demander comment ajouter un rendu SVG à une page Web de base. <! Il existe un grand nombre de méthodes permettant d’ajouter un rendu SVG à ce modèle de base. <? Astuce Pour améliorer la compatibilité entre les navigateurs modernes, enregistrez l’exemple de code ci-dessus avec l’extension de fichier xhtml. La déclaration xml est une instruction de traitement de navigateur qui identifie le document comme étant de type XML/XHMTL. Du point de vue technique, la déclaration DOCTYPE n’est pas un élément HTML. L’élément html indique au navigateur qu’il s’agit d’un document HTML général et d’un document XHTML en particulier, comme indiqué par DOCTYPE.

(Tuto) Dessiner un graph sur un Canvas HTML5 Le format HTML5 a introduit une nouvelle fonctionnalité: le canvas qui permet de dessiner sur la page HTML. Comment utiliser cette propriété pour crée un graphique directement sur la page web ? Principes du Canvas HTML5 Le canvas est une une zone de dessin incluse dans la page HTML sur laquelle on peut dessiner des formes à l'aide de Javascript. Page HTMLL’élément de dessin est déclaré dans le code HTML avec la balise <canvas>. <! Code javascriptLe canvas se compose de 2 parties: objet canvas que l'on peut comparer à un Div par exemple et le context qui est la zone de dessin à proprement parler. Dessiner dynamiquement un graph dans une page HTML Les présentations étant faites, revenons au but initiale: dessiner un graphique de type ligne pour une serie de donnée.Le graphique ci-contre a été généré à partir directement avec l'objet Canvas en HTML5.Pour simplifier les développements futurs, l'ensemble des fonctions de générations de graphique a été regroupée dans un objet Javascript.

Le format SVG Images vectorielles et images bitmap Il existe 2 manières de représenter des images dans un ordinateur. Les images bitmap [3] sont construites à partir d’une matrice de points, on affecte une couleur à chaque point. Les images vectorielles consistent en un assemblage d’objets géométriques élémentaires (points, lignes, cercles) à l’intérieur d’un repère du plan (mais si, souvenez-vous les cours de maths au collège…). Parmi les formats d’images les plus connus, on trouve PNG [4] , JPEG [5] et TIFF [6] qui sont des formats bitmap. SVG est un format d’image vectoriel. Un standard du W3C Tout comme XHTML [7], CSS [8] ou encore MathML [9], SVG est un standard du W3C [10]. Vous avez dit XML ? XML est un métalangage en ce sens qu’il sert de base pour l’élaboration d’autres langages comme OpenDocument, XUL [13] (le langage de description d’interfaces de Mozilla) ou encore XMPP [14] (utilisé notamment pour la messagerie instantanée et plus connu sous le nom de Jabber [15]). Support du format SVG et

Related: