SVG Element Reference

This section contains the Scalable Vector Graphics (SVG) element reference documentation.

In this section

Topic	Description
a	Creates a SVG hyperlink.
circle	Defines a circle that is based on a given center point and radius value.
clipPath	Defines a path that will visually clip (hide) part of another element. The path is not visible and the intersection of the two elements will not be displayed.
defs	Defines a template for one or more objects that can have new instances created by the use element.
desc	Provides a mechanism to store a description of an element.
ellipse	Defines an ellipse that is based on a given center point and two radius values.
feBlend	Composites two objects together using commonly used imaging software blending modes.
feColorMatrix	This filter applies a matrix transformation.
feComponentTransfer	Performs component-wise remapping of data allowing operations like brightness adjustment, contrast adjustment, color balance, or thresholding.
feComposite	Combines two input images pixel-wise in image space using alpha channel (Porter-Duff) compositing operations.
feConvolveMatrix	`feConvolveMatrix` applies a matrix convolution filter effect.
feDiffuseLighting	Lights an image using the alpha channel as a bump map.
feDisplacementMap	Spatially displaces an image (in) using the pixel values of a second image (in2).
feDistantLight	Defines a distant light source.
feFlood	Creates a rectangle with specified color and opacity values.
feFuncA	Specifies a transfer function for the alpha component of an input graphic; typically used as a child element of an SVGFEComponentTransferElement element.
feFuncB	Specifies a transfer function for the blue component of an input graphic; typically used as a child element of an SVGFEComponentTransferElement element.
feFuncG	Specifies a transfer function for the green component of an input graphic; typically used as a child element of an SVGFEComponentTransferElement element.
feFuncR	Specifies a transfer function for the red component of an input graphic; typically used as a child element of an SVGFEComponentTransferElement element.
feGaussianBlur	Performs a Gaussian blur on the input image.
feImage	Refers to an image or graphic that is external to the filter element that is loaded and rendered as part of the filter primitive.
feMerge	Composites input layers on top of each other using the over operator.
feMergeNode	Specifies an input source layer for an feMerge element.
feMorphology	Provides a way to thin or thicken artwork.
feOffset	Offsets the input image relative to the image's current position by a specified value.
fePointLight	Represents a point light source when applying feDiffuseLighting or feSpecularLighting filter effects.
feSpecularLightingElement	Lights a source graphic using the alpha channel as a bitmap.
feSpotlightElement	Defines a spotlight source.
feTile	Fills a target rectangle with tiled copies of an input image.
feTurbulence	Provides a filter to create images based on the Perlin turbulence function.
foreignObject	Enables content from another XML namespace to be inserted into an SVG namespace.
filter	Defines an SVG filter. The `filter` element has a required `id` attribute which identifies a filter when it is applied to a graphic.
g	Groups two or more elements together.
gradient	Defines a base interface that is used by SVGLinearGradientElement and SVGRadialGradientElement objects.
image	Provides a way to display a graphics image on the screen.
line	Defines a line by using beginning and ending (x,y) coordinate values with stroke and stroke-width styles .
linearGradient	Defines a linear gradient that provides a smooth transition from one color to another. The gradient can be used to fill or stroke an object.
marker	Defines shapes that can be attached to the middles or ends of line segments in path, line, polyline, and polygon elements.
mask	Defines an alpha mask that composites a graphical object into the background.
metadata	Contains information that is associated with SVG metadata.
path	Defines a path using commands (moveto, line, cubic curves, quadratic Bézier curves, arc, and closepath) and coordinates.
pattern	Provides a way to stroke or fill an object with a repeated series of path-defined objects that make up a pattern.
polygon	Defines a polygon by using at least three (x,y) coordinate values. A line is drawn between the first and last (x,y) coordinates to close the shape.
polyline	Defines a series of connected lines by using (x,y) coordinate values with fill, stroke, and stroke-width styles.
radialGradient	Defines a radial gradient that provides a smooth transition from one color to another, changing from one color in the center to the second color at the outer edges. The gradient can be used to fill or stroke an object.
rect	Defines a rectangle that is based on a given width and height.
script	Contains scripts.
stop	Defines the ramp of colors to use in gradients.
style	Enables style sheets to be embedded directly within SVG content.
svg	Defines an SVG document or document fragement.
switch	Provides conditional processing based on the state of the requiredFeatures, requiredExtensions, and systemLanguage attributes.
symbol	Defines graphical template objects that a use element can instantiate.
text	Defines a text element using font-family, font-size, and fill values.
textContent	Describes textual content.
textPath	Defines a path that text can be rendered along.
textPositioning	Describes SVG text positioning.
title	Defines the title of an element.
tSpan	Adjusts the size, position, and font of individual letters within a text element.
use	Creates a new instance of an object that has been defined with the defs element.
view	Defines a new viewport.