Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

SVG Reference


SVG Elements

Element Description Attributes
<a> Creates a hyperlink around an element download
href
hreflang
referrerpolicy
rel
target
type
<animate> Animates an attribute of an element over time attributeName="name of target attribute"
by="a relative offset value"
from="starting value"
to="ending value"
dur="the duration"
repeatCount="the number of time the animation will take place"
<animateMotion> Sets how an element moves along a motion path calcMode="the interpolation mode for the animation. Can be 'discrete', 'linear', 'paced', 'spline'"
path="the motion path"
keyPoints="how far along the motion path the object shall move at the moment in time"
rotate="applies a rotation transformation"
<animateTransform> Animates a transformation attribute on the target element by="a relative offset value"
from="the starting value"
to="the ending value"
type="the type of transformation which is to have its values change over time. Can be 'translate', 'scale', 'rotate', 'skewX', 'skewY'"
<circle> Defines a circle r="The radius of the circle". Required
cx="the x-axis center of the circle"
cy="the y-axis center of the circle"
<clipPath> Specifies a clipping path, to be used by the clip-path property clipPathUnits="'userSpaceOnUse' or 'objectBoundingBox'. The second value makes units of children a fraction of the object bounding box which uses the mask (default: 'userSpaceOnUse')"
<defs> A container for referenced elements  
<desc> A text-only description for container elements or graphic elements  
<ellipse> Defines an ellipse rx="the x radius of the ellipse". Required.
ry="the y radius of the ellipse". Required.
cx="the x-axis center of the ellipse"
cy="the y-axis center of the ellipse"
<feBlend> SVG filter. Combines two graphics together by a certain blending mode mode="the image blending modes: normal|multiply|screen|darken|lighten"
in="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. Changes colors based on a transformation matrix in="input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"
type="matrix | saturate | hueRotate | luminanceToAlpha"
values="the value for matrix type set in type attribute"
<feComponentTransfer> SVG filter. Performs component-wise remapping of data for each pixel. Can adjust brightness, contrast, color balance, etc in="input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"
<feComposite> SVG filter. Performs combination of two input images pixel-wise in image space using a compositing operation in="input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"
in2="the second input image to the blending operation"
operator="over | in | out | atop | xor | lighter | arithmetic"
<feConvolveMatrix> SVG filter. Applies a matrix convolution filter effect (this includes blurring, edge detection, sharpening, embossing and beveling)  
<feDiffuseLighting> SVG filter. Lights a graphic by using the alpha channel as a bump map  
<feDisplacementMap> SVG filter. Uses pixels values from the graphic from in2 attribute to displace the image from the in attribute  
<feDistantLight> SVG filter. Specifies a distant light source to be used inside a lighting filter primitive: <feDiffuseLighting> or <feSpecularLighting> azimuth
elevation
<feDropShadow> SVG filter. Creates a drop shadow of the graphic dx="the x offset of the drop shadow"
dy="the y offset of the drop shadow"
stdDeviation="the amount of the blur in the drop shadow"
<feFlood> SVG filter. Fills the filter subregion with the color and opacity defined by flood-color and flood-opacity attributes flood-color
flood-opacity
<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. Blurs the graphic in="input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"
stdDeviation
edgeMode
<feImage> SVG filter. Gets graphic data from an external source and provides the pixel data as output crossorigin
preserveAspectRatio
<feMerge> SVG filter. Blends input graphic layers (applies filter effects concurrently instead of sequentially)  
<feMergeNode> SVG filter. Takes the result of another filter to be processed by its parent <feMerge> in="input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"
<feMorphology> SVG filter. Erodes or dilates the graphic (for fattening or thinning effects) in="input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"
operator="erode | dilate"
radius
<feOffset> SVG filter. Offsets the input graphic in="input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"
dx
dy
<fePointLight> SVG filter. Specifies a light source that allows creating a point light effect x
y
z
<feSpecularLighting> SVG filter. Lights a source graphic by using the alpha channel as a bump map in="input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"
<feSpotLight> SVG filter. Specifies a light source that allows creating a spotlight effect x
y
z
pointsAtX
pointsAtY
pointsAtZ
specularExponent
limitingConeAngle
<feTile> SVG filter. Fills a target rectangle with a repeated pattern of an input graphic in="input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"
<feTurbulence> SVG filter. Creates a graphic with the Perlin turbulence function baseFrequency
numOctaves
seed
stitchTiles
type
<filter> A container for filter effects x
y
width
height
filterUnits
primitiveUnits
<foreignObject> Includes elements from a different XML namespace height
width
x
y
<g> A container for grouping other SVG elements id="a unique name for the group"
<image> Includes an image in SVG (must be .jpeg, .png, or other SVG files) href="the url to the image". Required.
width="the width of the image". Required.
height="the height of the image". Required.
x="the x position of top-left corner of image"
y="the y position of top-left corner of the image"
preserveAspectRatio="how the image is scaled"
crossorigin="value of the credentials flag for CORS requests"
decoding="sync | async | auto"
<line> Creates a line x1="The start of the line on the x-axis"
y1="The start of the line on the y-axis"
x2="The end of the line on the x-axis"
y2="The end of the line on the y-axis"
<linearGradient> Defines a linear gradient id="a unique id for the gradient". Required
x1="The x position of the starting point of the gradient". Default is 0%
x2="The x position of the ending point of the gradient". Default is 100%
y1="The y position of the starting point of the gradient". Default is 0%
y2="The y position of the ending point of the gradient". Default is 0%
spreadMethod="The spread method of the gradient". Possible values: "pad", "reflect", "repeat". Default is "pad"
href="A reference to another <linearGradient> element that will be used as a template"
gradientUnits="the coordinate system for x1, x2, y1, y2". Possible values: "userSpaceOnUse" and "objectBoundingBox". Default is "objectBoundingBox"
gradientTransform="additional transformation to the gradient coordinate system"
<marker> Defines a graphic that is used to draw arrowheads or polymarkers on a specific <path>, <line>, <polyline> or <polygon> element markerUnits="'strokeWidth' or 'userSpaceOnUse'. If 'strokeWidth' is used then one unit equals one stroke width. Otherwise, the marker does not scale and uses the 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 show the marker at. 'auto' will compute an angle that makes the x-axis a tangent of the vertex (default 0)"
markerWidth="the width of the marker (default 3)"
markerHeight="the height of the marker (default 3)"
viewBox="the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height)"
<mask> Defines an alpha mask for compositing the current object into the background. Masking is a combination of opacity values and clipping. Like clipping you can use shapes, text or paths to define sections of the mask. The default state of a mask is fully transparent which is the opposite of clipping plane. The graphics in a mask sets how opaque portions of the mask are maskUnits="'userSpaceOnUse' or 'objectBoundingBox'. Set whether the clipping plane is relative the full view port or object (default: 'objectBoundingBox')"
maskContentUnits="Use the second with percentages to make mask graphic positions relative the object. 'userSpaceOnUse' or 'objectBoundingBox' (default: 'userSpaceOnUse')"
x="the clipping plane of the mask (default: -10%)"
y="the clipping plane of the mask (default: -10%)"
width="the clipping plane of the mask (default: 120%)"
height="the clipping plane of the mask (default: 120%)"
<metadata> Applies metadata to SVG content  
<mpath> A sub-element for the <animateMotion> element which provides the ability to reference an external <path> element as the definition of a motion path  
<path> Defines a shape d="sets the shape of the path"
pathLength="the total length for the path"
<pattern> Defines an object that can be redrawn at repeated x- and y-coordinate intervals id="the unique id used to reference this pattern." Required.
patternUnits="'userSpaceOnUse' or 'objectBoundingBox'. The second value makes units of x, y, width, height a fraction (or %) of the object bounding box which uses the pattern."
patternContentUnits="'userSpaceOnUse' or 'objectBoundingBox'"
patternTransform="allows the whole pattern to 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="the width of the pattern tile (default 0)"
height="the height of the pattern tile (default 0)"
viewBox="the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height)"
href
preserveAspectRatio  
<polygon> Creates a graphic that contains at least three sides. Polygons are made of straight lines, and the shape is "closed" points="The list of points of the polygon. Each point must contain an x-  and a y-coordinate". Required.
<polyline> Defines any shape that consists of only straight lines. The shape is open points="The list of points of the polygon. Each point must contain an x coordinate and a y coordinate". Required.
<radialGradient> Defines a radial gradient id="a unique id for the gradient". Required
cx="The x position of the end circle of the radial gradient". Default is 50%
cy="The y position of the end circle of the radial gradient". Default is 50%
fr="The radius of the start circle of the radial gradient". Default is 0%
fx="The x position of the start circle of the radial gradient". Default is 50%
fy="The y position of the start circle of the radial gradient". Default is 50%
r="The radius of the end circle of the radial gradient". Default is 50%
spreadMethod="Defines the spread method of the gradient". Possible values: "pad", "reflect", "repeat". Default is "pad"
href="Defines a reference to another <radialGradient> element that will be used as a template"
gradientUnits="Defines the coordinate system for cx, cy, r, fx, fy, fr". Possible values: "userSpaceOnUse" and "objectBoundingBox". Default is "objectBoundingBox"
gradientTransform="Defines additional transformation to the gradient coordinate system"
<rect> Defines a rectangle width="the width of the rectangle". Required.
height="the height of the rectangle" Required.
x="the x-position for the top-left corner of the rectangle"
y="the y-position for the top-left corner of the rectangle"
rx="The x radius of the corners of the rectangle (used to round the corners)". Default is 0
ry="The y radius of the corners of the rectangle (used to round the corners)". Default is 0
pathLength="the total length for the rectangle's perimeter"
<script> Container for scripts in SVG crossorigin="Defines CORS settings as define for the HTML <script> element"
href="The URL to the script to load"
type="The type of script language to use". Default is application/ecmascript
<set> Sets the value of an attribute for a specified duration attributeName="the attribute to change"
to="the new value for the attribute"
begin="when the effect should start"
<stop> The stops for a linear or radial gradient offset="the offset for this stop (0 to 1/0% to 100%)". Required.
stop-color="the color of this stop"
stop-opacity="the opacity of this stop (0 to 1)". Default is 1
<style> Allows style sheets to be embedded directly within SVG type="The type of the style sheet language to use". Default is text/css.
media ="To which media the style applies". Default is all
title="The title of the style sheet (can be used to switch between alternate style sheets)"
<svg> A container for SVG graphics xmlns="http://www.w3.org/2000/svg"
x="The x position of the SVG container". Default is 0
y="The y position of the SVG container". Default is 0
width="The width of the SVG container". Default is auto
height="The height of the SVG container". Default is auto
viewBox="The SVG viewport coordinates for the current SVG fragment". Contains 4 values separated by white space or commas. (min x, min y, width, height)"
preserveAspectRatio="How the svg fragment is deformed if it is displayed with a different aspect ratio". Can be none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax. Default is xMidYMid
<switch>    
<symbol> Define graphical template objects which can be instantiated by a <use> element  
<text> Defines a text x="The x position of the start of the text". Default is 0
y="The y position of the start of the text". Default is 0
dx="The horizontal shift position for text (from previous text position)"
dy="The vertical shift position for text (from previous text position)"
rotate="The rotation (in degrees) applied to each letter of text"
textLength="The width that the text must fit in"
lengthAdjust"How the text should be compressed or stretched to fit the width defined by the textLength attribute". Can be spacing| spacingAndGlyphs. Default is spacing
<textPath> Renders text along the shape of a path href="The URL to the path to render the text"
lengthAdjust"How the text should be compressed or stretched to fit the width defined by the textLength attribute". Can be spacing| spacingAndGlyphs. Default is spacing
method="How to render the glyphs along the path." Can be align|stretch. Default is align
spacing="The space between glyphs". Can be auto|exact. Default is exact
startOffset="How far the beginning of the text should be offset from the beginning of the path". Can be a length, percentage or a number
textLength="The width of the text along the path". Can be a length, percentage or a number. Default is auto
<title> A text description for elements in SVG - not displayed as part of the graphics. Browsers usually display the text as a tooltip none
<tspan> Defines a subtext within a <text> element x="The x position of the start of the text". Default is 0
y="The y position of the start of the text". Default is 0
dx="The horizontal shift position for text (from previous text position)"
dy="The vertical shift position for text (from previous text position)"
rotate="The rotation (in degrees) applied to each letter of text"
textLength="The width that the text must fit in"
lengthAdjust"How the text should be compressed or stretched to fit the width defined by the textLength attribute". Can be spacing| spacingAndGlyphs. Default is spacing
<use> Takes a node within the SVG document, and duplicates it somewhere else. x="The x position of top-left corner of the cloned element"
y="The y position of top-left corner of the cloned element"
width="the width of the cloned element"
height="the height of the cloned element"
href="the URL to the element that is to be duplicated"
<view> How to view the graphic (zoom level or detail view) viewBox="The position and dimension, in user space, of an SVG viewport. Contains 4 values separated by white space or commas. (min x, min y, width, height)"
preserveAspectRatio="How an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio"