Found 383 pages:
# | Page | Tags and summary |
---|---|---|
1 | SVG: Scalable Vector Graphics | 2D Graphics, Graphics, Icons, Images, Reference, Responsive Design, SVG, Scalable Graphics, Scalable Images, Vector Graphics, Web, l10n:priority |
Scalable Vector Graphics (SVG) are an XML-based markup language for describing two-dimensional based vector graphics.XML | ||
2 | Applying SVG effects to HTML content | CSS, Guide, HTML, SVG |
Modern browsers support using SVG within CSS styles to apply graphical effects to HTML content. | ||
3 | Compatibility sources | SVG |
The following sources are used for the compatibility tables on SVG elements and attributes: | ||
4 | Content type | NeedsTechnicalReview, SVG, Types, data types |
SVG makes use of a number of data types. This article lists these types along with their syntax and descriptions of what they're used for. | ||
5 | Linking | Guide, SVG |
The target attribute on the SVG <a> element doesn't work in Mozilla Firefox 1.5. When SVG documents are embedded within a parent HTML document using the tag: |
||
6 | Namespaces crash course | SVG, 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 the future. | ||
7 | Example | SVG, XML |
In this example, we use XHTML, SVG, JavaScript, and the DOM to animate a swarm of "motes". These motes are governed by two simple principles. First, each mote tries to move towards the mouse cursor, and second each mote tries to move away from the average mote position. Combined, we get this very natural-looking behavior. | ||
8 | Other Resources | Reference, SVG |
Here is a list of additional resources on SVG: | ||
9 | Project | SVG |
No summary! | ||
10 | Replaced Element | SVG |
This page was auto-generated because a user created a sub-page to this page. | ||
11 | SVG 1.1 Support in Firefox | Firefox, SVG |
You can find some basic examples of SVG syntax and usage in the W3C SVG test suite. | ||
12 | SVG 2 support in Mozilla | Firefox, SVG |
SVG 2 is the next major version of the SVG standard, which is a complete rework of the SVG 1.2 draft. | ||
13 | SVG Attribute reference | Drawing, Landing, NeedsHelp, Overview, Responsive Design, SVG, SVG Attribute, SVG Reference, Vector Graphics |
SVG elements can be modified using attributes that specify details about exactly how the element should be handled or rendered. | ||
14 | SVG Conditional Processing Attributes | Intermediate, NeedsExample, Property, Reference, SVG |
The SVG conditional processing attributes are all the attributes that can be specified on some SVG elements to control whether or not the element on which it appears should be rendered. | ||
15 | SVG Core Attributes | Attribute, Intermediate, Reference, SVG |
The SVG core attributes are all the common attributes that can be specified on any SVG element. | ||
16 | SVG Event Attributes | Advanced, Attribute, Draft, Landing, NeedsUpdate, SVG |
Event attributes always have their name starting with "on" followed by the name of the event for which they are intended. They specifies some script to run when the event of the given type is dispatched to the element on which the attributes are specified. | ||
17 | SVG Presentation Attributes | Attribute, Beginner, Draft, Reference, SVG |
SVG presentation attributes are CSS properties that can be used as attributes on SVG elements. | ||
18 | SVG Styling Attributes | Attribute, Beginner, NeedsExample, Reference, SVG |
The SVG styling attributes are all the attributes that can be specified on any SVG element to apply CSS styling effects. | ||
19 | accent-height | Deprecated, NeedsExample, SVG, SVG Attribute |
The accent-height attribute defines the distance from the origin to the top of accent characters, measured by a distance within the font coordinate system. |
||
20 | accumulate | NeedsCompatTable, NeedsExample, SVG, SVG Attribute |
This attribute controls whether or not the animation is cumulative. | ||
21 | additive | NeedsCompatTable, NeedsExample, SVG, SVG Attribute |
No summary! | ||
22 | alignment-baseline | SVG, SVG Attribute |
The alignment-baseline attribute specifies how an object is aligned with respect to its parent. This property specifies which baseline of this element is to be aligned with the corresponding baseline of the parent. For example, this allows alphabetic baselines in Roman text to stay aligned across font size changes. It defaults to the baseline with the same name as the computed value of the alignment-baseline property. |
||
23 | alphabetic | Deprecated, SVG, SVG Attribute |
The alphabetic attribute defines the lower baseline of a font. It has the same syntax and semantics as the baseline descriptor within an @font-face . |
||
24 | amplitude | NeedsCompatTable, SVG, SVG Attribute |
The amplitude attribute controls the amplitude of the gamma function of a component transfer element when its type attribute is gamma . |
||
25 | arabic-form | Deprecated, SVG, SVG Attribute |
The arabic-form attribute indicates which of the four possible forms an Arabic glyph represents. |
||
26 | ascent | Deprecated, NeedsExample, SVG, SVG Attribute |
The ascent attribute defines the maximum unaccented height of the font within the font coordinate system. |
||
27 | attributeName | NeedsCompatTable, SVG, SVG Attribute |
The attributeName attribute indicates the name of the CSS property or attribute of the target element that is going to be changed during an animation. |
||
28 | attributeType | Deprecated, NeedsCompatTable, SVG, SVG Attribute |
The attributeType attribute specifies the namespace in which the target attribute and its associated values are defined. |
||
29 | azimuth | Filters, SVG, SVG Attribute |
The azimuth attribute specifies the direction angle for the light source on the XY plane (clockwise), in degrees from the x axis. |
||
30 | baseFrequency | Filters, SVG, SVG Attribute |
The baseFrequency attribute represents the base frequency parameter for the noise function of the <feTurbulence> filter primitive. |
||
31 | baseProfile | Deprecated, SVG, SVG Attribute |
The baseProfile attribute describes the minimum SVG language profile that the author believes is necessary to correctly render the content. The attribute does not specify any processing restrictions; It can be considered metadata. |
||
32 | baseline-shift | NeedsExample, SVG, SVG Attribute |
The baseline-shift attribute allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. The shifted object might be a sub- or superscript. |
||
33 | bbox | Deprecated, SVG, SVG Attribute |
The bbox attribute defines the maximal bounding box of a font. |
||
34 | begin | NeedsCompatTable, SVG, SVG Attribute |
The begin attribute defines when an animation should begin or when an element should be discarded. |
||
35 | bias | Filters, NeedsExample, SVG, SVG Attribute |
The bias attribute shifts the range of the filter. After applying the kernelMatrix of the <feConvolveMatrix> element to the input image to yield a number and applied the divisor attribute, the bias attribute is added to each component. This allows representation of values that would otherwise be clamped to 0 or 1. |
||
36 | by | SVG, SVG Attribute |
The by attribute specifies a relative offset value for an attribute that will be modified during an animation. |
||
37 | calcMode | NeedsCompatTable, NeedsExample, SVG, SVG Attribute |
The calcMode attribute specifies the interpolation mode for the animation. |
||
38 | cap-height | Deprecated, SVG, SVG Attribute |
The cap-height attribute defines the height of uppercase glyphs of the font within the font coordinate system. |
||
39 | class | Reference, SVG, SVG Attribute |
Assigns a class name or set of class names to an element. You may assign the same class name or names to any number of elements, however, multiple class names must be separated by whitespace characters. | ||
40 | clip | SVG, SVG Attribute |
The clip attribute is a presentation attribute defining the visible region of an element. |
||
41 | clip-path | SVG, SVG Attribute |
The clip-path presentation attribute defines or associates a clipping path with the element it is related to. |
||
42 | clip-rule | SVG, SVG Attribute |
The clip-rule attribute only applies to graphics elements that are contained within a <clipPath> element. The clip-rule attribute basically works as the fill-rule attribute, except that it applies to <clipPath> definitions. |
||
43 | clipPathUnits | SVG, SVG Attribute |
The clipPathUnits attribute indicates which coordinate system to use for the contents of the <clipPath> element. |
||
44 | color | SVG, SVG Attribute |
The color attribute is used to provide a potential indirect value, currentcolor , for the fill , stroke , stop-color , flood-color , and lighting-color attributes. |
||
45 | color-interpolation | NeedsExample, SVG, SVG Attribute |
The color-interpolation attribute specifies the color space for gradient interpolations, color animations, and alpha compositing. |
||
46 | color-interpolation-filters | NeedsExample, SVG, SVG Attribute |
The color-interpolation-filters attribute specifies the color space for imaging operations performed via filter effects. |
||
47 | color-profile | Deprecated, NeedsExample, SVG, SVG Attribute |
The color-profile attribute is used to define which color profile a raster image included through the <image> element should use. |
||
48 | color-rendering | SVG, SVG Attribute |
The color-rendering attribute provides a hint to the SVG user agent about how to optimize its color interpolation and compositing operations. |
||
49 | contentScriptType | Deprecated, SVG, SVG Attribute |
The contentScriptType attribute specifies the default scripting language for the given document fragment on the <svg> element. |
||
50 | contentStyleType | Deprecated, SVG, SVG Attribute |
The contentStyleType attribute specifies the style sheet language for the given document fragment on the <svg> element. |
||
51 | cursor | SVG, SVG Attribute |
The cursor attribute specifies the mouse cursor displayed when the mouse pointer is over an element. |
||
52 | cx | SVG, SVG Attribute |
The cx attribute define the x-axis coordinate of a center point. |
||
53 | cy | SVG, SVG Attribute |
The cy attribute define the y-axis coordinate of a center point. |
||
54 | d | SVG, SVG Attribute |
The d attribute defines a path to be drawn. |
||
55 | data-* | Attribute, SVG |
The data-* SVG attributes are called custom data attributes. They let SVG markup and its resulting DOM share information that standard attributes can't, usually for scripting purposes. Their custom data are available via the SVGElement interface of the element the attributes belong to, with the SVGElement.dataset property. |
||
56 | descent | Deprecated, SVG, SVG Attribute |
The descent attribute defines the maximum unaccented depth of the font. |
||
57 | diffuseConstant | Filters, SVG, SVG Attribute |
The diffuseConstant attribute represents the kd value in the Phong lighting model. In SVG, this can be any non-negative number. |
||
58 | direction | SVG, SVG Attribute |
The direction attribute specifies the inline-base direction of a <text> or <tspan> element. It defines the start and end points of a line of text as used by the text-anchor and inline-size properties. It also may affect the direction in which characters are positioned if the unicode-bidi property's value is either embed or bidi-override . |
||
59 | display | SVG, SVG Attribute |
The display attribute lets you control the rendering of graphical or container elements. |
||
60 | divisor | Filters, SVG, SVG Attribute |
The divisor attribute specifies the value by which the resulting number of applying the kernelMatrix of a <feConvolveMatrix> element to the input image color value is divided to yield the destination color value. |
||
61 | dominant-baseline | Reference, SVG, SVG Attribute |
The dominant-baseline attribute specifies the dominant baseline, which is the baseline used to align the box’s text and inline-level contents. It also indicates the default alignment baseline of any boxes participating in baseline alignment in the box’s alignment context. |
||
62 | dur | SVG, SVG Attribute |
The dur attribute indicates the simple duration of an animation. |
||
63 | dx | SVG, SVG Attribute |
The dx attribute indicates a shift along the x-axis on the position of an element or its content. |
||
64 | dy | SVG, SVG Attribute |
The dy attribute indicates a shift along the y-axis on the position of an element or its content. |
||
65 | edgeMode | Filters, NeedsCompatTable, NeedsExample, SVG, SVG Attribute |
The edgeMode attribute determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image. |
||
66 | elevation | Filters, SVG, SVG Attribute |
The elevation attribute specifies the direction angle for the light source from the XY plane towards the Z-axis, in degrees. Note that the positive Z-axis points towards the viewer of the content. |
||
67 | enable-background | Deprecated, SVG, SVG Attribute |
The enable-background attribute specifies how the accumulation of the background image is managed. |
||
68 | end | NeedsCompatTable, SVG, SVG Attribute |
The end attribute defines an end value for the animation that can constrain the active duration. |
||
69 | exponent | NeedsCompatTable, SVG, SVG Attribute |
The exponent attribute defines the exponent of the gamma function. |
||
70 | externalResourcesRequired | Deprecated, NeedsExample, SVG, SVG Attribute |
The externalResourcesRequired attribute specifies whether referenced resources that are not part of the current document are required for proper rendering of the given container or graphics element. |
||
71 | fill | SVG, SVG Attribute |
The fill attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation. |
||
72 | fill-opacity | SVG, SVG Attribute |
The fill-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc) applied to a shape. |
||
73 | fill-rule | SVG, SVG Attribute |
The fill-rule attribute is a presentation attribute defining the algorithm to use to determine the inside part of a shape. |
||
74 | filter | SVG, SVG Attribute, SVG Filter |
The filter attribute specifies the filter effects defined by the <filter> element that shall be applied to its element. |
||
75 | filterRes | NeedsExample, SVG, SVG Attribute, SVG Filter |
The filterRes attribute indicates the width and height of the intermediate images in pixels of a filter primitive. |
||
76 | filterUnits | NeedsExample, SVG, SVG Attribute, SVG Filter |
The filterUnits attribute defines the coordinate system for the attributes x , y , width and height . |
||
77 | flood-color | SVG, SVG Attribute, SVG Filter |
The flood-color attribute indicates what color to use to flood the current filter primitive subregion. |
||
78 | flood-opacity | SVG, SVG Attribute, SVG Filter |
The flood-opacity attribute indicates the opacity value to use across the current filter primitive subregion. |
||
79 | font-family | SVG, SVG Attribute |
The font-family attribute indicates which font family will be used to render the text, specified as a prioritized list of font family names and/or generic family names. |
||
80 | font-size | SVG, SVG Attribute |
The font-size attribute refers to the size of the font from baseline to baseline when multiple lines of text are set solid in a multiline layout environment. |
||
81 | font-size-adjust | SVG, SVG Attribute |
The font-size-adjust attribute allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font in a substitute font. |
||
82 | font-stretch | NeedsExample, SVG, SVG Attribute |
The font-stretch attribute indicates the desired amount of condensing or expansion in the glyphs used to render the text. |
||
83 | font-style | CSS, Font Style, Italic, Oblique, SVG, SVG Attribute, Text, Type, font |
The font-style attribute specifies whether the text is to be rendered using a normal, italic, or oblique face. |
||
84 | font-variant | SVG, SVG Attribute |
The font-variant attribute indicates whether the text is to be rendered using variations of the fontʼs glyphs. |
||
85 | font-weight | SVG, SVG Attribute |
The font-weight attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family. |
||
86 | format | Deprecated, SVG, SVG Attribute |
The format attribute indicates the format of the given font. |
||
87 | fr | SVG, SVG Attribute |
The fr attribute defines the radius of the focal point for the radial gradient. |
||
88 | from | SVG, SVG Attribute |
The from attribute indicates the initial value of the attribute that will be modified during the animation. |
||
89 | fx | SVG, SVG Attribute |
The fx attribute defines the x-axis coordinate of the focal point for a radial gradient. |
||
90 | fy | SVG, SVG Attribute |
The fy attribute defines the y-axis coordinate of the focal point for a radial gradient. |
||
91 | g1 | Deprecated, SVG, SVG Attribute |
The g1 attribute specifies a list of glyph names which identify a set of possible first glyphs in the kerning pair. |
||
92 | g2 | Deprecated, SVG, SVG Attribute |
The g2 attribute specifies a list of glyph names which identify a set of possible second glyphs in the kerning pair. |
||
93 | glyph-name | Deprecated, SVG, SVG Attribute |
The glyph-name attribute specifies the name of a glyph. |
||
94 | glyph-orientation-horizontal | Deprecated, SVG, SVG Attribute |
The glyph-orientation-horizontal attribute affects the amount that hte current text position advances as each glyph is rendered. |
||
95 | glyph-orientation-vertical | Deprecated, SVG, SVG Attribute |
The glyph-orientation-vertical attribute affects the amount that hte current text position advances as each glyph is rendered. |
||
96 | glyphRef | Deprecated, SVG, SVG Attribute |
The glyphRef attribute represents the glyph identifier, the format of which is dependent on the format of the given font. |
||
97 | gradientTransform | SVG, SVG Attribute |
The gradientTransform attribute contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userSpaceOnUse or objectBoundingBox). This allows for things such as skewing the gradient. This additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space. |
||
98 | gradientUnits | NeedsCompatTable, NeedsExample, SVG, SVG Attribute |
The gradientUnits attribute defines the coordinate system used for attributes specified on the gradient elements. |
||
99 | hanging | Deprecated, SVG, SVG Attribute |
The hanging attribute indicates the alignment coordinate for glyphs to achieve hanging baseline alignment for horizontally oriented glyph layouts. |
||
100 | height | SVG, SVG Attribute |
The height attribute defines the vertical length of an element in the user coordinate system. |
||
101 | horiz-adv-x | Deprecated, SVG, SVG Attribute |
The horiz-adv-x attribute indicates the horizontal advance after rendering a glyph in horizontal orientation. |
||
102 | horiz-origin-x | Deprecated, SVG, SVG Attribute |
The horiz-origin-x attribute indicates the x-coordinate in the font coordinate system of the origin of a glyph to be used when drawing horizontally oriented text. |
||
103 | horiz-origin-y | Deprecated, SVG, SVG Attribute |
The horiz-origin-y attribute indicates the y-coordinate in the font coordinate system of the origin of a glyph to be used when drawing horizontally oriented text. |
||
104 | href | SVG, SVG Attribute |
The href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it. |
||
105 | id | SVG, SVG Attribute |
The id attribute assigns a unique name to an element. |
||
106 | ideographic | Deprecated, SVG, SVG Attribute |
The ideographic attribute indicates the alignment coordinate for glyphs to achieve ideographic baseline alignment for horizontally oriented glyph layouts. |
||
107 | image-rendering | NeedsExample, SVG, SVG Attribute |
The image-rendering attribute provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing. |
||
108 | in | Filters, NeedsCompatTable, SVG, SVG Attribute |
The in attribute identifies input for the given filter primitive. |
||
109 | in2 | Filters, NeedsCompatTable, NeedsExample, SVG, SVG Attribute |
The in2 attribute identifies the second input for the given filter primitive. It works exactly like the in attribute. |
||
110 | intercept | NeedsCompatTable, SVG, SVG Attribute |
The intercept attribute defines the intercept of the linear function of color component transfers when the type attribute is set to linear . |
||
111 | k | Deprecated, SVG, SVG Attribute |
The k attribute specifies the amount for decreasing the spacing between the two glyphs in a kerning pair. |
||
112 | k1 | Filters, SVG, SVG Attribute |
The k1 attribute defines one of the values to be used within the the arithmetic operation of the <feComposite> filter primitive. |
||
113 | k2 | Filters, SVG, SVG Attribute |
The k2 attribute defines one of the values to be used within the the arithmetic operation of the <feComposite> filter primitive. |
||
114 | k3 | Filters, SVG, SVG Attribute |
The k3 attribute defines one of the values to be used within the the arithmetic operation of the <feComposite> filter primitive. |
||
115 | k4 | Filters, SVG, SVG Attribute |
The k4 attribute defines one of the values to be used within the the arithmetic operation of the <feComposite> filter primitive. |
||
116 | kernelMatrix | Filters, SVG, SVG Attribute |
the kernelMatrix attribute defines the list of numbers that make up the kernel matrix for the <feConvolveMatrix> element. |
||
117 | kernelUnitLength | Filters, NeedsCompatTable, NeedsExample, SVG, SVG Attribute |
The kernelUnitLength attribute has two meanings based on the context it's used in. For lighting filter primitives, it indicates the intended distance for the x and y coordinates, for <feConvolveMatrix> , it indicates the intended distance between successive columns and rows in the kernel matrix. |
||
118 | kerning | Deprecated, SVG, SVG Attribute |
The kerning attribute indicates whether the spacing between glyphs should be adjusted based on kerning tables that are included in the relevant font (i.e., enable auto-kerning) or instead disable auto-kerning and set the spacing between them to a specific length (typically, zero). |
||
119 | keyPoints | SVG, SVG Attribute |
The keyPoints attribute indicates the simple duration of an animation. |
||
120 | keySplines | SVG, SVG Attribute |
The keySplines attribute defines a set of Bézier curve control points associated with the keyTimes list, defining a cubic Bézier function that controls interval pacing.This attribute is ignored unless the calcMode attribute is set to spline .If there are any errors in the keySplines specification (bad values, too many or too few values), the animation will not occur. |
||
121 | keyTimes | SVG, SVG Attribute |
The keyTimes attribute represents a list of time values used to control the pacing of the animation. Each time in the list corresponds to a value in the values attribute list, and defines when the value is used in the animation. |
||
122 | lang | SVG, SVG Attribute |
The lang attribute specifies the primary language used in contents and attributes containing text content of particular elements. |
||
123 | lengthAdjust | SVG, SVG Attribute |
The lengthAdjust attribute controls how the text is stretched into the length defined by the textLength attribute. |
||
124 | letter-spacing | SVG, SVG Attribute |
The letter-spacing attribute controls spacing between text characters, in addition to any spacing from the kerning attribute. |
||
125 | lighting-color | SVG, SVG Attribute, SVG Filter |
The lighting-color attribute defines the color of the light source for lighting filter primitives. |
||
126 | limitingConeAngle | Filters, SVG, SVG Attribute |
The limitingConeAngle attribute represents the angle in degrees between the spot light axis (i.e. the axis between the light source and the point to which it is pointing at) and the spot light cone. So it defines a limiting cone which restricts the region where the light is projected. No light is projected outside the cone. |
||
127 | local | Deprecated, SVG, SVG Attribute |
The local attribute specifies the unique ID for a locally stored color profile as specified by International Color Consortium. |
||
128 | marker-end | SVG, SVG Attribute |
The marker-end attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given shape. |
||
129 | marker-mid | SVG, SVG Attribute |
The marker-mid attribute defines the arrowhead or polymarker that will be drawn at all interior vertices of the given shape. |
||
130 | marker-start | SVG, SVG Attribute |
The marker-start attribute defines the arrowhead or polymarker that will be drawn at the first vertex of the given shape. |
||
131 | markerHeight | NeedsExample, SVG, SVG Attribute |
The markerHeight attribute represents the height of the viewport into which the <marker> is to be fitted when it is rendered according to the viewBox and preserveAspectRatio attributes. |
||
132 | markerUnits | NeedsExample, SVG, SVG Attribute |
The markerUnits attribute defines the coordinate system for the markerWidth and markerUnits attributes and the contents of the <marker> . |
||
133 | markerWidth | NeedsExample, SVG, SVG Attribute |
The markerWidth attribute represents the width of the viewport into which the <marker> is to be fitted when it is rendered according to the viewBox and preserveAspectRatio attributes. |
||
134 | mask | SVG, SVG Attribute |
The mask attribute is a presentation attribute mainly used to bind a given <mask> element with the element the attribute belongs to. |
||
135 | maskContentUnits | SVG, SVG Attribute |
The maskContentUnits attribute indicates which coordinate system to use for the contents of the <mask> element. |
||
136 | maskUnits | SVG, SVG Attribute |
The maskUnits attribute indicates which coordinate system to use for the geometry properties of the <mask> element. |
||
137 | mathematical | Deprecated, SVG, SVG Attribute |
The mathematical attribute indicates the alignment coordinate for glyphs to achieve mathematical baseline alignment for horizontally oriented glyph layouts. |
||
138 | max | SVG, SVG Attribute |
The max attribute specifies the maximum value of the active animation duration. |
||
139 | media | SVG, SVG Attribute |
The media attribute specifies a media query that must be matched for a style sheet to apply. |
||
140 | method | Experimental, NeedsExample, SVG, SVG Attribute |
The method attribute indicates the method by which text should be rendered along the path of a <textPath> element. |
||
141 | min | SVG, SVG Attribute |
The min attribute specifies the minimum value of the active animation duration. |
||
142 | mode | Filters, SVG, SVG Attribute |
The mode attribute defines the blending mode on the <feBlend> filter primitive. |
||
143 | name | Deprecated, SVG, SVG Attribute |
The name attribute specifies either the name of a color profile or a font face. |
||
144 | numOctaves | Filters, SVG, SVG Attribute |
The numOctaves attribute defines the number of octaves for the noise function of the <feTurbulence> primitive. |
||
145 | onclick | SVG, SVG Attribute, events |
The onclick attribute specifies some script to run when the element is clicked. |
||
146 | opacity | SVG, SVG Attribute |
The opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid. |
||
147 | operator | Filters, NeedsCompatTable, SVG, SVG Attribute |
The operator attribute as two meanings based on the context itʼs used in. Either it defines the compositing or morphing operation to be performed. |
||
148 | order | Filters, SVG, SVG Attribute |
the order attribute indicates the size of the matrix to be used by a <feConvolveMatrix> element. |
||
149 | orient | SVG, SVG Attr |
The orient attribute indicates how a marker is rotated when it is placed at its position on the shape. |
||
150 | orientation | Deprecated, SVG, SVG Attribute |
The orientation attribute indicates that the given glyph is only to be used for a particular text direction, i.e. horizontal or vertical. |
||
151 | origin | SVG, SVG Attribute |
The origin attribute specifies the origin of motion for an animation. It has no effect in SVG. |
||
152 | overflow | SVG, SVG Attribute |
The overflow attribute sets what to do when an element's content is too big to fit in its block formatting context. |
||
153 | overline-position | Attribute, Reference, Référence(2), SVG, font |
The overline-position attribute represents the ideal vertical position of the overline. The overline position is expressed in the font's coordinate system. |
||
154 | overline-thickness | Attribute, Reference, Référence(2), SVG, font |
The overline-thickness attribute represents the ideal thickness of the overline. The overline thickness is expressed in the font's coordinate system. |
||
155 | paint-order | SVG, SVG Attribute |
The paint-order attribute specifies the order that the fill, stroke, and markers of a given shape or text element are painted. |
||
156 | panose-1 | Deprecated, SVG, SVG Attribute |
The panose-1 attribute indicates the Panose-1 number of a font face. |
||
157 | path | SVG, SVG Attribute |
The path attribute has two different meanings, either it defines a text path along which the characters of a text are rendered, or a motion path along which a referenced element is animated. |
||
158 | pathLength | SVG, SVG Attribute |
The pathLength attribute lets authors specify a total length for the path, in user units. This value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio pathLength /(computed value of path length). |
||
159 | patternContentUnits | SVG, SVG Attribute |
The patternContentUnits attribute indicates which coordinate system to use for the contents of the <pattern> element. |
||
160 | patternTransform | SVG, SVG Attribute |
The patternTransform attribute defines a list of transform definitions that are applied to a pattern tile. |
||
161 | patternUnits | SVG, SVG Attribute |
The patternUnits attribute indicates which coordinate system to use for the geometry properties of the <pattern> element. |
||
162 | pointer-events | SVG, SVG Attribute |
The pointer-events attribute is a presentation attribute that allows defining whether or when an element may be the target of a mouse event. |
||
163 | points | SVG, SVG Attribute |
The points attribute defines a list of points. Each point is defined by a pair of number representing a X and a Y coordinate in the user coordinate system. If the attribute contains an odd number of coordinates, the last one will be ignored. |
||
164 | pointsAtX | Filters, SVG, SVG Attribute |
The pointsAtX attribute represents the x location in the coordinate system established by attribute primitiveUnits on the <filter> element of the point at which the light source is pointing. |
||
165 | pointsAtY | Filters, SVG, SVG Attribute |
The pointsAtY attribute represents the y location in the coordinate system established by attribute primitiveUnits on the <filter> element of the point at which the light source is pointing. |
||
166 | pointsAtZ | Filters, SVG, SVG Attribute |
The pointsAtZ attribute represents the y location in the coordinate system established by attribute primitiveUnits on the <filter> element of the point at which the light source is pointing, assuming that, in the initial local coordinate system, the positive z-axis comes out towards the person viewing the content and assuming that one unit along the z-axis equals one unit in x and y. |
||
167 | preserveAlpha | Filters, SVG, SVG Attribute |
the preserveAlpha attribute indicates how a <feConvolveMatrix> element handled alpha transparency. |
||
168 | preserveAspectRatio | SVG, SVG Attribute |
The preserveAspectRatio attribute indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio. |
||
169 | primitiveUnits | NeedsExample, SVG, SVG Attribute, SVG Filter |
The primitiveUnits attribute specifies the coordinate system for the various length values within the filter primitives and for the attributes that define the filter primitive subregion. |
||
170 | r | SVG, SVG Attribute |
The r attribute defines the radius of a circle. |
||
171 | radius | Filters, NeedsExample, SVG, SVG Attribute |
The radius attribute represents the radius (or radii) for the operation on a given <feMorphology> filter primitive. |
||
172 | refX | NeedsBrowserCompatibility, NeedsExample |
The refX attribute indicates the method by which text should be rendered along the path of a <textPath> element. |
||
173 | refY | NeedsBrowserCompatibility, NeedsExample |
The refY attribute defines the y coordinate of an element’s reference point. |
||
174 | rendering-intent | Deprecated, SVG, SVG Attribute |
The rendering-intent attribute permits the specification of a color profile rendering intent other than the default. |
||
175 | repeatCount | SVG, SVG Attribute |
The repeatCount attribute indicates the number of times an animation will take place. |
||
176 | repeatDur | SVG, SVG Attribute |
The repeatDur attribute specifies the total duration for repeating an animation. |
||
177 | requiredFeatures | SVG, SVG Attribute |
The requiredFeatures attribute takes a list of feature strings, with the individual strings separated by white space. It determines whether or not all of the named features are supported by the browser; if all of them are supported, the attribute evaluates to true end the element is rendered; otherwise, the attribute evaluates to false and the current element and its children are skipped and thus will not be rendered. This provides a way to design SVG that gracefully falls back when features aren't available. |
||
178 | restart | SVG, SVG Attribute |
The restart attribute specifies whether or not an animation can restart. |
||
179 | result | NeedsCompatTable, SVG, SVG Attribute |
The result attribute defines the assigned name for this filter primitive. If supplied, then graphics that result from processing this filter primitive can be referenced by an in attribute on a subsequent filter primitive within the same <filter> element. If no value is provided, the output will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its in attribute. |
||
180 | rotate | Animation, Experimental, Graphics, Reference, Rotate, SVG |
The rotate attribute specifies how the animated element rotates as it travels along a path specified in an <animateMotion> element. |
||
181 | rx | SVG, SVG Attribute |
The rx attribute defines a radius on the x-axis. |
||
182 | ry | SVG, SVG Attribute |
The ry attribute defines a radius on the y-axis. |
||
183 | scale | Filters, SVG, SVG Attribute |
The scale attribute defines the displacement scale factor to be used on a <feDisplacementMap> filter primitive. The amount is expressed in the coordinate system established by the primitiveUnits attribute on the <filter> element. |
||
184 | seed | Filters, SVG, SVG Attribute |
The seed attribute represents the starting number for the pseudo random number generator of the <feTurbulence> filter primitive. |
||
185 | shape-rendering | SVG, SVG Attribute |
The shape-rendering attribute provides hints to the renderer about what tradeoffs to make when rendering shapes like paths, circles, or rectangles. |
||
186 | side | SVG, SVG Attribute |
The side attribute determines the side of a path the text is placed on (relative to the path direction). |
||
187 | slope | Deprecated, SVG, SVGAttribute |
The slope attribute indicates the vertical stroke angle of a font. |
||
188 | spacing | NeedsExample, SVG, SVG Attribute |
The spacing attribute indicates how the user agent should determine the spacing between typographic characters that are to be rendered along a path. |
||
189 | specularConstant | Filters, SVG, SVG Attribute |
The specularConstant attribute controls the ratio of reflection of the specular lighting. It represents the ks value in the Phong lighting model. The bigger the value the stronger the reflection. |
||
190 | specularExponent | Filters, SVG, SVG Attribute |
The specularExponent attribute controls the focus for the light source. The bigger the value the brighter the light. |
||
191 | spreadMethod | SVG, SVG Attribute |
The spreadMethod attribute determines how a shape is filled beyond the defined edges of a gradient. |
||
192 | startOffset | SVG, SVG Attribute |
The startOffset attribute defines an offset from the start of the path for the initial current text position along the path after converting the path to the <textPath> element's coordinate system. |
||
193 | stdDeviation | Filters, SVG, SVG Attribute |
The stdDeviation attribute defines the standard deviation for the blur operation. |
||
194 | stemh | Deprecated, SVG, SVG Attribute |
The stemh attribute indicates the horizontal stem width of the font. |
||
195 | stemv | Deprecated, SVG, SVG Attribute |
The stemv attribute indicates the vertical stem width of the font. |
||
196 | stitchTiles | Filters, SVG, SVG Attribute |
The stitchTiles attribute defines how the Perlin Noise tiles behave at the border. |
||
197 | stop-color | NeedsExample, SVG, SVG Attribute |
The stop-color attribute indicates what color to use at a gradient stop. |
||
198 | stop-opacity | NeedsExample, SVG, SVG Attribute |
The stop-opacity attribute defines the opacity of a given color gradient stop. |
||
199 | strikethrough-position | Attribute, Reference, Référence(2), SVG, font |
The strikethrough-position attribute represents the ideal vertical position of the strikethrough. The strikethrough position is expressed in the font's coordinate system. |
||
200 | strikethrough-thickness | Attribute, Reference, Référence(2), SVG, font |
The strikethrough-thickness attribute represents the ideal thickness of the strikethrough. The strikethrough thickness is expressed in the font's coordinate system. |
||
201 | string | Deprecated, SVG, SVG Attribute |
The string attribute is a hint to the user agent, and specifies a list of formats that the font referenced by the parent <font-face-uri> element supports. |
||
202 | stroke | SVG, SVG Attribute |
The stroke attribute is a presentation attribute defining the color (or any SVG paint servers like gradients or patterns) used to paint the outline of the shape; |
||
203 | stroke-dasharray | SVG, SVG Attribute |
The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape; |
||
204 | stroke-dashoffset | SVG, SVG Attribute |
The stroke-dashoffset attribute is a presentation attribute defining an offset on the rendering of the associated dash array. |
||
205 | stroke-linecap | SVG, SVG Attribute |
The stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked. |
||
206 | stroke-linejoin | Reference, SVG, SVG Attribute, stroke-linejoin |
The stroke-linejoin attribute is a presentation attribute defining the shape to be used at the corners of paths when they are stroked. |
||
207 | stroke-miterlimit | SVG, SVG Attribute |
The stroke-miterlimit attribute is a presentation attribute defining a limit on the ratio of the miter length to the stroke-width used to draw a miter join. When the limit is exceeded, the join is converted from a miter to a bevel. |
||
208 | stroke-opacity | SVG, SVG Attribute |
The stroke-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc) applied to the stroke of a shape. |
||
209 | stroke-width | SVG, SVG Attribute |
The stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape. |
||
210 | style | SVG, SVG Attribute |
The style attribute allows to style an element using CSS declarations. It functions identically to the style attribute in HTML. |
||
211 | surfaceScale | Filters, NeedsCompatTable, SVG, SVG Attribute |
The surfaceScale attribute represents the height of the surface for a light filter primitive. |
||
212 | systemLanguage | SVG, SVG Attribute |
The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences. |
||
213 | tabindex | SVG, SVG Attribute |
The tabindex attribute allows you to control whether an element is focusable and to define the relative order of the element for the purposes of sequential focus navigation. |
||
214 | tableValues | SVG, SVG Attribute |
The tableValues attribute defines a list of numbers defining a lookup table of values for a for a color component transfer function. |
||
215 | target | SVG, SVG Attribute |
The target attribute should be used when there are multiple possible targets for the ending resource, such as when the parent document is embedded within an HTML or XHTML document, or is viewed with a tabbed browser. This attribute specifies the name of the browsing context (e.g., a browser tab or an (X)HTML iframe or object element) into which a document is to be opened when the link is activated: |
||
216 | targetX | Filters, NeedsExample, SVG, SVG Attribute |
The targetX attribute determines the positioning in horizontal direction of the convolution matrix relative to a given target pixel in the input image. The leftmost column of the matrix is column number zero. The value must be such that: 0 <= targetX < order X . |
||
217 | targetY | Filters, NeedsExample, SVG, SVG Attribute |
The targetY attribute determines the positioning in vertical direction of the convolution matrix relative to a given target pixel in the input image. The topmost row of the matrix is row number zero. The value must be such that: 0 <= targetY < order Y . |
||
218 | text-anchor | SVG, SVG Attribute |
The text-anchor attribute is used to align (start-, middle- or end-alignment) a string of pre-formatted text or auto-wrapped text where the wrapping area is determined from the inline-size property relative to a given point. |
||
219 | text-decoration | SVG, SVG Attribute |
The text-decoration attribute defines whether text is decorated with an underline, overline and/or strike-through. |
||
220 | text-rendering | SVG, SVG Attribute |
The text-rendering attribute provides hints to the renderer about what tradeoffs to make when rendering text. |
||
221 | textLength | Attribute, CSS, HTML, Javascrip, SVG Attribute, Text, height, length, size, width |
The textLength attribute, available on SVG <text> and <tspan> elements, lets you specify the width of the space into which the text will draw. The user agent will ensure that the text does not extend farther than that distance, using the method or methods specified by the lengthAdjust attribute. By default, only the spacing between characters is adjusted, but the glyph size can also be adjusted if you change lengthAdjust . |
||
222 | to | NeedsCompatTable, SVG, SVG Attribute |
The to attribute indicates the final value of the attribute that will be modified during the animation. |
||
223 | transform | SVG, SVG Attribute |
The transform attribute defines a list of transform definitions that are applied to an element and the element's children. |
||
224 | transform-origin | SVG, SVG Attribute |
The transform-origin SVG attribute sets the origin for an item’s transformations. |
||
225 | type | NeedsCompatTable, NeedsExample, SVG, SVG Attribute, filter |
The type attribute is a generic attribute and it has different meaning based on the context in which it's used. |
||
226 | u1 | Deprecated, SVG, SVG Attribute |
The u1 attribute specifies list of Unicode characters (refer to the description of the unicode attribute of the <glyph> element for a description of how to express individual Unicode characters) and/or ranges of Unicode characters, which identify a set of possible first glyphs in a kerning pair. |
||
227 | u2 | Deprecated, SVG, SVG Attribute |
The u2 attribute specifies list of Unicode characters (refer to the description of the unicode attribute of the <glyph> element for a description of how to express individual Unicode characters) and/or ranges of Unicode characters, which identify a set of possible second glyphs in a kerning pair. |
||
228 | underline-position | Attribute, Reference, Référence(2), SVG, font |
The underline-position attribute represents the ideal vertical position of the underline. The underline position is expressed in the font's coordinate system. |
||
229 | underline-thickness | Attribute, Reference, Référence(2), SVG, font |
The underline-thickness attribute represents the ideal thickness of the underline. The underline thickness is expressed in the font's coordinate system. |
||
230 | unicode | Deprecated, SVG, SVG Attribute |
The unicode attribute specifies one or more Unicode characters indicating the sequence of Unicode characters which corresponds to a glyph. |
||
231 | unicode-bidi | SVG, SVG Attribute |
The unicode-bidi attribute specifies how the accumulation of the background image is managed. |
||
232 | unicode-range | Deprecated, SVG, SVG Attribute |
The unicode-range attribute defines the range of ISO 10646 characters possibly covered by the glyphs in a font. |
||
233 | units-per-em | Deprecated, SVG, SVG Attribute |
The units-per-em attribute specifies the number of coordinate units on the "em square", an abstract square whose height is the intended distance between lines of type in the same type size. |
||
234 | v-alphabetic | Deprecated, SVG, SVG Attribute |
The v-alphabetic attribute defines indicates the alignment coordinate for glyphs to achieve alphabetic baseline alignment. |
||
235 | v-hanging | Deprecated, SVG, SVG Attribute |
The v-hanging attribute indicates the alignment coordinate for glyphs to achieve hanging baseline alignment. |
||
236 | v-ideographic | Deprecated, SVG, SVG Attribute |
The v-ideographic attribute indicates the alignment coordinate for glyphs to achieve ideographic baseline alignment for vertically oriented glyph layouts. |
||
237 | v-mathematical | Deprecated, SVG, SVG Attribute |
The v-mathematical attribute indicates the alignment coordinate for glyphs to achieve mathematical baseline alignment for vertically oriented glyph layouts. |
||
238 | values | NeedsCompatTable, NeedsExample, SVG, SVG Attribute |
The values attribute has different meanings, depending upon the context where itʼs used, either it defines a sequence of values used over the course of an animation, or itʼs a list of numbers for a color matrix, which is interpreted differently depending on the type of color change to be performed. |
||
239 | vector-effect | SVG, SVG Attribute |
The vector-effect property specifies the vector effect to use when drawing an object. Vector effects are applied before any of the other compositing operations, i.e. filters, masks and clips. |
||
240 | version | Deprecated, SVG, SVG Attribute |
The version attribute is used to indicate what specification a SVG document conforms to. It is only allowed on the root <svg> element. It is purely advisory and has no influence on rendering or processing. |
||
241 | vert-adv-y | Deprecated, SVG, SVG Attribute |
The vert-adv-y attribute indicates the vertical advance after rendering a glyph in vertical orientation. |
||
242 | vert-origin-x | Deprecated, SVG, SVG Attribute |
The vert-origin-x attribute indicates the x-coordinate in the font coordinate system of the origin of a glyph to be used when drawing vertically oriented text. |
||
243 | vert-origin-y | Deprecated, SVG, SVG Attribute |
The vert-origin-y attribute indicates the y-coordinate in the font coordinate system of the origin of a glyph to be used when drawing vertically oriented text. |
||
244 | viewBox | SVG, SVG Attribute |
The viewBox attribute defines the position and dimension, in user space, of an SVG viewport. |
||
245 | viewTarget | SVG, SVG Attribute |
The viewTarget attribute indicates the target object associated with the view. |
||
246 | visibility | SVG, SVG Attribute |
The visibility attribute lets you control the visibility of graphical elements. With a value of hidden or collapse the current graphics element is invisible. |
||
247 | width | SVG, SVG Attribute |
The width attribute defines the horizontal length of an element in the user coordinate system. |
||
248 | widths | Deprecated, SVG, SVG Attribute |
The widths attribute indicates a list of range values, each followed by one or more glyph widths. |
||
249 | word-spacing | SVG, SVG Attribute |
The word-spacing attribute specifies spacing behavior between words. |
||
250 | writing-mode | NeedsExample, SVG, SVG Attribute |
The writing-mode attribute specifies whether the initial inline-progression-direction for a <text> element shall be left-to-right, right-to-left, or top-to-bottom. The writing-mode attribute applies only to <text> elements; the attribute is ignored for <tspan> , <tref> , <altGlyph> and <textPath> sub-elements. (Note that the inline-progression-direction can change within a <text> element due to the Unicode bidirectional algorithm and properties direction and unicode-bidi .) |
||
251 | x | SVG, SVG Attribute |
The x attribute defines a x-axis coordinate in the user coordinate system. |
||
252 | x-height | Deprecated, SVG, SVG Attribute |
The x-height attribute indicates the height of lowercase glyphs in the font within the font coordinate system. |
||
253 | x1 | Drawing Lines, Gradients, LInes, SVG, SVG Attribute, SVG Gradients, Vector Graphics |
The x1 attribute is used to specify the first x-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the x attribute instead. |
||
254 | x2 | SVG, SVG Attribute |
The x2 attribute is used to specify the second x-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the x attribute instead. |
||
255 | xChannelSelector | Filters, NeedsExample, SVG, SVG Attribute |
The xChannelSelector attribute indicates which color channel from in2 to use to displace the pixels in in along the x-axis. |
||
256 | xlink:arcrole | Deprecated, SVG, SVG Attribute |
The xlink:arcrole attribute specifies a contextual role for the element and corresponds to the RDF Primer notion of a property. |
||
257 | xlink:href | NeedsCompatTable, SVG, SVG Attribute |
The xlink:href attribute defines a reference to a resource as a reference IRI. The exact meaning of that link depends on the context of each element using it. |
||
258 | xlink:show | Deprecated, SVG, SVG Attribute |
The xlink:show attribute indicates how a linked resource should be opened and is meant for XLink-aware processors. In case of a conflict, the target attribute has priority, since it can express a wider range of values. |
||
259 | xlink:title | Deprecated, SVG, SVG Attribute |
The xlink:title attribute is used to describe the meaning of a link or resource in a human-readable fashion. |
||
260 | xlink:type | Deprecated, SVG, SVG Attribute |
The xlink:type attribute identifies the type of XLink being used. In SVG, only simple links are available. |
||
261 | xml:base | Deprecated, SVG, SVG Attribute |
The xml:base attribute specifies a base IRI other than the base IRI of the document or external entity. |
||
262 | xml:lang | SVG, SVG Attribute |
The xml:lang attribute specifies the primary language used in contents and attributes containing text content of particular elements. |
||
263 | xml:space | SVG, SVG Attribute |
SVG supports the built-in XML xml:space attribute to handle whitespace characters inside elements. |
||
264 | y | SVG, SVG Attribute |
The y attribute defines a y-axis coordinate in the user coordinate system. |
||
265 | y1 | SVG, SVG Attribute |
The y1 attribute is used to specify the first y-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the y attribute instead. |
||
266 | y2 | SVG, SVG Attribute |
The y2 attribute is used to specify the second y-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the y attribute instead. |
||
267 | yChannelSelector | Filters, SVG, SVG Attribute |
The yChannelSelector attribute indicates which color channel from in2 to use to displace the pixels in in along the y-axis. |
||
268 | z | Filters, SVG, SVG Attribute |
The z attribute defines the location along the z-axis for a light source in the coordinate system established by the primitiveUnits attribute on the <filter> element, assuming that, in the initial coordinate system, the positive z-axis comes out towards the person viewing the content and assuming that one unit along the z-axis equals one unit in x and y. |
||
269 | zoomAndPan | Deprecated, SVG, SVG Attribute |
The zoomAndPan attribute specifies whether the SVG document can be magnified and panned. |
||
270 | SVG Tutorial | Intermediate, NeedsContent, NeedsHelp, NeedsUpdate, SVG, SVG:Tutorial |
Scalable Vector Graphics, SVG, is a W3C XML dialect to mark up graphics. It is partially implemented in Firefox, Opera, WebKit browsers, Internet Explorer and other browsers. | ||
271 | Basic Transformations | Intermediate, SVG, SVG:Tutorial |
Now we're ready to start distorting our beautiful images. But first, let's formally introduce the <g> element. With this helper, you can assign properties to a complete set of elements. Actually, that's its only purpose. An example: |
||
272 | Basic shapes | Beginner, SVG, SVG:Tutorial |
There are several basic shapes used for most SVG drawing. The purpose of these shapes is fairly obvious from their names. Some of the parameters that determine their position and size are given, but an element reference would probably contain more accurate and complete descriptions along with other properties that won't be covered in here. However, since they're used in most SVG documents, it's necessary to give them some sort of introduction. | ||
273 | Clipping and masking | Advanced, SVG, SVG:Tutorial |
Erasing part of what one has created might at first sight look contradictory. But when you try to create a semicircle in SVG, you will find out the use of the following properties quickly. | ||
274 | Fills and Strokes | Beginner, NeedLiveSamples, SVG, SVG:Tutorial |
There are several ways to color shapes (including specifying attributes on the object) using inline CSS, an embedded CSS section, or an external CSS file. Most SVG you'll find around the web use inline CSS, but there are advantages and disadvantages associated with each type. | ||
275 | Filter effects | Advanced, NeedsContent, SVG, SVG:Tutorial |
There are situations, where basic shapes do not provide the flexibility you need to achieve a certain effect. Drop shadows, to provide a popular example, cannot be created reasonably with a combination of gradients. Filters are SVG's mechanism to create sophisticated effects. | ||
276 | Getting started | Beginner, NeedsBeginnerUpdate, SVG, SVG:Tutorial |
Let us dive straight in with a simple example. Take a look at the following code. | ||
277 | Gradients in SVG | Intermediate, SVG, SVG:Tutorial |
Perhaps more exciting than just fills and strokes is the fact that you can also create and apply gradients as either fills or strokes. | ||
278 | Introduction | Beginner, Guide, NeedsBeginnerUpdate, NeedsUpdate, SVG, SVG:Tutorial, Tutorial |
SVG is an XML language, similar to XHTML, which can be used to draw vector graphics, such as the ones shown to the right. It can be used to create an image either by specifying all the lines and shapes necessary, by modifying already existing raster images, or by a combination of both. The image and its components can also be transformed, composited together, or filtered to change their appearance completely. | ||
279 | Other content in SVG | Intermediate, SVG, SVG:Tutorial |
Apart from graphic primitives like rectangles and circles, SVG offers a set of elements to embed other types of content in images as well. | ||
280 | Paths | Intermediate, SVG, SVG:Tutorial |
The <path> element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more. |
||
281 | Patterns | Advanced, SVG, SVG:Tutorial |
Patterns are arguably one of the more confusing fill types to use in SVG. They're also very powerful, so they're worth talking about and getting at least a fundamental grasp on. Like gradients, the <pattern> element should be put in the <defs> section of your SVG file. |
||
282 | Positions | Beginner, Coordinate systems, Coordinates, Drawing, Graphics, NeedsBeginnerUpdate, SVG, SVG:Tutorial |
In this article, we examine how Scalable Vector Graphics (SVG) represents the positions and sizes of objects within a drawing context, including coordinate system and what a "pixel" measurement means in a scalable context. | ||
283 | SVG Filters Tutorial | SVG filters primitives |
SVG allows us to use similar tools as the bitmap description language such as the use of shadow, blur effects or even merging the results of different filters. With the filter element <filter > it is possible to add these effects and later on attach them to an object. |
||
284 | SVG In HTML Introduction | Intermediate, NeedsUpdate, SVG |
This article and its associated example shows how to use inline SVG to provide a background picture for a form. It shows how JavaScript and CSS can be used to manipulate the picture in the same way you would script regular HTML. | ||
285 | SVG and CSS | CSS, CSS:Getting_Started, Example, Guide, Intermediate, NeedsUpdate, SVG, Web |
Below you'll create a simple demonstration that runs in your SVG-enabled browser. | ||
286 | SVG fonts | Advanced, NeedsUpdate, SVG, SVG:Tutorial |
When SVG was specified, support for web fonts was not widespread in browsers. Since accessing the correct font file is however crucial for rendering text correctly, a font description technology was added to SVG to provide this ability. It was not meant for compatibility with other formats like PostScript or OTF, but rather as a simple means of embedding glyph information into SVG when rendered. | ||
287 | SVG image element | Beginner, NeedsBeginnerUpdate, NeedsContent, NeedsUpdate, SVG, Tutorial |
The SVG <image> element allows for raster images to be rendered within an SVG object. |
||
288 | Texts | Intermediate, SVG, SVG:Tutorial |
When talking about text in SVG we have to differentiate two almost completely separate topics. The one is the inclusion and display of text in an image, and the other are SVG fonts. The latter may be described in a later section of the tutorial, while we will focus completely on the first part: Bringing text into an SVG image. | ||
289 | Tools for SVG | Intermediate, NeedsUpdate, SVG, Tools |
Now that we covered the basics of the SVG internals, we will take a look at some tools to work with SVG files. | ||
290 | SVG animation with SMIL | Animation, Firefox 4, Gecko 2.0, SVG, SVG Animation |
Firefox 4 introduced support for animating SVG using Synchronized Multimedia Integration Language (SMIL). SMIL allows you to: | ||
291 | SVG as an Image | Images, NeedsContent, SVG |
SVG images can be used as an image format, in a number of contexts. Many browsers support SVG images in: | ||
292 | SVG documentation index | SVG |
Found 383 pages: | ||
293 | SVG element reference | Drawing, Elements, Responsive Design, SVG, SVG Reference, Vector Graphics, l10n:priority |
SVG drawings and images are created using a wide array of elements which are dedicated to the construction, drawing, and layout of vector images and diagrams. Here you'll find reference documentation for each of the SVG elements. | ||
294 | <a> | Element, Reference, SVG, SVG Container |
The <a> SVG element creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other URL. It is very similar to HTML’s <a> element. |
||
295 | <altGlyph> | Deprecated, Element, Reference, SVG, SVG Text Content |
The <altGlyph> SVG element allows sophisticated selection of the glyphs used to render its child character data. |
||
296 | <altGlyphDef> | Deprecated, Element, NeedsExample, Reference, SVG, SVG Text Content |
The <altGlyphDef> SVG element defines a substitution representation for glyphs. |
||
297 | <altGlyphItem> | Deprecated, Element, NeedsExample, Reference, SVG, SVG Text Content |
The <altGlyphItem> element provides a set of candidates for glyph substitution by the <altGlyph> element. |
||
298 | <animate> | Element, SVG, SVG Animation |
The SVG <animate> element provides a way to animate an attribute of an element over time. |
||
299 | <animateColor> | Deprecated, Element, SVG, SVG Animation |
The <animateColor> SVG element specifies a color transformation over time. |
||
300 | <animateMotion> | Element, SVG, SVG Animation |
The SVG <animateMotion> element let define how an element moves along a motion path. |
||
301 | <animateTransform> | Element, SVG, SVG Animation |
The animateTransform element animates a transformation attribute on its target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing. |
||
302 | <circle> | Circle, Element, Graphics, Reference, SVG |
The <circle> SVG element is an SVG basic shape, used to draw circles based on a center point and a radius. |
||
303 | <clipPath> | Element, Reference, SVG |
The <clipPath> SVG element defines a clipping path, to be used by the clip-path property. |
||
304 | <color-profile> | Element, NeedsExample, Reference, SVG |
The <color-profile> element allows describing the color profile used for the image. |
||
305 | <cursor> | Deprecated, Element, NeedsExample, Reference, SVG |
The <cursor> SVG element can be used to define a platform-independent custom cursor. A recommended approach for defining a platform-independent custom cursor is to create a PNG image and define a cursor element that references the PNG image and identifies the exact position within the image which is the pointer position (i.e., the hot spot). |
||
306 | <defs> | SVG, SVG Container |
The <defs> element is used to store graphical objects that will be used at a later time. Objects created inside a <defs> element are not rendered directly. To display them you have to reference them (with a <use> element for example). |
||
307 | <desc> | Element, SVG, SVG Descriptive |
The <desc> element provides an accessible, long-text description of any SVG container element or graphics element. |
||
308 | <discard> | Element, NeedsExample, Reference, SVG, SVG Animation |
The <discard> SVG element allows authors to specify the time at which particular elements are to be discarded, thereby reducing the resources required by an SVG user agent. This is particularly useful to help SVG viewers conserve memory while displaying long-running documents. |
||
309 | <ellipse> | Element, Reference, SVG, SVG Graphics |
The <ellipse> element is an SVG basic shape, used to create ellipses based on a center coordinate, and both their x and y radius. |
||
310 | <feBlend> | Element, SVG, SVG Filter |
The <feBlend> SVG filter primitive composes two objects together ruled by a certain blending mode. This is similar to what is known from image editing software when blending two layers. The mode is defined by the mode attribute. |
||
311 | <feColorMatrix> | Element, SVG, SVG Filter |
The <feColorMatrix> SVG filter element changes colors based on a transformation matrix. Every pixel's color value [R,G,B,A] is matrix multiplied by a 5 by 5 color matrix to create new color [R',G',B',A'] . |
||
312 | <feComponentTransfer> | Element, SVG, SVG Filter |
Th <feComponentTransfer> SVG filter primitive performs color-component-wise remapping of data for each pixel. It allows operations like brightness adjustment, contrast adjustment, color balance or thresholding. |
||
313 | <feComposite> | Element, NeedsExample, SVG, SVG Filter |
The <feComposite> SVG filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over , in , atop , out , xor , and lighter . Additionally, a component-wise arithmetic operation (with the result clamped between [0..1]) can be applied. |
||
314 | <feConvolveMatrix> | Element, Filters, SVG, SVG Filter |
The <feConvolveMatrix> SVG filter primitive applies a matrix convolution filter effect. A convolution combines pixels in the input image with neighboring pixels to produce a resulting image. A wide variety of imaging operations can be achieved through convolutions, including blurring, edge detection, sharpening, embossing and beveling. |
||
315 | <feDiffuseLighting> | Element, SVG, SVG Filter |
The <feDiffuseLighting> SVG filter primitive lights an image using the alpha channel as a bump map. The resulting image, which is an RGBA opaque image, depends on the light color, light position and surface geometry of the input bump map. |
||
316 | <feDisplacementMap> | Element, SVG, SVG Filter |
The <feDisplacementMap> SVG filter primitive uses the pixel values from the image from in2 to spatially displace the image from in . |
||
317 | <feDistantLight> | Element, Filters, NeedsExample, Reference, SVG, SVG Light Source |
The <feDistantLight> filter primitive defines a distant light source that can be used within a lighting filter primitive: <feDiffuseLighting> or <feSpecularLighting> . |
||
318 | <feDropShadow> | Element, Filters, Reference, SVG |
The SVG <feDropShadow> filter primitive creates a drop shadow of the input image. It can only be used inside a <filter> element. |
||
319 | <feFlood> | Element, SVG, SVG Filter |
The <feFlood> SVG filter primitive fills the filter subregion with the color and opacity defined by flood-color and flood-opacity . |
||
320 | <feFuncA> | Element, NeedsExample, Reference, SVG, SVG Filter |
The <feFuncA> SVG filter primitive defines the transfer function for the alpha component of the input graphic of its parent <feComponentTransfer> element. |
||
321 | <feFuncB> | Element, NeedsExample, Reference, SVG, SVG Filter |
The <feFuncB> SVG filter primitive defines the transfer function for the blue component of the input graphic of its parent <feComponentTransfer> element. |
||
322 | <feFuncG> | Element, NeedsExample, Reference, SVG, SVG Filter |
The <feFuncG> SVG filter primitive defines the transfer function for the green component of the input graphic of its parent <feComponentTransfer> element. |
||
323 | <feFuncR> | Element, NeedsExample, Reference, SVG, SVG Filter |
The <feFuncR> SVG filter primitive defines the transfer function for the red component of the input graphic of its parent <feComponentTransfer> element. |
||
324 | <feGaussianBlur> | Element, SVG, SVG Filter |
The <feGaussianBlur> SVG filter primitive blurs the input image by the amount specified in stdDeviation , which defines the bell-curve. |
||
325 | <feImage> | Element, SVG, SVG Filter |
The <feImage> SVG filter primitive fetches image data from an external source and provides the pixel data as output (meaning if the external source is an SVG image, it is rasterized.) |
||
326 | <feMerge> | Element, Reference, SVG, SVG Filter |
The <feMerge> SVG element allows filter effects to be applied concurrently instead of sequentially. This is achieved by other filters storing their output via the result attribute and then accessing it in a <feMergeNode> child. |
||
327 | <feMergeNode> | Element, NeedsContent, NeedsExample, Reference, SVG, SVG Filter |
The feMergeNode takes the result of another filter to be processed by its parent <feMerge> . |
||
328 | <feMorphology> | Element, NeedsBrowserCompatibility, NeedsContent, NeedsMobileBrowserCompatibility, SVG, SVG Filter |
The <feMorphology> SVG filter primitive is used to erode or dilate the input image. Its usefulness lies especially in fattening or thinning effects. |
||
329 | <feOffset> | Element, SVG, SVG Filter |
The <feOffset> SVG filter primitive allows to offset the input image. The input image as a whole is offset by the values specified in the dx and dy attributes. |
||
330 | <fePointLight> | Element, Reference, SVG, SVG Filter, SVG Light Source |
The <fePointLight> filter primitive defines a light source which allows to create a point light effect. It that can be used within a lighting filter primitive: <feDiffuseLighting> or <feSpecularLighting> . |
||
331 | <feSpecularLighting> | Element, NeedsBrowserCompatibility, NeedsMobileBrowserCompatibility, SVG, SVG Filter |
The <feSpecularLighting> SVG filter primitive lights a source graphic using the alpha channel as a bump map. The resulting image is an RGBA image based on the light color. The lighting calculation follows the standard specular component of the Phong lighting model. The resulting image depends on the light color, light position and surface geometry of the input bump map. The result of the lighting calculation is added. The filter primitive assumes that the viewer is at infinity in the z direction. |
||
332 | <feSpotLight> | Element, NeedsBrowserCompatibility, NeedsMobileBrowserCompatibility, Reference, SVG, SVG Filter |
The <feSpotLight> SVG filter primitive defines a light source which allows to create a spotlight effect. It that can be used within a lighting filter primitive: <feDiffuseLighting> or <feSpecularLighting> . |
||
333 | <feTile> | Element, NeedsBrowserCompatibility, NeedsMobileBrowserCompatibility, SVG, SVG Filter |
The <feTile> SVG filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image. The effect is similar to the one of a <pattern> . |
||
334 | <feTurbulence> | Element, SVG, SVG Filter |
The <feTurbulence> SVG filter primitive creates an image using the Perlin turbulence function. It allows the synthesis of artificial textures like clouds or marble. The resulting image will fill the entire filter primitive subregion. |
||
335 | <filter> | Element, Reference, SVG |
The <filter> SVG element defines a custom filter effect by grouping atomic filter primitives. It is never rendered itself, but must be used by the filter attribute on SVG elements, or the filter CSS property for SVG/HTML elements. |
||
336 | <font-face-format> | Deprecated, Element, NeedsExample, Reference, SVG, SVG Font |
The <font-face-format> SVG element describes the type of font referenced by its parent <font-face-uri> . |
||
337 | <font-face-name> | Deprecated, Element, NeedsExample, Reference, SVG, SVG Font |
The <font-face-name> element points to a locally installed copy of this font, identified by its name. |
||
338 | <font-face-src> | Deprecated, Element, NeedsExample, Reference, SVG, SVG Font |
The <font-face-src> SVG element corresponds to the src descriptor in CSS @font-face rules. It serves as container for <font-face-name> , pointing to locally installed copies of this font, and <font-face-uri> , utilizing remotely defined fonts. |
||
339 | <font-face-uri> | Deprecated, Element, NeedsExample, Reference, SVG, SVG Font |
The <font-face-uri> SVG element points to a remote definition of the current font. |
||
340 | <font-face> | Deprecated, Element, NeedsBrowserCompatibility, NeedsExample, NeedsMobileBrowserCompatibility, Reference, SVG, SVG Font |
The <font-face> SVG element corresponds to the CSS @font-face rule. It defines a font's outer properties. |
||
341 | <font> | Deprecated, Element, NeedsExample, Reference, SVG, SVG Font |
The <font> SVG element defines a font to be used for text layout. |
||
342 | <foreignObject> | Element, Reference, SVG |
The <foreignObject> SVG element includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML. |
||
343 | <g> | Element, Reference, SVG, SVG Container |
The <g> SVG element is a container used to group other SVG elements. |
||
344 | <glyph> | Element, Reference, SVG, SVG Text Content |
A <glyph> defines a single glyph in an SVG font. |
||
345 | <glyphRef> | Deprecated, Element, NeedsExample, Reference, SVG, SVG Text Content |
The glyphRef element provides a single possible glyph to the referencing <altGlyph> substitution. |
||
346 | <hatch> | Element, Experimental, Filters, NeedsBrowserCompatibility, NeedsMobileBrowserCompatibility, Reference, SVG |
The <hatch> SVG element is used to fill or stroke an object using one or more pre-defined paths that are repeated at fixed intervals in a specified direction to cover the areas to be painted. |
||
347 | <hatchpath> | Element, Experimental, Filters, Reference, SVG |
The <hatchpath> SVG element defines a hatch path used by the <hatch> element. |
||
348 | <hkern> | Deprecated, Element, NeedsExample, Reference, SVG, SVG Font |
The <hkern> SVG element allows to fine-tweak the horizontal distance between two glyphs. This process is known as kerning. |
||
349 | <image> | Element, Reference, SVG, SVG Graphics |
The <image> SVG element includes images inside SVG documents. It can display raster image files or other SVG files. |
||
350 | <line> | Element, Reference, SVG, SVG Graphics |
The <line> element is an SVG basic shape used to create a line connecting two points. |
||
351 | <linearGradient> | Element, SVG, SVG Gradient |
The <linearGradient> element lets authors define linear gradients that can be applied to fill or stroke of graphical elements. |
||
352 | <marker> | Element, SVG, SVG Container |
The <marker> element defines the graphic that is to be used for drawing arrowheads or polymarkers on a given <path> , <line> , <polyline> or <polygon> element. |
||
353 | <mask> | Element, SVG, SVG Container |
The <mask> element defines an alpha mask for compositing the current object into the background. A mask is used/referenced using the mask property. |
||
354 | <metadata> | Element, SVG, SVG Descriptive |
The <metadata> SVG element adds metadata to SVG content. Metadata is structured information about data. The contents of <metadata> should be elements from other XML namespaces such as RDF, FOAF, etc. |
||
355 | <missing-glyph> | Deprecated, Element, NeedsExample, SVG, SVG Container |
The <missing-glyph> SVG element's content is rendered, if for a given character the font doesn't define an appropriate <glyph> . |
||
356 | <mpath> | Element, NeedsExample, Reference, SVG, SVG Animation |
The <mpath> sub-element for the <animateMotion> element provides the ability to reference an external <path> element as the definition of a motion path. |
||
357 | <path> | Element, Reference, SVG, SVG Graphics |
The <path> SVG element is the generic element to define a shape. All the basic shapes can be created with a path element. |
||
358 | <pattern> | Element, SVG, SVG Container |
The <pattern> element defines a graphics object which can be redrawn at repeated x- and y-coordinate intervals ("tiled") to cover an area. |
||
359 | <polygon> | Element, Reference, SVG, SVG Graphics |
The <polygon> element defines a closed shape consisting of a set of connected straight line segments. The last point is connected to the first point. |
||
360 | <polyline> | Element, Reference, SVG, SVG Graphics |
The <polyline> SVG element is an SVG basic shape that creates straight lines connecting several points. Typically a polyline is used to create open shapes as the last point doesn't have to be connected to the first point. For closed shapes see the <polygon> element. |
||
361 | <radialGradient> | Element, SVG, SVG Gradient |
The <radialGradient> element lets authors define radial gradients that can be applied to fill or stroke of graphical elements. |
||
362 | <rect> | Element, Reference, SVG, SVG Graphics |
The <rect> element is a basic SVG shape that draws rectangles, defined by their position, width, and height. The rectangles may have their corners rounded. |
||
363 | <script> | Element, Reference, SVG |
The SVG script element allows to add scripts to an SVG document. |
||
364 | <set> | Element, SVG, SVG Animation |
The SVG <set> element provides a simple means of just setting the value of an attribute for a specified duration. |
||
365 | <solidcolor> | Element, Experimental, Reference, SVG |
The <solidcolor> SVG element lets authors define a single color for use in multiple places in an SVG document. It is also useful as away of animating a palette colors. |
||
366 | <stop> | Element, Reference, SVG, SVG Gradient |
The SVG <stop> element defines a color and its position to use on a gradient. This element is always a child of a <linearGradient> or <radialGradient> element. |
||
367 | <style> | Element, Reference, SVG |
The SVG <style> element allows style sheets to be embedded directly within SVG content. |
||
368 | <svg> | Element, Reference, SVG, SVG Container, Web |
The svg element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document. |
||
369 | <switch> | Element, NeedsExample, SVG, SVG Container |
The <switch> SVG element evaluates any requiredFeatures , requiredExtensions and systemLanguage attributes on its direct child elements in order, and then renders the first child where these attributes evaluate to true. |
||
370 | <symbol> | SVG, SVG Container |
The <symbol> element is used to define graphical template objects which can be instantiated by a <use> element. |
||
371 | <text> | Element, Reference, SVG, SVG Text Content |
The SVG <text> element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text> , like any other SVG graphics element. |
||
372 | <textPath> | Element, Reference, SVG, SVG Text Content |
To render text along the shape of a <path> , enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element. |
||
373 | <title> — the SVG accessible name element | Element, Reference, SVG, SVG Descriptive |
The <title> element provides an accessible, short-text description of any SVG container element or graphics element. |
||
374 | <tref> | Element, Reference, SVG, SVG Text Content |
The textual content for a <text> SVG element can be either character data directly embedded within the <text> element or the character data content of a referenced element, where the referencing is specified with a <tref> element. |
||
375 | <tspan> | Element, Reference, SVG, SVG Text Content |
The SVG <tspan> element defines a subtext within a <text> element or another <tspan> element. It allows for adjustment of the style and/or position of that subtext as needed. |
||
376 | <use> | Element, Reference, SVG, SVG Graphics |
The <use> element takes nodes from within the SVG document, and duplicates them somewhere else. |
||
377 | <view> | Element, NeedsExample, Reference, SVG |
A view is a defined way to view the image, like a zoom level or a detail view. | ||
378 | <vkern> | Deprecated, Element, NeedsExample, Reference, SVG, SVG Font |
The <vkern> SVG element allows to fine-tweak the vertical distance between two glyphs in top-to-bottom fonts. This process is known as kerning. |
||
379 | Scripting | Graphics, SVG, Scripting, default, eventListeners, preventing, setProperty |
One can override default browser behaviors with the evt.preventDefault( ) method, add eventListeners to objects with the syntax element.addEventListener(event, function, useCapture), and set element properties with syntax svgElement.style.setProperty("fill-opacity", "0.0", ""). Note the existence of all three arguments setting properties. |
||
380 | Server Configuration | SVG |
See http://wiki.svg.org/Server_Configuration | ||
381 | Sizing | SVG |
This page was auto-generated because a user created a sub-page to this page. | ||
382 | Specification Deviations | SVG |
There are a few places where we have consciously decided to make Gecko deviate from or extend the SVG specification. This page lists those deviations/extensions and our reasoning for them. | ||
383 | mimeTypes.rdf corruption | SVG |
This page explains a problem that can cause SVG to stop working in Mozilla due to the way Mozilla maps filename extensions to media types. | ||