126 pages trouvées :
N° | Page | Ătiquettes et rĂ©sumĂ© |
---|---|---|
1 | SVG | 2D Graphics, Graphiques 2D, Référence(2), 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 |
Firefox 4 introduit le support pour les animations SVG en utilisant Synchronized Multimedia Integration Language (SMIL). SMIL permet: | ||
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 | Conception adaptative, Elements, Graphiques vectoriels, Références SVG, SVG, dessin |
<animate> , <animateColor> , <animateMotion> , <animateTransform> , <discard> , <mpath> , <set> |
||
6 | <clipPath> | Element, SVG |
L'Ă©lĂ©ment SVG <clipPath> dĂ©finit un dĂ©tourage. Ce dĂ©tourage peut par la suite ĂȘtre appliquĂ© sur une forme en utilisant la propriĂ©tĂ© clip-path . |
||
7 | <defs> | |
SVG permet de définir des objets graphiques (génériques) 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 . |
||
8 | <feBlend> | Element, SVG, SVG Filter |
La primitive de filtre SVG <feBlend> permet de combiner deux objets en utilisant un mode de fusion dĂ©finit, un peu de la mĂȘme maniĂšre que les logiciels de retouche d'image permettent de fusionner deux calques. Le mode Ă utiliser est dĂ©finit par l'attribut mode . |
||
9 | <feColorMatrix> | Element, SVG, SVG Filter |
La primitive de filtre SVG <feColorMatrix> change les couleurs d'un élément en fonction d'une matrice de transformation. Chaque pixel (représenté par un vecteur [R,G,B,A]) est multiplié par matrice pour créer une nouvelle couleur: |
||
10 | <feComponentTransfer> | Element, SVG, SVG Filter |
La primitive de filtre SVG <feComponentTransfer> permet d'effectuer un remappage des composantes de couleur (rouge, bleu, vert et alpha) de chaque pixel. Cela permet notamment de régler la luminosité, le constraste, la balance des couleurs ou encore le seuillage. |
||
11 | <feComposite> | Element, SVG, SVG Filter |
La primitive de filtre SVG <feComposite> effectue la combinaison de deux images en entrée, pixel par pixel, en utilisant une des opérations de composition de Porter-Duff: over , in , atop , out , xor , et lighter . Il est également possible d'appliquer une opération de type arithmetic (avec un résultat borné entre [0..1]). |
||
12 | <feConvolveMatrix> | Element, SVG, SVG Filter |
La primitive de filtre SVG <feConvolveMatrix> applique une matrice de convolution d'effet de filtre. Une convolution combine les pixels de l'image en entrée avec ceux voisins pour donner une image résultante. On peut obtenir une grande variété d'opérations d'imagerie à l'aide de convolutions, dont le flou, la détection de bord, la netteté, l'estampage et le chanfreinage. |
||
13 | <feDiffuseLighting> | Element, SVG, SVG Filter |
La primitive de filtre SVG <feDiffuseLighting> éclaire une image en utilisant son canal alpha en tant que relief. L'image résultante, qui est une image RGBA opaque, dépend de la couleur de la lumiÚre, de sa position et du relief de l'image en entrée. |
||
14 | <feDisplacementMap> | Element, SVG, SVG Filter |
La primitive de filtre SVG <feDisplacementMap> utilise les valeurs de pixel de l'image de in2 pour déplacer spatialement l'image de in . |
||
15 | <feDistantLight> | Element, SVG, SVG Filter, SVG Light Source |
La primitive de filtre <feDistantLight> définit une source de lumiÚre distante, que l'on place dans une primitive de filtre d'éclairage:<feDiffuseLighting> ou <feSpecularLighting> . |
||
16 | <feDropShadow> | Element, SVG, SVG Filter |
La primitive de filtre <feDropShadow> crée une ombre portée pour l'image en entrée. Il s'agit d'un raccourci, le résultat du filtre <feDropShadow> revient à appliquer les primitives suivantes: |
||
17 | <feFlood> | SVG, SVG Filter |
La primitive de filtre SVG <feFlood> remplit la région du filtre avec la couleur et l'opacité définies par flood-color et flood-opacity . |
||
18 | <feFuncA> | Element, SVG, SVG Filter |
La primitive de filtre SVG <feFuncA> doit ĂȘtre placĂ©e dans une balise <feComponentTransfer> et elle dĂ©finit la fonction de transfert pour le canal alpha (opacitĂ©) de l'image en entrĂ©e. |
||
19 | <feFuncB> | Element, SVG, SVG Filter |
La primitive de filtre SVG <feFuncB> doit ĂȘtre placĂ©e dans une balise <feComponentTransfer> et elle dĂ©finit la fonction de transfert pour le canal bleu de l'image en entrĂ©e. |
||
20 | <feFuncG> | Element, SVG, SVG Filter |
La primitive de filtre SVG <feFuncG> doit ĂȘtre placĂ©e dans une balise <feComponentTransfer> et elle dĂ©finit la fonction de transfert pour le canal vert de l'image en entrĂ©e. |
||
21 | <feFuncR> | Element, SVG, SVG Filter |
La primitive de filtre SVG <feFuncR> doit ĂȘtre placĂ©e dans une balise <feComponentTransfer> et elle dĂ©finit la fonction de transfert pour le canal rouge de l'image en entrĂ©e. |
||
22 | <feGaussianBlur> | Element, SVG, SVG Filter |
La primitive de filtre SVG <feGaussianBlur> applique un effet de flou à l'image en entrée. La quantité de flou est contrÎlée par stdDeviation . |
||
23 | <feImage> | SVG, SVG Filter |
La primitive de filtre SVG <feImage> extrait les données d'une image d'une source externe et retourne les pixels récupérés en sortie (autrement dit, si l'image récupérée est une image SVG, elle sortira comme raster) |
||
24 | <feMerge> | Element, SVG Filter |
La primitive de filtre SVG <feMerge> permet d'empiler les résultats de différentes opérations de filtre les uns par dessus les autres. La liste des images à empiler est définit par une liste d'élément <feMergeNode> à l'intérieur de la balise. Pour y parvenir, stocker au préalable les résultats des filtres voulus dans un buffer temporaire grùce à l'attribut result . |
||
25 | <feMergeNode> | Element, SVG, SVG Filter |
L'élément SVG feMergeNode se place à l'intérieur d'un élément <feMerge> . Il prend en entrée le résultat d'un filtre afin qu'il soit traité par son parent. |
||
26 | <feMorphology> | Element, SVG, SVG Filter |
La primitive de filtre SVG <feMorphology> est utilisée pour éroder ou dilater l'image en entrée. Cela permet d'appliquer des effets de mise en gras ou d'amincissement. |
||
27 | <feOffset> | SVG, SVG Filter |
La primitive de filtre <feOffset> permet de décaler l'image qu'elle a en entrée selon les attributs dx et dy . |
||
28 | <fePointLight> | Element, SVG, SVG Filter, SVG Light Source |
La primitive de filtre <fePointLight> définit une source de lumiÚre qui permet de créer un point lumineux. On la place dans une primitive de filtre d'éclairage: <feDiffuseLighting> or <feSpecularLighting> . |
||
29 | <feSpecularLighting> | Element, SVG, SVG Filter, SVG Light Source |
La primitive de filtre SVG <feSpecularLighting> éclaire une image en utilisant son canal alpha en tant que relief. L'image résultante est une image RGBA qui dépend de la couleur de la lumiÚre, de sa position et du relief de l'image en entrée. Le calcul de l'éclarage se fait suivant le modÚle d'illumination de Phong. |
||
30 | <feSpotLight> | Element, SVG, SVG Filter, SVG Light Source |
La primitive de filtre SVG <feSpotLight> définit une source de lumiÚre qui permet de créer un feu de projecteur. On la place dans une primitive de filtre d'éclairage: <feDiffuseLighting> ou <feSpecularLighting> . |
||
31 | <feTile> | Element, SVG, SVG Filter |
La primitive de filtre SVG <feTile> permet de remplir un rectangle cible avec un motif en mosaïque qui répÚte une image en entrée. L'effet est similaire à ce que l'on obtient avec <pattern> . |
||
32 | <feTurbulence> | Element, SVG, SVG Filter |
La primitive de filtre SVG <feTurbulence> crée une image en utilisant la fonction de turbulence de Perlin. Cela permet de créer des textures artificielles comme des nuages, du marbre, etc. |
||
33 | <filter> | Element, SVG |
L'Ă©lĂ©ment SVG <filter> sert de conteneur pour dĂ©finir des opĂ©rations de filtre. Il n'est jamais affichĂ© par lui-mĂȘme, il est rĂ©fĂ©rencĂ© en utilisant l'attribut filter sur un Ă©lĂ©ment SVG ou via la propriĂ©tĂ© CSS filter . |
||
34 | <foreignObject> | Element, Reference, SVG |
L'élément <foreignObject> permet d'inclure des éléments d'un espace de noms XML différent à l'intérieur du SVG. Dans le contexte d'un navigateur, il s'agit généralement d'inclure du XHTML/HTML. |
||
35 | <g> | Element, Reference, SVG, SVG Conteneur |
L'élément g est un conteneur utilisé pour grouper des objets. |
||
36 | <hkern> | Element, Police SVG, Reference, RĂ©fĂ©rence(2), SVG, ĂlĂ©ment(2) |
La distance horizontale entre deux glyphes peut ĂȘtre ajustĂ©e minutieusement avec l'Ă©lĂ©ment hkern. Ce proccessus est appelĂ© CrĂ©nage. | ||
37 | <image> | |
L'élément Image SVG ( |
||
38 | <line> | Element, Graphisme, Reference, RĂ©fĂ©rence(2), SVG, ĂlĂ©ment(2) |
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. |
||
39 | <linearGradient> | Element, Reference, SVG, SVG Gradient |
L'Ă©lĂ©ment <linearGradient> permet de dĂ©finir des dĂ©gradĂ©s linĂ©aires, qui pourront ĂȘtre utilisĂ©s comme remplissage ou contour des Ă©lĂ©ments SVG. |
||
40 | <marker> | SVG, SVG Element |
L'Ă©lĂ©ment <marker> dĂ©finit un Ă©lĂ©ment graphique qui pourra ĂȘtre utilisĂ© pour dessiner des pointes de flĂšches ou des polymarqueurs sur un Ă©lĂ©ment <path> , <line> , <polyline> ou <polygon> . |
||
41 | <mask> | Element, Masque, NeedsCompatTable, SVG, SVG Container |
L'Ă©lĂ©ment <mask> dĂ©finit un masque alpha. Ce masque peut par la suite ĂȘtre appliquĂ© sur une forme en utilisant la propriĂ©tĂ© mask . |
||
42 | <metadata> | Element, SVG, SVG Description |
L'élément SVG <metadata> permet d'ajouter des metadonnées au contenu SVG. Des metadonnées sont des données structurées qui donnent des informations sur le contenu du document. La balise <metadata> doit contenir des éléments d'un autre namespaces XML tel que RDF, FOAF, etc. |
||
43 | <mpath> | Element, SVG, SVG Animation |
L'élément <mpath> se place dans un élément <animateMotion> , il permet de référencer un élément <path> pour définir le chemin utilisé par l'animation. |
||
44 | <path> | 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 . |
||
45 | <pattern> | 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. |
||
46 | <polygon> | 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> . |
||
47 | <polyline> | 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> . |
||
48 | <radialGradient> | Element, SVG, SVG Dégradé |
Cet élément implémente l'interface SVGRadialGradientElement . |
||
49 | <rect> | 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. |
||
50 | <style> | |
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> ). |
||
51 | <svg> | |
L'Ă©lĂ©ment svg peut ĂȘtre utilisĂ© pour intĂ©grer des fragments de code SVG Ă l'intĂ©rieur d'un document (par exemple, un document HTML). Ce fragment de code SVG dispose de ses propres viewport et systĂšme de coordonnĂ©e. |
||
52 | <switch> | Element, SVG, SVG Conteneur |
L'élément switch évalue les attributs requiredFeatures , requiredExtensions et systemLanguage de ses éléments enfants directs, dans l'ordre, puis affiche le premier élément pour lequel les attributs renvoient true . Tous les autres seront ignorés et donc non affichés. 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. |
||
53 | <symbol> | SVG, SVG Conteneur |
L'Ă©lĂ©ment <symbol> est utilisĂ© pour dĂ©finir un template de graphique pouvant ĂȘtre instanciĂ© par un Ă©lĂ©ment <use> . |
||
54 | <tspan> | 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 . |
||
55 | <use> | |
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. |
||
56 | a | Element, SVG, SVG Conteneur |
L'élément SVG <a> crée un hyperlien vers d'autres pages web, fichiers, emplacements dans la page en cours, adresses email, ou toute autre URL. |
||
57 | altGlyph | Element, Reference, RĂ©fĂ©rence(2), SVG, ĂlĂ©ment(2) |
L'élément altGlyph permet la selection des glyphes utilisées pour restituer un caractÚre de donnée. |
||
58 | altGlyphDef | Element, Reference, RĂ©fĂ©rence(2), SVG, ĂlĂ©ment(2) |
L'élément altGlyphDef défini une représentation de substitution pour les glyphes. |
||
59 | altGlyphItem | Element, Reference, RĂ©fĂ©rence(2), SVG, ĂlĂ©ment(2) |
L'élément altGlyphItem fournit un ensemble de candidats pour la substitution de glyphes par l'élément <altGlyph> . |
||
60 | animate | Animation SVG, Element, SVG |
L'élément SVG <animate> est utilisé pour animer un attribut ou une propriété d'un élément au fil du temps. Il est normalement inséré dans l'élément cible ou référencé par l'attribut href de l'élément. |
||
61 | animateColor | Animation SVG, Element, SVG |
L'élément <animateColor> spécifie une transformation de couleur à travers le temps. |
||
62 | animateMotion | Animation SVG, Element, SVG |
L'élément <animateMotion> permet d'animer un élément le long d'un chemin donné. |
||
63 | animateTransform | Element, SVG, SVG Animation |
L'élément <animateTransform> permet d'animer un élement en appliquant une transformation: translation, mise à l'échelle, rotation et/ou inclinaison. |
||
64 | 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. |
||
65 | desc | Element, SVG, SVG Description |
Tout élément graphique ou conteneur dans un dessin SVG peut définir une description en utilisant l'élément <desc> , cette description ne peut contenir que du texte. |
||
66 | 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. |
||
67 | text | Elément(3), Référence(2), 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. |
||
68 | title | Element, Reference, SVG, SVG Description |
Tout élément graphique ou conteneur dans un dessin SVG peut définir un titre en utilisant un élément <title> , ce titre ne peut contenir que du texte. |
||
69 | Index de la documentation SVG | SVG |
68 pages trouvées : | ||
70 | 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. | ||
71 | 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. | ||
72 | Référence des attributs SVG | Landing, NeedsHelp, SVG, SVG Attribute, SVG Reference, TopicStub |
Les Ă©lĂ©ments SVG peuvent ĂȘtre modifiĂ©s en utilisant des attributs qui spĂ©cifient comment les Ă©lĂ©ments doivent ĂȘtre traitĂ©s ou prĂ©sentĂ©s. | ||
73 | Attributs SVG de base | |
Les attributs SVG de base sont tous les attributs communs pouvant ĂȘtre spĂ©cifiĂ©s sur n'importe quel Ă©lĂ©ment SVG. | ||
74 | Attributs SVG de présentation | |
Les attributs SVG de prĂ©sentation sont des propriĂ©tĂ©s CSS pouvant ĂȘtre utilisĂ©es comme attributs sur les Ă©lĂ©ments SVG | ||
75 | Attributs SVG de style | |
Les attributs SVG de style sont tous les attributs qui peuvent ĂȘtre spĂ©cifiĂ©s sur tout Ă©lĂ©ment SVG pour appliquer des styles CSS. | ||
76 | Attributs SVG de traitement conditionnel | |
Les attributs SVG de traitement conditionnel sont tous les attributs qui peuvent ĂȘtre spĂ©cifiĂ©s sur des Ă©lĂ©ments SVG pour contrĂŽler si l'Ă©lĂ©ment sur lequel il s'applique doit s'afficher ou non. | ||
77 | Attributs d'événements des SVG | Event, SVG |
Tout attribut d'événement a un nom qui commence par "on" suivit du nom de l'événement auquel il est rattaché. Ces attributs spécifient quel script exécuter lorsque l'événement du type donné est déclenché sur l'élément. | ||
78 | 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). |
||
79 | 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). |
||
80 | 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. |
||
81 | clip-path | SVG, SVG Attribute |
L'attribut clip-path permet d'appliquer un détourage à un élément. |
||
82 | color | SVG, SVG Attribute |
L'attribut color est utilisé pour définir indirectement une valeur potentielle (currentColor ) pour les attributs fill , stroke , stop-color , flood-color et lighting-color . |
||
83 | cx | SVG, SVG Attribute |
L'attribut cx définit la coordonnée de l'axe x pour le point central d'un élément. |
||
84 | cy | SVG, SVG Attribute |
L'attribut cy définit la coordonnée de l'axe y pour le point central d'un élément. |
||
85 | d | |
Cet attribut définit un chemin à suivre. | ||
86 | dx | SVG, SVG Attribute |
L'attribut dx indique un décalage sur l'axe x de la position d'un élément ou de son contenu. |
||
87 | dy | SVG, SVG Attribute |
L'attribut dy indique un décalage sur l'axe y de la position d'un élément ou de son contenu. |
||
88 | fill | SVG, SVG Attribute |
L'attribut fill a deux significations différentes: 1. pour les formes et le texte, il définit le remplissage (couleur, dégradé, motif, etc); 2. pour les animations, il définit l'état final. |
||
89 | fill-opacity | SVG, SVG Attribute |
L'attribut fill-opacity définit l'opacité du remplissage (couleur, dégradé, motif, etc) appliqué à une forme. |
||
90 | fill-rule | SVG, SVG Attribute |
L'attribut fill-rule définit l'algorithme à utiliser pour déterminer les parties sont considérées à l'intérieur de la forme. |
||
91 | in | SVG, SVG Attribute, SVG Filter |
L'attribut in identifie l'entrée pour la primitive de filtre donnée. |
||
92 | preserveAspectRatio | SVG, SVG Attribute |
L'attibut preserveAspectRatio indique comment un élément est mis à l'échelle lorsque le ratio largeur:hauteur du viewBox est différent du ratio de la zone d'affichage (définit par les attributs width et height). |
||
93 | 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> . |
||
94 | stroke | Attribut SVG, SVG |
L'attribut stroke définit la couleur (ou n'importe quelle méthode de remplissage, comme un gradient ou motif) a utiliser pour dessiner le contour d'une forme SVG. |
||
95 | 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. |
||
96 | stroke-dashoffset | SVG, SVG Attribute |
L'attribut stroke-dashoffset décale la position de départ des pointillés sur les lignes SVG. |
||
97 | stroke-linecap | SVG, SVG Attribute |
L'attribut stroke-linecap définit la forme de la fin des lignes SVG. |
||
98 | stroke-linejoin | SVG, SVG Attribute |
L'attribut stroke-linejoin définit la maniÚre de dessiner la liaison entre deux segments de ligne. |
||
99 | stroke-miterlimit | SVG, SVG Attribute |
L'attribut stroke-miterlimit définit la limite du rapport entre la longueur du coin et la valeur de stroke-width utilisée pour dessiner la liaison entre deux segments de ligne. Quand la limite est dépassée, la liaison passe du type miter (pointu) au type bevel (biseauté). |
||
100 | stroke-opacity | SVG, SVG Attribute |
L'attribut stroke-opacity définit l'opacité du contour (couleur, dégradé, motif, etc) appliqué à une forme SVG. |
||
101 | stroke-width | SVG, SVG Attribute |
L'attribut stroke-width définit l'épaisseur du contour à appliquer à une forme SVG. |
||
102 | style | Reference, SVG, SVG Attribute |
L'attribut style définit les informations de style pour son élément. Il fonctionne de maniÚre identique à l'attribut style en HTML. |
||
103 | 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. |
||
104 | 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. |
||
105 | 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> |
||
106 | SVG dans Firefox | SVG |
Vous trouverez des exemples simples de syntaxe et d'utilisation de SVG sur la page W3C SVG test suite. | ||
107 | 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 : | ||
108 | 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 : | ||
109 | Tutoriel SVG | NeedsContent, SVG, SVG:Tutoriel |
SVG, 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. | ||
110 | 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. | ||
111 | 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. | ||
112 | Filtres | SVG, SVG:Tutoriel |
Dans certaines situations, les formes de base n'offrent pas la flexibilitĂ© nĂ©cessaire pour obtenir un certain effet. Par exemple, les ombres portĂ©es ne peuvent raisonnablement pas ĂȘtre crĂ©es avec des gradients. Les filtres sont des mĂ©canismes SVG qui permettent de crĂ©er effets plus sophistiquĂ©s. | ||
113 | 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. | ||
114 | Gradients SVG | SVG, SVG:Tutoriel |
Probablement plus excitant qu'un simple remplissage et contour, est le fait de pouvoir créer et appliquer des dégradés comme remplissage ou contour. | ||
115 | Introduction | SVG, SVG:Tutoriel |
![]() |
||
116 | Introduction Ă SVG dans HTML | SVG |
No summary! | ||
117 | Motifs | SVG, SVG:Tutoriel |
Les motifs (patterns en anglais) sont sans aucun doute les types de remplissages les plus complexes Ă utiliser en SVG. Ce sont Ă©galement des outils trĂšs puissants, ils mĂ©ritent donc d'ĂȘtre abordĂ©s pour que vous en connaissiez les fondamentaux. Comme les dĂ©gradĂ©s, l'Ă©lĂ©ment <pattern> doit ĂȘtre placĂ© dans la section <defs> du fichier SVG. |
||
118 | Outils pour 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. | ||
119 | Paths | SVG, SVG:Tutoriel |
LâĂ©lĂ©ment <path> (chemin en français) est le plus versatile des Ă©lĂ©ments de la bibliothĂšque SVG parmi les formes basiques. Vous pouvez lâutiliser pour crĂ©er des lignes, des courbes, des arcs et autres. |
||
120 | 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é. Elle n'a pas été conçue 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. | ||
121 | Positionnement | Débutant, SVG, SVG:Tutoriel |
![]() |
||
122 | Premiers pas | SVG, SVG:Tutoriel |
Jetez un coup d'oeil au morceau de code suivant : | ||
123 | Remplissages et contours | SVG, SVG:Tutoriel |
Il y a différentes maniÚres de colorer des formes: utiliser différents attributs SVG sur l'objet, utiliser du CSS en ligne, une section CSS ou un fichier CSS externe. La plupart des SVG que vous trouverez sur le Web utilisent du CSS en ligne, mais il y a des avantages et inconvénients pour chaque maniÚre. | ||
124 | 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. |
||
125 | Textes | SVG, SVG:Tutoriel |
126 | 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 : |
||