SVG drawings and images are created with different elements. Here, you can find a table of SVG elements with corresponding descriptions and attributes.
SVG elements
| Element | Description | Attributes |
|---|---|---|
| <a> | Creates a link to other web pages, files, email addresses, locations on the same page, or any other URL. | xlink:show xlink:actuate xlink:href target |
| <altGlyph> | Controls the glyphs used to render specific character data. | x y dx dy rotate glyphRef format xlink:href |
| <altGlyphDef> | Specifies a substitution set for glyphs. | id |
| <altGlyphItem> | Specifies a candidate set of glyph substitutions. | id |
| <animate> | Specifies how an element’s attribute changes over time. |
attributeName="the name of the target attribute"
by="a relative offset value" from="the starting value" to="the ending value" dur="the duration" repeatCount="the number of time the animation will take place" |
| <animateMotion> | Makes a referenced element to move along a motion path. | calcMode="interpolation mode for the animation. Can be 'discrete', 'linear', 'paced', 'spline'" path="motion path" keyPoints="how far the object will move along the motion path for each keyTimes values" rotate="rotation transformation" xlink:href="URI reference to the <path> element specifying the motion path" |
| <animateTransform> | Animates a transformation attribute on the target element, allowing animations to control translation, rotation, scaling, and/or skewing. | by="relative offset value" from="starting value" to="ending value" type="transformation type which is to have its values change in time. Can be 'translate', 'scale', 'rotate', 'skewX', 'skewY'" |
| <circle> | Specifies a circle. | cx="x-axis center of the circle" cy="y-axis center of the circle" r="radius of the circle". Required. presentation attributes: Color, FillStroke, Graphics |
| <clipPath> | Specifies a clipping path. | clip-path clipPathUnits="'userSpaceOnUse' or 'objectBoundingBox'. default: 'userSpaceOnUse' |
| <color-profile> | Specifies a description of the color profile used for the image. | local="unique ID for a color profile stored locally" name="" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" xlink:href="URI of an ICC profile resource" |
| <cursor> | Specifies a platform-independent custom cursor. | x="x-axis top-left corner of the cursor (default is 0)" y="y-axis top-left corner of the cursor (default is 0)" xlink:href="URI of the image to use as the cursor" |
| <defs> | Stores graphical objects that will be used later. | |
| <desc> | Provides a text-only description for any SVG graphics element or container element. | |
| <ellipse> | Specifies an ellipse. |
cx="x-axis center of the ellipse" cy="y-axis center of the ellipse" rx="length of the ellipse's radius along the x-axis". Required. ry="length of the ellipse's radius along the y-axis". Required. presentation attributes: Color, FillStroke, Graphics |
| <feBlend> | Blends two objects together. | mode="image blending modes normal|multiply|screen|darken|lighten" in="identifies input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="the second input image to the blending operation" |
| <feColorMatrix> | SVG filter. | |
| <feComposite> | SVG filter. | |
| <feConvolveMatrix> | SVG filter. | |
| <feDiffuseLighting> | SVG filter. | |
| <feDisplacementMap> | SVG filter. | |
| <feDistantLight> | SVG filter. | |
| <feFlood> | SVG filter. | |
| <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. Creates a Gaussian blur on the image. | |
| <feImage> | SVG filter. | |
| <feMerge> | SVG filter. Creates image layers. | |
| <feMergeNode> | SVG filter. Sub-element to feMerge. | |
| <feMorphology> | SVG filter. Performs a "thinning" or "fattening". | |
| <feOffset> | SVG filter. Offsets the input image. | |
| <fePointLight> | SVG filter. | |
| <feSpecularLighting> | SVG filter. | |
| <feSpotLight> | SVG filter. | |
| <feTile> | SVG filter. | |
| <feTurbulence> | SVG filter. | |
| <filter> | Specifies a custom filter effect. | |
| <font> | Specifies a font. | |
| <font-face> | Describes a font’s characteristics. | |
| <font-face-format> | Specifies the font type referenced by its parent <font-face-uri>. | |
| <font-face-name> | References a local font by name. | |
| <font-face-src> | Corresponds to the src descriptor within CSS @font-face rules. | |
| <font-face-uri> | Spesifies a remote definition of the current font | |
| <foreignObject> | Allows user agents to offer graphical rendering features besides those defined within the specification. | |
| <g> | Groups elements together. | id="name of the group" fill="fill color for the group" opacity="opacity for the group" presentation attributes: All |
| <glyph> | Specifies the graphics for a particular glyph. | |
| <glyphRef> | Specifies a possible glyph to use. | |
| <hkern> | Specifies kerning pairs and adjustment values in the horizontal advance value. | |
| <image> | Specifies an image. | x="x-axis top-left corner of the image" y="y-axis top-left corner of the image" width="width of the image". Required. height=" height of the image". Required. xlink:href="path to the image". Required. presentation attributes: Color, Graphics, Images, Viewports |
| <line> | Specifies a line. | x1="x start point of the line" y1="y start point of the line" x2="x end point of the line" y2="y end point of the line" presentation attributes: Color, FillStroke, Graphics, Markers |
| <linearGradient> | Specifies a linear gradient that fills the object by using a vector. | id="a unique id used to reference this pattern. Required to reference it"
gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. (Default 'objectBoundingBox')" gradientTransform="the transformation to apply to the gradient" x1="x start point of the gradient vector (number or % - 0% is default)" y1="y start point of the gradient vector. (0% default)" x2="x end point of the gradient vector. (100% default)" y2="y end point of the gradient vector. (0% default)" spreadMethod="'pad' or 'reflect' or 'repeat'" xlink:href="reference to another gradient attribute values of which are used as defaults and stops included. Recursive" |
| <marker> | Specifies the graphic that is to be used for drawing arrowheads. These elements can use the following marker attributes: "marker-start", "marker-mid" and "marker-end". Define the marker before referencing it via its URI. | markerUnits="'strokeWidth' or 'userSpaceOnUse'. If 'strokeWidth' is used, one unit is equal to one stroke width. Otherwise, the marker will not scale and will use the same view units as the referencing element (default 'strokeWidth')" refx="the position where the marker connects with the vertex (default 0)" refy="the position where the marker connects with the vertex (default 0)" orient="'auto' or an angle to always display the marker at. 'auto' will compute an angle making the x-axis a tangent of the vertex (default 0)" markerWidth="width of the marker (default 3)" markerHeight="height of the marker (default 3)" viewBox="SVG viewport’s bound for the current SVG fragment. 4 values are separated by white space or commas. (min x, min y, width, height)" presentation attributes: All |
| <mask> | Specifies an alpha mask, which is a combination of opacity values and clipping. Masking is a combination of opacity values and clipping. You can use text, shapes, or paths to define the mask sections. The default state of the mask is fully transparent. The graphics in a mask determine how opaque the mask portions are. | maskUnits="'userSpaceOnUse' or 'objectBoundingBox'. Specifies the coordinate system for x, y, height, and width on the <mask>. (default: 'objectBoundingBox')" maskContentUnits="Specifies the coordinate system for the content of <mask>. 'userSpaceOnUse' or 'objectBoundingBox' (default: 'userSpaceOnUse')" x="clipping plane of the mask (default: -10%)" y="clipping plane of the mask (default: -10%)" width="clipping plane of the mask (default: 120%)" height="clipping plane of the mask (default: 120%)" |
| <metadata> | Specifies metadata. | |
| <missing-glyph> | ||
| <mpath> | References an external <path> element as a definition of a motion path. | |
| <path> | Specifies a path. | d="a set of commands specifying the path" pathLength="the total length for the path" transform="a list of transformations" presentation attributes: Color, FillStroke, Graphics, Markers |
| <pattern> | Specifies a graphics object that can be redrawn at repeated coordinate intervals. | id="unique id used for referencing this pattern." Required. patternUnits="'userSpaceOnUse' or 'objectBoundingBox'. The second value makes units of x, y, height, width a fraction (or %) of the object bounding box that uses the pattern." patternContentUnits="'userSpaceOnUse' or 'objectBoundingBox'" patternTransform="the whole pattern can be transformed" x="pattern's offset from the top-left corner (default 0)" y="pattern's offset from the top-left corner. (default 0)" width="width of the pattern tile (default 100%)" height="height of the pattern tile (default 100%)" viewBox="the points "seen" in this SVG drawing area. 4 values are separated by white space or commas. (min x, min y, width, height)" xlink:href="reference to another pattern attribute values of which are used as defaults and any children are inherited. Recursive" |
| <polygon> | Specifies a graphic containing at least three sides. | points="the points of the polygon. The total number of points sould be even". Required. fill-rule="part of the FillStroke presentation attributes" presentation attributes: Color, FillStroke, Graphics, Markers |
| <polyline> | Specifies any shape consisting of only straight lines. | points="the points on the polyline". Required. presentation attributes: Color, FillStroke, Graphics, Markers |
| <radialGradient> | Specifies a radial gradient. | gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. (Default 'objectBoundingBox')" gradientTransform="transformation to apply to the gradient" cx="center point of the gradient (number or % - 50% is default)" cy="center point of the gradient. (50% default)" r="radius of the gradient. (50% default)" fx="focus point of the gradient. (0% default)" fy="focus point of the gradient. (0% default)" spreadMethod="'pad' or 'reflect' or 'repeat'" xlink:href="Reference to another gradient attribute values of which are used as defaults and stops included. Recursive" |
| <rect> | Specifies a rectangle. |
x="x-axis top-left corner of the rectangle" y="y-axis top-left corner of the rectangle" rx="x-axis radius (to round the element)" ry="y-axis radius (to round the element)" width="width of the rectangle". Required. height="height of the rectangle" Required. presentation attributes: Color, FillStroke, Graphics |
| <script> | Adds scripts to an SVG document. | |
| <set> | Sets an attribute’s value for a specified duration. | |
| <stop> | Specifies a color and its position to use on a gradient. | offset="offset for this stop (0 to 1/0% to 100%)". Required. stop-color="color of this stop" stop-opacity="opacity of this stop (0 to 1)" |
| <style> | Allows style sheets to be embedded inside an SVG content. | |
| <svg> | Creates a fragment of an SVG document. |
x="top left corner when embedded (default 0)" y="top left corner when embedded (default 0)" width="width of the svg fragment (default 100%)" height="height of the svg fragment (default 100%)" viewBox="the points "seen" in this SVG drawing area. 4 values are separated by white space or commas. (min x, min y, width, height)" preserveAspectRatio="'none' or any of the 9 combinations of 'xVALYVAL' where VAL is 'min', 'mid' or 'max'. (default xMidYMid)" zoomAndPan="'magnify' or 'disable'. (default magnify)" xml="outermost |
| <switch> | Allows displaying different shapes depending on the use of the language by the SVG viewer. | |
| <symbol> | Specifies the reusable symbols. | |
| <text> | Specifies a text. | x="a list of x-axis positions. The nth x-axis position is given to the nth character in the text. When there are additional characters after the positions run out they are placed after the last character. 0 is default" y="a list of y-axis positions. (see x). 0 is default" dx="a list of lengths that moves the characters relative to the absolute position of the last glyph drawn. (see x)" dy="a list of lengths that moves the characters relative to the absolute position of the last glyph drawn. (see x)" rotate="a list of rotations. The nth rotation is performed on the nth character." textLength="a target length for the text that the SVG viewer will try to display the text between by adjusting the spacing and/or the glyphs. (default: The text's normal length)" lengthAdjust="tells the viewer what to adjust to accomplish rendering the text if the length is specified. The two values are 'spacing' and 'spacingAndGlyphs'"< presentation attributes: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
| <textPath> | ||
| <title> | Description for elements of SVG container element or graphics element. | |
| <tref> | References a <text> element in the SVG document. | Identical to the <text> element |
| <tspan> | Specifies a subtext within another <tspan> element or a <text> element. | Identical to the <text> element and in addition: xlink:href="Reference to a <text> element" |
| <use> | Uses a URI to reference a <svg>, <g>, or other graphical element with a unique id attribute and duplicate it. |
x="x-axis top-left corner of the cloned element" y="y-axis top-left corner of the cloned element" width="width of the cloned element" height="height of the cloned element" xlink:href="URI reference to the cloned element" presentation attributes: All |
| <view> | This is a way to view the image | |
| <vkern> | Specifies kerning pairs for vertically-oriented pairs of glyphs. |
Practice Your Knowledge
What are some of the features that can be included in SVGs while coding in HTML?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.