SVG Element Reference

SVG Element Reference

The SVG drawings and images are made utilizing a wide exhibit of elements which are devoted to the development, drawing, and format of vector pictures and charts.

Here you'll discover reference documentation for every one of the SVG elements. The SVG elements listed below Category wise.

SVG Animation Elements

<animate>

The <animate> element defines how an attribute of an element changes over the long time.

<animateColor>

The <animateColor> element specifies a color transformation over time.

<animateMotion>

The <animateMotion> element causes an element to move along a motion path.

<animateTransform>

The <animateTransform> element animates a transformation attribute on an element.

<discard>

The <discard> element allows authors to specify the time at which particular elements are to be discarded

<mpath>

The <mpath> is the sub element for the <animateMotion> element that gives the ability to reference an external <path> element as the meaning of a motion path.

<set>

The <set> element sets the value of an attribute for a specified duration.

SVG Basic Shape Elements

<circle>

The <circle> element defines a circle.

<ellipse>

The <ellipse> element defines a ellipse.

<line>

The element <line> used to define a line.

<polygon>

The element <polygon> used to define a polygon shape.

<polyline>

The <polyline> element defines a polyline shape.

<rect>

The element <rect> uses to defines a react shape.

SVG Container Elements

<a>

The <a> svg element is used to make hyperlinks in svg, it is similar to the HTML <a> tag.

<defs>

The element defines container for referenced elements

<g>

Element defines a container element for grouping together related elements

<marker>

Markers can be placed on the vertices of lines, polylines, polygons and paths.

<mask>

Masking is a combination of opacity values and clipping.

• <missing-glyph>

<pattern>

Defines the coordinates you want the view to show and the size of the view. Then you add shapes into your pattern.

<svg>

The element used to creates an SVG document fragment.

• <switch>
• <symbol>
• <unknown>

SVG Descriptive Elements

<desc>

A text-only description for elements in SVG - not displayed as part of the graphics. User agents may display the text as a tooltip

<metadata>

The element specifies metadata for an SVG document. Metadata is structured information about data. The contents of metadata elements should be elements from other XML namespaces such as Name, description, etc. 

<title>

A text-only description for elements in SVG - not displayed as part of the graphics. User agents may display the text as a tooltip

SVG Filter Primitive Elements

<feBlend>

SVG filter. Composites two objects together using different blending modes.

<feColorMatrix>

SVG filter. Applies a matrix transformation

<feComponentTransfer>

SVG filter. Performs component-wise remapping of data

• <feComposite>
• <feConvolveMatrix>
• <feDiffuseLighting>
• <feDisplacementMap>
• <feDropShadow>
• <feFlood>

<feFuncA>

SVG filter.

Sub-element to feComponentTransfer.

<feFuncB>

SVG filter.

Sub-element to feComponentTransfer.

<feFuncG>

SVG filter.

Sub-element to feComponentTransfer.

<feFuncR>

SVG filter.

Sub-element to feComponentTransfer.

<feGaussianBlur>

SVG filter. Performs a Gaussian blur on the image.

• <feImage>

<feMerge>

SVG filter. Creates image layers on top of each other

<feMergeNode>

SVG filter. Sub-element to feMerge.

<feMorphology>

SVG filter. Performs a "fattening" or "thinning" on a source graphic.

<feOffset>

SVG filter. Moves an image relative to its current position.

• <feSpecularLighting>
• <feTile>
• <feTurbulence>

SVG Font Elements

<font>

The element defines a font.

<font-face>

Describes the characteristics of a font.

<font-face-format>

The element defines the font face format.

<font-face-name>

The element specifis the font name.

<font-face-src>

The element defines a source of font.

• <font-face-uri>
• <hkern>
• <vkern>

SVG Gradient Elements

<linearGradient>

Defines a linear gradient, Linear gradients fill the object by using a vector, and can be defined as horizontal, vertical or angular gradients.

• <meshgradient>

<radialGradient>

Defines a radial gradient.

<stop>

The element stops for a gradient

SVG Graphics Elements

<circle>

The element defines circle.

<ellipse>

The element defines ellipse.

<image>

The element used to add image.

<line>

The element defines a line.

<mesh>

<path>

The element defines a path.

<polygon>

The element defines a polygon.

<polyline>

The element defines a polyline.

<rect>

The element defines react.

<text>

The element defines a text.

<use>

The element uses a URI to reference a <g> , <svg> or other graphical element with a unique id attribute and replicate it. The copy is only a reference to the original so only the original exists in the document. Any change to the original affects all copies.

SVG Graphics Referencing Elements

• <mesh>
• <use>
• <audio>

SVG Light Source Elements

• <feDistantLight>
• <fePointLight>
• <feSpotLight>

SVG Never-rendered Elements

• <clipPath>
• <defs>
• <hatch>
• <linearGradient>
• <marker>
• <mask>
• <meshgradient>
• <metadata>
• <pattern>
• <radialGradient>
• <script>
• <style>
• <symbol>
• <title>

SVG Paint Server Elements

• <hatch>
• <linearGradient>
• <meshgradient>
• <pattern>
• <radialGradient>
• <solidcolor>

SVG Renderable Elements

• <a>
• <circle>
• <ellipse>
• <foreignObject>
• <g>
• <image>
• <line>
• <mesh>
• <path>
• <polygon>
• <polyline>
• <rect>
• <svg>
• <switch>
• <symbol>
• <text>
• <textPath>
• <tspan>
• <unknown>
• <use>

SVG Shape Elements

• <circle>
• <ellipse>
• <line>
• <mesh>
• <path>
• <polygon>
• <polyline>
• <rect>

SVG Structural Elements

• <defs>
• <g>
• <svg>
• <symbol>
• <use>

SVG Text Content Elements

• <altGlyph>
• <altGlyphDef>
• <altGlyphItem>
• <glyph>
• <glyphRef>
• <textPath>
• <text>
• <tref>
• <tspan>

SVG Text content Child Elements

• <altGlyph>
• <textPath>
• <tref>
• <tspan>

SVG Uncategorized Elements

• <cursor>
• <filter>
• <foreignObject>
• <hatchpath>
• <meshpatch>
• <meshrow>
• <script>
• <style>
• <view>