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" |
