Index de la documentation SVG

68 pages trouvées :

N° Page Étiquettes et résumé
1 SVG 2D Graphics, Graphiques 2D, Référence, SVG, Web
SVG (Scalable Vector Graphics) est un langage de balisage XML décrivant des images vectorielles bidimensionnelles. On pourrait dire que SVG est aux images ce qu'XHTML est au texte.
2 Animation_SVG_avec_SMIL Animation, Firefox 4, Gecko 2.0, HTML Animation, SVG, SVG Animation, XML
Editorial review completed.
3 Application d'effets SVG à du contenu HTML CSS, Guide, HTML, SVG
Les navigateurs modernes supportent le format SVG utilisant du CSS pour appliquer des effets graphiques au contenu HTML.
4 Content type SVG
No summary!
5 Element
<animate>, <animateColor>, <animateMotion>, <animateTransform>, <set>
6 &lt;defs&gt;
SVG permet la définition d'objets graphiques (génériques) qui peuvent utiliser pour une utilisation ultérieure. Autant qu'il est possible, cet usage est recommandé grâce aux propriétés offertes par l'élément defs.
Ainsi définir ces éléments au sein de l'élément defs promeut une meilleure compréhension du contenu SVG par l'homme et donc son accessibilité.

Les éléments définis grâce à defs ne sont jamais directement générés (au sens du rendu graphique : ils ne sont pas affichés). Vous devez utiliser l'élément <use> pour leur-s utilisation-s lorsque vous le souhaitez au sein du viewport.
7 &lt;foreignObject&gt; Element, Reference, Référence, SVG, Élément
L'élément foreignObject permet l'inclusion d'un espace de noms (namespace) XML étranger dont le contenu graphique est rendu par un agent utilisateur différent. Le contenu graphique étranger inclus est sujet à des modifications et incrustations en SVG.
8 &lt;g&gt; Element, Reference, Référence, SVG, SVG Conteneur, Élément
L'élément g est un conteneur utilisé pour grouper des objets. Les transformations appliquées à l'élément g sont reportées à tous ses éléments enfants. Les attributs appliqués sont également reportés aux éléments enfants. En plus, il peut être utilisé pour définir des objets complexes qui seront référencés ultérieurement avec l'élément <use>.
9 &lt;hkern&gt; Element, Police SVG, Reference, Référence, SVG, Élément
La distance horizontale entre deux glyphes peut être ajustée minutieusement avec l'élément hkern. Ce proccessus est appelé Crénage.
10 &lt;image&gt;
L'élément Image SVG () permet d'inclure une image matricielle dans un document SVG.
11 &lt;line&gt; Element, Graphisme, Reference, Référence, SVG, Élément
L'élément line est un élément de la catégorie des formes simples SVG, utilisé pour créer une ligne connectant deux points.
12 &lt;mask&gt; Element, Masque, NeedsCompatTable, SVG, SVG Container
En SVG, il est possible de définir des éléments ou objets graphiques <g> en tant que masque par rapport à l'objet courant en arrière plan. Un masque est défini par l'élément mask. Un masque est utilisé/référencé en utilisant l'attribut mask.
13 &lt;path&gt; SVG
L'élément path est l'élément générique pour définir une forme. Toutes les formes basiques peuvent aussi être faites à partir de path.
14 &lt;pattern&gt; Conteneur SVG, Eléments(2), SVG
Un pattern est utilisé pour remplir un objet ou la bordure d'un objet à l'aide d'un élément graphique prédéfini. Celui-ci peut être répété à des intervalles fixe le long des axes x et y afin de recouvrir la zone à peindre. Les patterns sont définis à l'aide de l'élément pattern et ensuite référencés à l'aide des propriétés fill et stroke sur l'élément graphique afin d'indiquer que celui-ci ou sa bordure doit être paint avec le pattern de référence.
15 &lt;polygon&gt; Element, Reference, SVG, SVG Graphique
L'élément <polygon>  délimite une forme close composée d'un groupe de plusieurs segments de droites. Le dernier point est relié au premier afin de fermer la forme et relier les traits entre deux. Pour créer une forme ouverte, voir l'élément <polyline>.
16 &lt;polyline&gt; Graphisme, Référence(2), SVG, Élément(2)
L'élément SVG <polyline> est une forme SVG basique qui crée des lignes entre plusieurs points. Un élément polyline est généralement utilisé pour créer des tracés ouverts car le dernier point n'est pas nécessairement connecté avec le premier. Lorsqu'on désire réaliser des formes fermées, on privilégiera l'élément <polygon>.
17 &lt;radialGradient&gt; Element, SVG, SVG Dégradé
Cet élément implémente l'interface SVGRadialGradientElement.
18 &lt;rect&gt; SVG, SVG Element, SVG Reference
L'élément rect est un élément de Formes basiques, utilisé pour dessiner des rectangles à partir de la  position d'un angle, de largeur et de la hauteur. Il peut aussi être utilisé avec des arrondis.
19 &lt;style&gt;
L'élément style permet d'intégrer directement des feuilles de style dans un contenu SVG. L'élément style de SVG possède les mêmes attributs que l'élément correspondant au format HTML (voir l'élément HTML <style>).
20 &lt;svg&gt;
L'élément svg peut être utilisé pour intégrer des fragment de code SVG à l'intérieur d'un document (par exemple, un document HTML). Ce fragment de code SVG dispose de son propre viewport et son propre système de coordonnée.
21 &lt;switch&gt;
L'élément switch évalue les attributs requiredFeatures, requiredExtensions et systemLanguage sur ses éléments enfants directs dans leur ordre respectif, puis traite et effectue un rendu du premier élément enfant sur lequel les attributs valent true. Tous les autres seront ignorés et donc non rendus. Si l'élément enfant est un élément conteneur tel que <g>, alors l'intégralité du contenu de cet enfant est soit traité/rendu soit ignoré/non rendu.
22 &lt;tspan&gt; Contenu texte SVG, Elément(3), Référence(2), SVG
A l'intérieur d'un élément <text>, les propriétés du texte et des polices, ainsi que la position actuelle du texte, peuvent être ajustées de façon absolue ou relative à partir des coodonnées précisées dans un élément tspan.
23 &lt;use&gt;
L'élement <use> permet la duplication de nodes (noeuds du DOM, NDR) définis par <defs> afin de les insérer par ailleurs. L'effet est le même que si les noeuds étaient créés dans une partie non-rendue (au sens de non-affichée) au sein du DOM puis "clonés"  là où est utilisé l'élément use tel que le permet les éléments de gabarit grâce à HTML5.

Puisque les noeuds clonés par use ne sont pas exposés, vous devez être attentif lorsque vous utilisez des règles de style CSS sur l'élément use et ses enfants "cachés". En effet les attributs CSS ne sont pas garantis d'être hérités lorsqu'ils seront clonés si vous n'explicitez pas correctement les héritages CSS.
24 a Element, SVG, SVG Conteneur, Élément
L'élément SVG Ancre () définit un hyperlien.
25 altGlyph Element, Reference, Référence, SVG, Élément
L'élément altGlyph permet la selection des glyphes utilisées pour restituer un caractère de donnée.
26 altGlyphDef Element, Reference, Référence, SVG, Élément
L'élément altGlyphDef défini une représentation de substitution pour les glyphes.
27 altGlyphItem Element, Reference, Référence, SVG, Élément
L'élément altGlyphItem fournit un ensemble de candidats pour la substitution de glyphes par l'élément <altGlyph>.
28 animate Animation SVG, Element, SVG, Élément
L'élément animate est mis à l'interieur d'un élément de forme et il définit la façon avec laquelle un attribut ou un élément change lors d'une animation. L'attribut sera progressivement mis à jour à partir de la valeur initiale et jusqu'à la valeur finale dans le temps spécifié.
29 animateColor Animation SVG, Element, SVG, Élément
L'élément animateColor spécifie une transformation de couleur à travers le temps.
30 animateMotion Animation SVG, Element, SVG, Élément
The animateMotion element causes a referenced element to move along a motion path.
31 animateTransform
L'élément animateTransform permet d'animer un élement soit par translation, mise à l'échelle, rotation et/ou inclinaison.
32 circle SVG, SVG Element, SVG Reference
L'élément circle est un élément de la catégorie des Formes simples, utilisé pour créer des cercles, en se basant sur un centre et un rayon.
33 desc
Tout élément graphique ou conteneur d'un dessin SVG peut contenir une chaîne de description desc, en texte brut. Quand la partie concernée apparaît à l'utilisateur sous forme d'image, l'élément desc n'est pas affiché. Néanmoins, quelques moteurs de rendu peuvent, par exemple, l'afficher sous forme d'infobulle. Des représentations alternatives sont possibles, visuelles ou auditives, en remplacement des éléments graphiques. Généralement, cet élément améliore l'accessibilité des documents SVG.
34 ellipse SVG, SVG Element, SVG Reference
L'élément SVG ellipse est un élément de Formes basiques,utilisé pour créer des ellipses basées sur un centre, un rayon x et un rayon y.
35 text Elément, Référence, SVG, SVG contenu de texte
L'élément SVG text définit un élément graphique contenant du texte. Notez  qu'il est possible d'y appliquer un dégradé, un motif, un tracé spécifique (clipping path), un masque ou un filtre.
36 title Balise title SVG, Element, Reference, Référence, SVG, SVG Description, SVG title, Élément
Tout élément graphique ou conteneur d'un dessin SVG peut contenir une chaîne de description title, en texte brut. Quand la partie concernée apparaît sous forme d'image à l'utilisateur, l'élément title n'est pas affiché. Néanmoins, quelques moteurs de rendu peuvent, par exemple, l'afficher sous forme d'infobulle. Des représentations alternatives sont possibles, visuelles ou auditives, en renplacement des éléments graphiques. Généralement, cet élément améliore l'accessibilité des documents SVG.
37 Index de la documentation SVG SVG
49 pages trouvées :
38 Namespaces Crash Course NeedsTranslation, SVG, TopicStub, XML
As an XML dialect, SVG is namespaced. It is important to understand the concept of namespaces and how they are used if you plan to author SVG content. Versions of SVG viewers prior to the release of Firefox 1.5 unfortunately paid scant attention to namespaces, but they are essential to multi-XML dialect supporting user agents such as Gecko-based browsers which must be very strict. Take some time to understand namespaces now and it will save you all sorts of headaches in future.
39 Exemple SVG, XML
Dans cet exemple, nous utilisons XHTML, SVG, JavaScript, et DOM pour animer un essaim de "particules". Ces particules sont gouvernées par deux principes simples. Premièrement, chaque particule essaye de se déplacer vers le curseur, et deuxièmement, chaque particule essaye de s'éloigner de la position moyenne des particules. Ces duex principes combinés, nous obtenons ce comportement naturel.
40 Référence des attributs SVG Fixit, NeedsHelp, SVG, SVG Reference, TopicStub
onbegin, onend, onload, onrepeat
41 Height Attribut SVG, SVG
Cet attribut indique une dimension verticale <length> dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la hauteur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément).
42 Width
Cet attribut indique une dimension horizontale <length> dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la largeur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément).
43 accent-height Attribut, NeedsCompatTable, NeedsExample, NeedsUpdate, Référence(2), SVG
L'attribut accent-height définit la distance entre l'origine et le haut des accents placés sur les caractères. Cette distance est mesurée dans le système de coordonnées de la police.
44 cx
Les éléments suivants peuvent utilisés l'attribut cx :
45 cy
Les éléments suivants peuvent utilisés l'attribut cy :
46 d
Cet attribut définit un chemin à suivre.
47 dx
L'attribut dx indique un décalage le long de l'axe x sur la position d'un élément ou de son contenu. Ce qui est exactement décalé dépend de l'élément sur lequel est positionné l'attribue.
48 seed Attribut SVG, Filtre
L'attribut seed représente le nombre palier pour la pseudo génération d'un nombre aléatoire via la primitive <feTurbulence>.
49 stroke Attribut SVG, SVG
L'attribut stroke définit la couleur de contour d'un élément graphique. La valeur par défaut de l'attribut stroke est  none.
50 stroke-dasharray Attribut SVG, SVG
L'attribut stroke-dasharray contrôle le motif et l'espacement entre les segments utilisés pour tracer le contour d'un élément via l'attribut stroke. L'attribut définit ainsi un motif constitué d'une suite de segments et de vides dont la forme se rapprochera d'une ligne de pointillés.
51 text-anchor Attribut SVG, NeedsCompatTable, SVG, SVG Attribute
L'attribut text-anchor est utilisé pour aligner un élément text par rapport à un point dont la position est définie au début "start", au milieu "middle" ou à la fin "end" de son contenu.
52 viewBox Attributs SVG, SVG
L'attribut viewBox permet de spécifier qu'un groupe d'éléments graphiques s'étire afin de s'adapter à un élément conteneur.
53 x Attribut, NeedsCompatTable, NeedsUpdate, SVG
L'attribut x indique une coordonnée en x pour le système des coordonnées de l'utilisateur. L'effet de cette coordonnée dépend de l'élément sur lequel elle est utilisée. La plupart du temps, elle représente l'abscisse du coin en haut à gauche de la région rectangulaire pour l'élément. Cet attribut a la même syntaxe que <length>
54 SVG dans Firefox SVG
Vous trouverez des exemples simples de syntaxe et d'utilisation de SVG sur la page W3C SVG test suite.
55 SVG en tant qu'image Images, SVG
Le format SVG peut être utilisé en tant qu'image dans de nombreux contextes. Beaucoup de navigateurs supportent les images au format SVG dans :
56 Sources des compatibilités Compatibilité, SVG
Les sources suivantes sont utilisées pour les tableaux de compatibilités des éléments SVG et de leurs attributs :
57 Tutoriel SVG NeedsContent, SVG, SVG:Tutoriel
logo_svg.pngSVG, pour Scalable Vector Graphics (ou encore Graphismes vectoriels redimensionnables), est un langage basé sur le XML du W3C qui permet de définir des éléments graphiques avec des balises. Ce langage est plus ou moins implémenté dans Firefox, Opera, les navigateurs à base de Webkit, Internet Explorer et les autres navigateurs Web.
58 Contenu embarqué dans le SVG
En plus des formes graphiques simples comme les rectangles et les cercles, le format SVG permet d'ajouter d'autres types de contenu aux images.
59 Découpages et masquages SVG, SVG:Tutoriel
Effacer une partie de ce que l'on a créé précédemment peut paraître maladroit, voire totalement contradictoire. Mais cela peut se révéler très utile, par exemple quand vous essayez de dessiner un demi-cercle.
60 Formes de base SVG
Il existe tout un ensemble de formes de base utilisées pour faire du dessin via SVG. Le but de ces formes assez transparent, si on regarde attentivement les noms de chaque élément. Des attributs permettent de configurer leur position et leur taille, mais vous pourrez retrouver les détails de chaque élément avec tous ses attributs à la page des références SVG. Nous nous contenterons ici de couvrir les fonctions de base qui nous sont nécessaires, car elles sont utilisées dans la plupart des documents SVG.
61 Introduction
lion_svg.pngSVG est un langage XML, assez similaire au XHTML. Ce langage peut être utilisé pour dessiner des choses complexes, comme le petit lion sur la gauche. Je l'ai dit en présentation de ce tutoriel, le SVG est un langage vectoriel. En gros, cela veut dire que l'image peut être transformée, rétrécie, agrandie, bref, manipulée, sans perte de qualité.
62 Paths SVG, Tutorial
L’élément <path> (en français chemin) est le plus versatile des éléments de la bibliothèque SVG des formes basiques. Vous pouvez l’utiliser pour créer des lignes, des courbes, des arcs et autres.
63 Polices SVG Police, SVG, font
Lorsque SVG a été spécifié, le support des polices d'écriture pour le web n'était pas répandu dans les navigateurs. Comme l'accès au fichier de la police adéquate est cependant crucial pour afficher correctement le texte, une technologie de description des polices a été ajoutée à SVG pour offrir cette capacité. Il n'a pas été conçu pour la compatibilité avec d'autres formats tels que le PostScript ou OTF, mais plutôt comme un moyen simple d'intégration des informations des glyphes en SVG lors de l'affichage.
64 Positionnement Débutant, SVG, SVG:Tutoriel
Pour chaque élément, SVG utilise un ensemble de coordonnées aussi appelé grille assez similaire à ce qui est utilisé dans canvas (et par tout un tas d'autres routines de dessin informatique). Dans le cas présent, le point en haut à gauche est considéré comme le point (0,0) ou point d'origine. Le positionnement est ensuite mesuré en pixel, depuis le coin supérieur gauche. Les valeurs positives de x vont vers la droite, les valeurs positives de y vont vers le bas. Notez que tout ceci est un peu contraire à la géométrie que l'on vous a enseignée. Ici, le positionnement fonctionne de la même manière que pour les éléments HTML.
65 Premiers pas SVG, SVG:Tutoriel
Jetez un coup d'oeil au morceau de code suivant :
66 SVG: Elément image Débutant, SVG, Tutoriel
L'élément SVG <image> permet d'afficher des images pixélisées au sein d'un objet SVG.
67 Tools for SVG
Maintenant que nous avons vu les notions de base en SVG, nous allons nous intéresser à quelques outils qui permettent d'éditer des fichiers SVG.
68 Transformations de base Intermediate, SVG, SVG:Tutoriel
Maintenant, nous sommes prêts à tordre nos images dans tous les sens. Mais avant toute chose, il faut vous présenter l'élément <g>. Cet assistant va vous permettre d'assigner des attributs à un ensemble d'éléments. En fait, c'est bien son seul rôle. Par exemple :

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : xdelatour
Dernière mise à jour par : xdelatour,