Reference Manual of SVG

SVG Element

Element Description
<a> Create a link surrounding the SVG element.
<altGlyph> Provide control over the glyphs used to present specific character data.
<altGlyphDef> Define a substitution set for glyphs.
<altGlyphItem> Define a candidate set for glyph substitution.
<animate> Define how the attributes of an element change over time.
<animateMotion> Move the referenced element along the motion path.
<animateTransform> Animate the transformation attributes on the target element to allow animation control of translation, scaling, rotation, and/or skewing.
<circle> Define a circle.
<clipPath> Define a clipping path
<color-profile> Specify the color profile description (when using CSS to set the document style).
<cursor> Define a custom cursor independent of the platform.
<defs> Define the container of the referenced element.
<desc> Define a pure text description of the container element or graphical element in SVG.
<ellipse> Define an ellipse.
<feBlend> Combine two objects together according to a certain blending mode.
<feColorMatrix> SVG Filter. Apply matrix transformation.
<feComponentTransfer> SVG filter. Performs remapping of the data by component.
<feComposite> SVG filter. Performs intelligent pixel combination of two input images.
<feConvolveMatrix> SVG filter. Applies matrix convolution filter effects.
<feDiffuseLighting> SVG filter. Lighting image, using the alpha channel as the bump map.
<feDisplacementMap> SVG filter. Maps displacement.
<feDistantLight> SVG filter. Defines the light source.
<feFlood> SVG filter. Fills the area of the filter with a color.
<feFuncA> SVG filter. Defines a transformation function for the transparency (alpha) component of the input graphic.
<feFuncB> SVG filter. Defines a transformation function for the blue component of the input graphic.
<feFuncG> SVG filter. Defines a transformation function for the green component of the input graphic.
<feFuncR> SVG filter. Defines a transformation function for the red component of the input graphic.
<feGaussianBlur> SVG filter. Applies Gaussian blur to the image.
<feImage> SVG filter. Acquires image data from an external source and provides pixel data as output.
<feMerge> SVG filter. Creates overlapping layers of images.
<feMergeNode> SVG filter. Sub-element of feMerge.
<feMorphology> SVG filter. Performs 'fat' or 'thin' operations on the source graphic.
<feOffset> SVG filter. Moves the image relative to the current position.
<fePointLight> SVG filter.
<feSpecularLighting> SVG filter. Illuminates the source graphic, using the alpha channel as the bump map.
<feSpotLight> SVG filter. Light source element used in SVG files.
<feTile> SVG filter. The input image is tiled, and the result is used to fill the target.
<feTurbulence> SVG filter. Creates an image using the Perlin noise function.
<filter> Container for filter effects.
<font> Define the font.
<font-face> Describes the characteristics of the font.
<font-face-format> Describes the type of the font referenced by its parent <font-face-uri> element.
<font-face-name> Point to a copy of the locally installed font, identified by the font name.
<font-face-src> Equivalent to the @font-face attribute in the CSS specification.
<font-face-uri> Point to the current font at a remote definition.
<foreignObject> Allow elements from different XML namespaces to be included.
<g> Used to group elements.
<glyph> Define the graphic of a given glyph.
<glyphRef> Define the possible glyphs that can be used.
<hkern> Fine-tune the horizontal distance between two carved characters.
<image> Define an image.
<line> Define a line.
<linearGradient> Define a linear gradient.
<marker> Define the graphic used to draw an arrow or multi-sided marker on a given element.
<mask> Define a masking element.
<metadata> Specify metadata.
<missing-glyph> If the font does not define an appropriate <glyph> for a given character, present the content of the missing-glyph element.
<mpath> Reference an external <path> element as the definition of a motion path.
<path> Define a path.
<pattern> Define a pattern.
<polygon> Define a graphic containing at least three sides.
<polyline> Define any shape consisting only of straight lines.
<radialGradient> Define a radial gradient.
<rect> Define a rectangle.
<script> Define a script container (such as ECMAScript).
<set> Set the attribute value for the specified duration.
<stop> The stopping points of the gradient.
<style> Allow style sheets to be directly embedded into SVG content.
<svg> Create an SVG document fragment.
<switch> Evaluate attributes on the direct child elements in order, then process and present the first child evaluated to true.
<symbol> Define a graphic template object that can be instantiated with the <use> element.
<text> Define text.
<textPath> Place text according to the shape of the <path> element.
<title> Pure text description of elements in SVG. User agents can display the text as a tooltip.
<tref> Reference and reuse any <text> element within the SVG document.
<tspan> Similar to the <text> element, but can be nested within text tags and within itself.
<use> Acquire the target node within the SVG document and copy them elsewhere.
<view> A limited method of viewing images, like zoom level or detailed view.
<vkern> Precisely adjust the vertical distance between two characters (glyphs).