<a> |
Creates a hyperlink around an SVG element |
xlink:show <br>xlink:actuate <br>xlink:href <br>target |
<altGlyph> |
Allows control of the glyphs used to render particular character data |
x <br>y <br>dx <br>dy <br>rotate <br>glyphRef <br>format <br>xlink:href |
<altGlyphDef> |
Defines a substitution representation for glyphs |
id |
<altGlyphItem> |
Defines a candidate set of glyph substitutions |
id |
<animate> |
Animates an attribute over time |
attributeName="target attribute name" <br>from="start value" <br>to="end value" <br>dur="duration" <br>repeatCount="number of times the animation will occur" |
<animateColor> |
Defines a color transformation over time |
by="relative offset value" <br>from="start value" <br>to="end value" |
<animateMotion> |
Causes an element to follow a motion path |
calcMode="interpolation mode for the animation, can be 'discrete', 'linear', 'paced', 'spline'" <br>path="motion path" <br>keyPoints="how far along the motion path the object should move at the current time" <br>rotate="apply rotation transformation" <br>xlink:href="a URI reference to a <path> element that defines the motion path" |
<animateTransform> |
Animates a transformation attribute on a target element, allowing control of translation, scaling, rotation, or skew |
by="relative offset value" <br>from="start value" <br>to="end value" <br>type="type of transformation whose value changes over time, can be 'translate', 'scale', 'rotate', 'skewX', 'skewY'" |
<circle> |
Defines a circle |
cx="x-axis coordinate of the center of the circle" <br>cy="y-axis coordinate of the center of the circle" <br>r="radius of the circle". Required. <br>+ Presentation Attributes: Color, FillStroke, Graphics |
<clipPath> |
Defines a clipping path. Content outside the clip path is not drawn |
clip-path="reference to clip paths and intersections of clip paths" <br>clipPathUnits="userSpaceOnUse' or 'objectBoundingBox". The second value uses a small fraction of the unit for the bounding box of the object (default: "userSpaceOnUse")" |
<color-profile> |
Specifies a color profile description (used with CSS style sheets) |
local="unique ID for the locally stored color profile" <br>name="" <br>rendering-intent="auto |
perceptual |
relative-colorimetric |
saturation |
absolute-colorimetric" <br>xlink:href="URI of the ICC profile resource" |
<cursor> |
Defines a custom cursor, independent of the platform |
x="x-axis top-left corner of the cursor (default is 0)" <br>y="y-axis top-left corner of the cursor (default is 0)" <br>xlink:href="URI of the cursor image to use" |
<defs> |
Container for referenced elements |
|
<desc> |
A text description of an element in SVG, not displayed as part of the graphic. User agents may display this as a tooltip |
|
<ellipse> |
Defines an ellipse |
cx="x-axis coordinate of the center of the ellipse" <br>cy="y-axis coordinate of the center of the ellipse" <br>rx="radius of the ellipse along the x-axis". Required. <br>ry="radius of the ellipse along the y-axis". Required. <br>+ Presentation Attributes: Color, FillStroke, Graphics |
<feBlend> |
Combines two objects together using different blending modes |
mode="image blending mode: normal |
multiply |
screen |
darken |
lighten" <br>in="identifies the given filter primitive input: SourceGraphic |
SourceAlpha |
BackgroundImage |
BackgroundAlpha |
FillPaint |
StrokePaint |
<filter-primitive-reference>" <br>in2="second input image for the blending operation" |
<feColorMatrix> |
SVG filter. Applies matrix transformation |
|
<feComponentTransfer> |
SVG filter. Performs component-wise remapping of data |
|
<feComposite> |
SVG filter |
|
<feConvolveMatrix> |
SVG filter |
|
<feDiffuseLighting> |
SVG filter |
|
<feDisplacementMap> |
SVG filter |
|
<feDistantLight> |
SVG filter. Defines a light source |
|
<feFlood> |
SVG filter |
|
<feFuncA> |
SVG filter. Child element of <feComponentTransfer> |
|
<feFuncB> |
SVG filter. Child element of <feComponentTransfer> |
|
<feFuncG> |
SVG filter. Child element of <feComponentTransfer> |
|
<feFuncR> |
SVG filter. Child element of <feComponentTransfer> |
|
<feGaussianBlur> |
SVG filter. Performs a Gaussian blur on the image |
|
<feImage> |
SVG filter. |
|
<feMerge> |
SVG filter. Builds image layers on top of each other |
|
<feMergeNode> |
SVG filter. Child element of <feMerge> |
|
<feMorphology> |
SVG filter. Performs "fattening" or "thinning" on the source graphic |
|
<feOffset> |
SVG filter. Moves the image relative to its current position |
|
<fePointLight> |
SVG filter |
|
<feSpecularLighting> |
SVG filter |
|
<feSpotLight> |
SVG filter |
|
<feTile> |
SVG filter |
|
<feTurbulence> |
SVG filter |
|
<filter> |
Container for filter effects |
|
<font> |
Defines a font |
|
<font-face> |
Describes the characteristics of a font |
|
<font-face-format> |
|
|
<font-face-name> |
|
|
<font-face-src> |
|
|
<font-face-uri> |
|
|
<foreignObject> |
|
|
<g> |
Container element for grouping related elements |
id="name of the group" <br>fill="fill color for the group" <br>opacity="opacity of the group" <br>+ Presentation Attributes: All |
<glyph> |
Defines the graphic for a given glyph |
|
<glyphRef> |
Defines the possible glyphs to use |
|
<hkern> |
|
|
<image> |
Defines an image |
x="x-axis coordinate of the top-left corner of the image" <br>y="y-axis coordinate of the top-left corner of the image" <br>width="width of the image". Required. <br>height="height of the image". Required. <br>xlink:href="path to the image". Required. <br>+ Presentation Attributes: Color, Graphics, Images, Viewports |
<line> |
Defines a line |
x1="x-axis coordinate of the starting point of the line" <br>y1="y-axis coordinate of the starting point of the line" <br>x2="x-axis coordinate of the ending point of the line" <br>y2="y-axis coordinate of the ending point of the line" <br>+ Presentation Attributes: Color, FillStroke, Graphics, Markers |
<linearGradient> |
Defines a linear gradient. Fills an object with a linear gradient along a vector |
id="unique name for the gradient. References must" <br>gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. Determines the relative position of vector points using the viewport or object. (Default is 'objectBoundingBox')" <br>gradientTransform="transformation applied to the gradient" <br>x1="x starting point of the gradient vector (default 0%)" <br>y1="y starting point of the gradient vector (default 0%)" <br>x2="x end point of the gradient vector. (default 100%)" <br>y2="y end point of the gradient vector. (default 0%)" <br>spreadMethod="'pad' or 'reflect' or 'repeat'" <br>xlink:href="reference to another gradient whose attribute values are used as defaults and stops included. Recursive" |
<marker> |
Markers can be placed on the vertices of lines, polylines, polygons, and paths. These elements can use the "marker-start", "marker-mid", and "marker-end" attributes, which inherit by default or can be set to "none" or a defined marker's URI. You must define the marker before you can reference it by its URI. Any shape can be placed inside a marker. They are attached to the top when drawing elements |
markerUnits="strokeWidth' or 'userSpaceOnUse". If 'strokeWidth', one unit equals one stroke width. Otherwise, the marker scale does not use the same view units as the referencing element (default is 'strokeWidth')" <br>refx="position where the marker connects to the vertex (default is 0)" <br>refy="position where the marker connects to the vertex (default is 0)" <br>orient="'auto' always displays the marker at an angle. 'auto' will calculate an angle such that the x-axis is tangent to one vertex (default is 0)" <br>markerWidth="width of the marker (default is 3)" <br>markerHeight="height of the marker (default is 3)" <br>viewBox="the points "seen" in this SVG drawing area. Four values separated by spaces or commas. (min x, min y, width, height)" <br>+ Presentation Attributes: All |
| <mask> |
Masking is a combination of opacity values and clipping. Like clipping, you can use graphics, text, or paths to define the mask's parts. A mask's default state is fully transparent, which is the opposite of the clipping plane. Set the opaque parts of the mask in the graphic settings |
maskUnits="'userSpaceOnUse' or 'objectBoundingBox'. Determines whether the clipping plane is relative to the entire viewport or the object (default: 'objectBoundingBox')" <br>maskContentUnits="The second mask uses percentages for the graphic position relative to the object 'userSpaceOnUse' or 'objectBoundingBox' (default: 'userSpaceOnUse')" <br>x="Clipping plane mask (default: -10%)" <br>y="Clipping plane mask (default: -10%)" <br>width="Clipping plane mask (default: 120%)" <br>height="Clipping plane mask (default: 120%)" |
| metadata |
Specifies metadata |
|
| missing-glyph |
|
|
| mpath |
|
|
| <path> |
Defines a path |
d="Defines path instructions" <br>pathLength="If present, the path will be scaled so that the computed path length equals this value" <br>transform="Transformation list" <br> <br>+ Presentation attributes: <br>Color, FillStroke, Graphics, Markers |
| <pattern> |
Defines coordinates, the view you want to display, and the view size. Then add shapes to your pattern. The pattern repeats when it hits the edges of the viewbox (visual range) |
id="Unique ID for referencing this pattern. Required." <br>patternUnits="userSpaceOnUse' or 'objectBoundingBox". The second value X, Y, width, height will use a small portion of the pattern object's bounding box, in units (%)." <br>patternContentUnits="'userSpaceOnUse' or 'objectBoundingBox'" <br>patternTransform="Allows the entire expression to be transformed" <br>x="Offset of the pattern from the top left corner (default: 0)" <br>y="Offset of the pattern from the top left corner (default: 0)" <br>width="Width of the pattern tiling (default: 100%)" <br>height="Height of the pattern tiling (default: 100%)" <br>viewBox="Points "seen" in this SVG drawing area. Four values separated by spaces or commas. (min x, min y, width, height)" <br>xlink:href="Another pattern whose attribute values are defaults and any subclasses can inherit. Recursive" <br> |
| <polygon> |
Defines a shape with at least three sides |
points="Points of the polygon. The total number of points must be even". Required. <br>fill-rule="Part of the FillStroke presentation attribute" <br> <br>+ Presentation attributes: <br>Color, FillStroke, Graphics, Markers |
| <polyline> |
Defines an arbitrary shape composed only of straight lines |
points="Points on the polyline". Required. <br> <br>+ Presentation attributes: <br>Color, FillStroke, Graphics, Markers |
| <radialGradient> |
Defines a radial gradient. A radial gradient creates a circle |
gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. Uses the viewport or object to determine the relative position of vector points. (default: 'objectBoundingBox')" <br>gradientTransform="Transformation applied to the gradient" <br>cx="Center point of the gradient (number or % - 50% is default)" <br>cy="Center point of the gradient. (default: 50%)" <br>r="Radius of the gradient. (default: 50%)" <br>fx="Focus point of the gradient. (default: 0%)" <br>fy="Focus point of the gradient. (default: 0%)" <br>spreadMethod="'pad' or 'reflect' or 'repeat'" <br>xlink:href="References another gradient whose attribute values are defaults. Recursive" |
| <rect> |
Defines a rectangle |
x="x-axis of the rectangle's top left corner" <br>y="y-axis of the rectangle's top left corner" <br>rx="Radius on the x-axis (round element)" <br>ry="Radius on the y-axis (round element)" <br>width="Width of the rectangle". Required. <br>height="Height of the rectangle". Required. <br> <br>+ Presentation attributes: <br>Color, FillStroke, Graphics |
| script |
Script container. (e.g., ECMAScript) |
|
| set |
Sets an attribute value over a specified time |
|
| <stop> |
Gradient stop |
offset="Stop offset (0 to 1/0% to 100%)". Reference <br>stop-color="Color of this stop" <br>stop-opacity="Opacity of this stop (0 to 1)" |
| style |
Allows style sheets to be embedded directly within SVG content |
|
| <svg> |
Creates an SVG document fragment |
x="Top left corner embedding (default: 0)" <br>y="Top left corner embedding (default: 0)" <br>width="Width of the SVG fragment (default: 100%)" <br>height="Height of the SVG fragment (default: 100%)" <br>viewBox="Points "seen" in this SVG drawing area. Four values separated by spaces or commas. (min x, min y, width, height)" <br>preserveAspectRatio="'none' or any of the 9 combinations of 'xVALYVAL', where VAL is 'min', 'mid', or 'max'. (default: none)" <br>zoomAndPan="'magnify' or 'disable'. The magnify option allows the user to pan and zoom the file (default: magnify)" <br>xml="The outermost <svg> element needs to set up the SVG and its namespace: xmlns="http://www.w3.org/2000/svg" <br> xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"" <br> <br>+ Presentation attributes: <br>All |
| switch |
|
|
| symbol |
|
|
| <text> |
Defines a text |
x="List of X-axis positions. The nth character's position is at the nth x-axis. If there are additional characters, they are placed after the last character. 0 is default" <br>y="List of Y-axis positions. (refer to x) 0 is default" <br>dx="Moves relative to the absolute position of the last drawn glyph in the list of character lengths. (refer to x)" <br>dy="Moves relative to the absolute position of the last drawn glyph in the list of character lengths. (refer to x)" <br>rotate="A list of rotations. The nth rotation is for the nth character. Additional characters take the last rotation value" <br>textLength="The SVG viewer will try to display the text with spacing/or glyph adjustments to achieve the target length of the text. (default: normal text length)" <br>lengthAdjust="Tells the viewer to try to adjust to render the text if the specified length is given. The two values are 'spacing' and 'spacingAndGlyphs'" <br> <br>+ Presentation attributes: <br>Color, FillStroke, Graphics, FontSpecification, TextContentElements |
| textPath |
|
|
| title |
A plain text description of elements within SVG - not displayed as part of the graphics. User agents will display this as a tooltip |
|
| <tref> |
References any <text> element within the SVG document and reuses it |
Same as the <TEXT> element |
| <tspan> |
Element is identical to <text>, but can nest text marks within and within itself |
Identical to the <text> element <br>+ in addition: <br>xlink:href="References a <TEXT> element" |
| <use> |
Uses a URI to reference a <g>, <svg>, or other graphical element with a unique ID attribute and duplicates the graphical element. The copy is of the original element, so the original in the file is just a reference. Any changes to the original affect all copies. |
x="x-axis of the top left corner of the cloned element" <br>y="y-axis of the top left corner of the cloned element" <br>width="Width of the cloned element" <br>height="Height of the cloned element" <br>xlink:href="URI referencing the cloned element" <br> <br>+ Presentation attributes: <br>All |
| view |
|
|
| vkern |
|
|