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 Tutorial
<a> Creates a hyperlink around an element href="The URL to go to"
download="Tells the browser to download the URL instead of go to it"
hreflang="The language of the page the link points to"
referrerpolicy="The referrer to send when fetching the URL"
rel="The relationship of the target object to the link object"
target="Where to open the link. Can be _self, _parent, _top, _blank, or a name"
type="The MIME type for the linked URL"
Examples
<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"
Examples
<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"
Examples
<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'"
Examples
<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"
Examples
<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')" Examples
<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"
Examples
<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"
Examples
<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"
Examples
<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"
Examples
<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
Examples
<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
Examples
<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
Examples
<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"
Examples
<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"
Examples
<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"
Examples
<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)"
Examples
<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%)"
Examples
<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"
Examples
<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  
Examples
<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.
Examples
<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. Examples
<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"
Examples
<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"
Examples
<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
Examples
<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
Examples
<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
Examples
<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
Examples
<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
Examples
<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"
 

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.