Index de la documentation SVG

127 pages trouvées :

Page Étiquettes et résumé
1 SVG Graphiques 2D, Images, Images 2D, Images Extensibles, Images Vectorielles, Reference, SVG, Web, l10n:priority, Ícones
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'HTML est au texte.
2 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.
3 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. Ci-dessous, la liste de tous les attributs disponibles en SVG ainsi que des liens vers leur documentation pour vous aider à apprendre sur quels éléments ils s'appliquent et comment ils fonctionnent.
4 accent-height Attribut, NeedsCompatTable, NeedsExample, NeedsUpdate, Reference, 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.
5 clip-path SVG, SVG Attribute
L'attribut clip-path permet d'appliquer un détourage à un élément.
6 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.
7 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.
8 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.
9 cx SVG, SVG Attribute
L'attribut cx définit la coordonnée de l'axe x pour le point central d'un élément.
10 cy SVG, SVG Attribute
L'attribut cy définit la coordonnée de l'axe y pour le point central d'un élément.
11 d Attribut SVG, SVG
L'attribut d définit un tracé à dessiner.
12 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.
13 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.
14 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.
15 fill-opacity SVG, SVG Attribute
L'attribut fill-opacity définit l'opacité du remplissage (couleur, dégradé, motif, etc) appliqué à une forme.
16 fill-rule SVG, SVG Attribute
L'attribut fill-rule définit l'algorithme à utiliser pour déterminer les parties qui sont considérées à l'intérieur de la forme.
17 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.
18 Height Attribut SVG, SVG
« SVG Attribute reference home
19 in SVG, SVG Attribute, SVG Filter
« SVG Attribute reference home
20 mask
L'attribut mask est un attribut de présentation principalement utilisé pour appliquer un trou (défini par un élément mask) sur l'élément qui possède cet attribut.
21 points
L'attribut point défini une liste de points. Chaque point est défini par deux nombres représentant les coordonnées X et Y dans le système de coordonnées de l'utilisateur. Si une coordonnées est dépareillée elle sera ignorée.
22 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
23 preserveAspectRatio SVG, SVG Attribute
L'attibut preserveAspectRatio indique comment un élément est mis à l'échelle lorsque le ratio largeur:hauteur de la viewBox est différent du ratio de la zone d'affichage (définit par les attributs width et height).
24 seed Attribut SVG, Filtre
« Page de référence des attributs SVG
25 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. 
26 stroke-dashoffset SVG, SVG Attribute
L'attribut stroke-dashoffset décale la position de départ des pointillés sur les lignes SVG.
27 stroke-linecap SVG, SVG Attribute
L'attribut stroke-linecap définit la forme de la fin des lignes SVG.
28 stroke-linejoin SVG, SVG Attribute
L'attribut stroke-linejoin définit la manière de dessiner la liaison entre deux segments de ligne.
29 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é).
30 stroke-opacity SVG, SVG Attribute
L'attribut stroke-opacity définit l'opacité du contour (couleur, dégradé, motif, etc) appliqué à une forme SVG.
31 stroke-width SVG, SVG Attribute
L'attribut stroke-width définit l'épaisseur du contour à appliquer à une forme SVG.
32 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.
33 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.
34 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.
35 text-anchor SVG, SVG Attribute
L'attribut text-anchor est utilisé pour aligner (alignement de début, de milieu ou de fin) une chaîne de texte préformaté ou un texte auto-enveloppé dont la zone d'enveloppement est déterminée à partir de la propriété inline-size par rapport à un point donné. Elle ne s'applique pas aux autres types de texte auto-enveloppé. Pour ces cas, vous devez utiliser text-align. Pour le texte à plusieurs lignes, l'alignement a lieu pour chaque ligne.
36 transform Attribut, SVG
L'attribut transform définit une liste de définitions de transformation qui sont appliquées à l'élément ainsi qu'à ses éléments fils.
37 viewBox Attributs SVG, SVG
« Sommaire de la référence des attributs SVG
38 Width
« SVG Attribute reference home
39 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>
40 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 :
41 Element Conception adaptative, Elements, Graphiques vectoriels, Références SVG, SVG, dessin, l10n:priority
Les dessins et les images SVG sont créés à l'aide d'un large éventail d'éléments dédiés à la construction, au dessin et à la mise en page d'images vectorielles et de diagrammes. Vous trouverez ici la documentation de référence pour chacun des éléments SVG.
42 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.
43 altGlyph Element, Reference, SVG
L'élément altGlyph permet la selection des glyphes utilisées pour restituer un caractère de donnée.
 
44 altGlyphDef Element, Reference, SVG
L'élément altGlyphDef défini une représentation de substitution pour les glyphes.
45 altGlyphItem Element, Reference, SVG
L'élément altGlyphItem fournit un ensemble de candidats pour la substitution de glyphes par l'élément altGlyph.
46 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.
47 animateColor Animation SVG, Element, SVG
Cet élément est déprécié depuis SVG 1.1 Deuxième édition et peut etre retiré dans une prochaine version de SVG. Il ne fournis pas de fonctionnalités non disponible en utilisant l'élément animate. Il n'est pas implémenté dans Firefox ni dans Internet Explorer. Il est préférable d'utiliser l'élément animate à la place.
48 animateMotion Animation SVG, Element, SVG
L'élément <animateMotion> permet d'animer un élément le long d'un chemin donné.
49 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.
50 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.
51 <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.
52 <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.
53 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.
54 ellipse SVG, SVG Element, SVG Reference
L'élément ellipse est une forme basique SVG,utilisé pour créer des ellipses basées sur un centre, et ses deux rayons x et y.
55 <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.
56 <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:
57 <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.
58 <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]).
59 <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.
60 <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.
61 <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.
62 <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.
63 <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:
64 <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.
65 <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.
66 <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.
67 <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.
68 <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.
69 <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.
70 <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)
71 <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.
72 <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.
73 <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.
74 <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.
75 <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.
76 <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'éclairage se fait suivant le modèle d'illumination de Phong.
77 <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.
78 <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.
79 <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.
80 <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.
81 <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.
82 <g> Element, Reference, SVG, SVG Conteneur
L'élément g est un conteneur utilisé pour grouper des objets.
83 <hkern> Element, Police SVG, Reference, SVG
La distance horizontale entre deux glyphes peut être ajustée minutieusement avec l'élément hkern. Ce proccessus est appelé Crénage.
84 <image>
L'élément Image SVG (<image>) permet d'inclure une image matricielle dans un document SVG.
85 <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.
86 <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.
87 <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.
88 <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.
89 <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 namespace XML tel que RDF, FOAF, etc.
90 <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.
91 <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.
92 <pattern> Element, SVG, SVG Container
L'élément <pattern> définit un objet graphique qui peut être redessiné à des intervalles de coordonnées x et y répétés ("en mosaïque") pour couvrir une surface.
93 <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 de relier les traits entre deux. Pour créer une forme ouverte, voir l'élément polyline.
94 <polyline> Element, Graphisme, Reference, SVG
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.
95 <radialGradient> Element, SVG, SVG Dégradé
Cet élément implémente l'interface SVGRadialGradientElement.
96 <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.
97 <stop>
L'élément SVG <stop> définit une couleur supplémentaire dans une palette à utiliser pour un dégradé, et est contenu dans un élément linearGradient ou radialGradient.
98 <style> Element, Reference, SVG
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).
99 <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.
100 <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.
101 <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.
102 text Element, Reference, 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.
103 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.
104 <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.
105 <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.
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 Animation SVG avec SMIL Animation, Firefox 4, Gecko 2.0, HTML Animation, SVG, SVG Animation, XML
Bien que Chrome 45 déprécie SMIL en faveur des animations CSS et des animations Web, les développeurs Chrome ont depuis suspendu cette décision.
108 SVG en tant qu'image Images, SVG
Le format SVG peut être utilisé en tant qu'image dans de nombreux contextes. Beaucoup de navigateurs prennent en charge les images au format SVG avec :
109 Tutoriel SVG Intermediate, NeedsContent, NeedsHelp, NeedsUpdate, SVG, SVG:Tutorial
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 Formes de base
Il existe tout un ensemble de formes de base utilisées pour faire du dessin via SVG. Le but de ces formes s'avère 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.
111 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 :
112 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.
113 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.
114 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.
115 Premiers pas SVG, SVG:Tutoriel
Commençons directement avec un exemple pratique. Jetez un coup d'œil au morceau de code suivant :
116 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.
117 Introduction SVG, SVG:Tutoriel
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é.
118 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.
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 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.
121 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.
122 SVG et CSS CSS, CSS:Getting_Started, Example, Guide, Intermediate, NeedsUpdate, SVG, Web
Nous allons voir par la suite un exemple que vous pourrez copier pour l'exécuter dans votre navigateur (à la condition que celui-ci soit compatible avec SVG).
123 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.
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 Introduction à SVG dans HTML SVG
Cet article et son exemple associé montrent comment utiliser du SVG en ligne pour fournir une image de fond à un formulaire. Il montre comment JavaScript et CSS peuvent servir à manipuler l'image comme vous le feriez avec le XHTML dans un script. Notez que l'exemple ne fonctionnera que dans des navigateurs supportant XHTML (pas HTML) et l'intégration SVG.
126 Textes SVG, SVG:Tutoriel
Lorsqu'on parle de texte en SVG, on doit différencier deux choses pratiquement complètement séparées: 1. l'inclusion et l'affichage de texte dans une image, 2. les polices SVG. Un article séparé sera dédié aux polices SVG, celui-ci se concentrera uniquement sur le fait d'insérer du texte.
127 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.