Open In App
Related Articles

SVG Attribute Complete Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. It is a type of vector graphic that may be scaled up or down. Attributes are the things that give the SVG shape, color, etc it will make the SVGs as attractive as you need.

List of SVG Attributes:

SVG Attributes

Description

Example

byThe by attribute specifies a relative offset value for an attribute that will be modified during an animation.
Try
cxThe cx attribute define the x-axis coordinate of a center point.
Try
cyThe cy attribute defines the y-axis coordinate of a center point.
Try
fillThe fill attribute can be used in two things.
Try
fill-opacityThe fill-opacity attribute is a presentation attribute defining the opacity of the paint applied to a shape.
Try
filterThe filter attribute is used to specify the filter effects that are defined by the <filter> element which are to be applied to its elements.
Try
flood-colorThe flood-color attribute indicates what color is used to flood the current filter primitive subregion.
Try
flood-opacityThe flood-opacity attribute indicates the opacity value to use across the current filter primitive subregion.
Try
font-sizeThe font-size attribute refers to the size of the font from baseline when multiple lines of text are set solid in a multiline layout environment.
Try
font-size-adjustThe font-size-adjust attribute allows you to set the aspect value for an element that will set the x-height of the first choice font in the given substitute font.
Try
font-styleThe font-style attribute is used to specify whether the text is to be rendered using a normal, italic, or oblique face style.
Try
visibilityThe visibility attribute allows you to control the visibility of graphical elements.
Try
fromThe from attribute indicates the initial value of an attribute, it is used with to attribute.
Try
frThe fr attribute defines the radius of the focal point for the linear gradient.
Try
heightThe height attribute defines the vertical length of an element.
Try
keyPointsThe keyPoints attribute specifies the duration of an animation.
Try
keyTimesThe keyTimes attribute is used to specify a list of floating point numbers (Time values) between 0 and 1 (inclusive) which is used to control the pacing of the animation.
Try
lengthAdjustThe lengthAdjust attribute is used to decide the stretching of the text within the length defined by the textLength attribute.
Try
letter-spacingThe letter-spacing attribute controls spacing between text characters.
Try
lighting-colorThe lighting-color attribute represents the color of the light source for lighting filter primitives.
Try
markerHeightThe markerHeight attribute indicates the height of the viewport into which the <marker> is to be fitted when it is displayed according to the preserveAspectRatio and viewBox attributes.
Try
markerWidthThe markerWidth attribute indicates the width of the viewport within which the <marker> is to be adjusted when it is displayed according to the preserveAspectRatio and viewBox attributes.
Try
maskThe SVG mask attribute is used to bind an element in which this attribute is defined to with the given <mask> element.
Try
mediaThe media attribute shows a media query that must be matched for a style sheet to apply.
Try
numOctavesThe numOctaves attribute defines the number of octaves for the noise function of the <feTurbulence> primitive.
Try
opacityThe opacity attribute specifies the transparency of an object or of a group of objects.
Try
operatorThe operator attribute either defines the compositing operation or morphing operation to be performed.
Try
orientThe orient attribute shows, how a marker is rotated when it is placed at its position on the shape.
Try
pathThe path attribute defines a text path or the motion path along with the characters of a text are displayed or a referenced element is animated respectively.
Try
pathLengthThe pathLength attribute defines the total length for the path, in user units.
Try
patternContentUnitsThe patternContentUnits attribute is used to indicate which coordinate system must be used for the contents of the <pattern> element.
Try
patternTransformThe patternTransform attribute describes a list of transform functions that are applied to a pattern.
Try
patternUnitsThe patternUnits attribute specifies that which coordinate system must be used for the geometry properties of the element.
Try
pointer-eventsThe pointer-events attribute allows us to define whether or when an element may be the target of a mouse event.
Try
pointsThe points attribute describes a list of points for the polygon or polyline element.
Try
pointsAtXThe pointsAtX attribute denotes the x position in the coordinate system established by primitiveUnits attribute on the <filter> element of the point at which the light source is pointing.
Try
pointsAtYThe pointsAtY attribute denotes the y position in the coordinate system established by attribute primitiveUnits on the <filter> element of the point at which the light source is pointing.
Try
pointsAtZThe pointsAtZ attribute denotes the y position in the coordinate system established by primitiveUnits attribute on the <filter> element of the point at which the light source is pointing.
Try
rThe r attribute defines the radius of the circle.
Try
radiusThe radius attribute is the radius for the operation on <feMorphology> filter primitive.
Try
repeatCountThe repeatCount attribute specifies the time duration of an animation.
Try
repeatDurThe repeatDur attribute specifies the total duration to repeat the animation.
Try
restartThe restart attribute is used to decide whether an animation will restart or not.
Try
rotateThe rotate attribute shows the rotation of an animated element as it travels along a specified path in an <animateMotion> element.
Try
rxThe rx attribute defines a radius on the x-axis.
Try
ryThe ry attribute defines a radius on the y-axis.
Try
scaleThe scale attribute decides the displacement scale factor that must be used on a <feDisplacementMap> filter primitive.
Try
seedThe seed attribute denotes the starting number for the pseudo-random number generator of the <feTurbulence> filter primitive.
Try
shape-renderingThe shape-rendering attribute hints the renderer about the tradeoff’s to be made while rendering shapes like paths, circles, or rectangles.
Try
startoffsetThe startOffset attribute decides the start of the path for the initial text position.
Try
stdDeviationThe stdDeviation attribute explains the standard deviation for the blur operation.
Try
stitchTilesThe stitchTiles attribute indicates the behavior of the Perlin Noise tiles at the border.
Try
stop-colorThe stop-color attribute is used to indicate the color to be used at the stop point of a gradient.
Try
stop-opacityThe stop-opacity attribute indicates the alpha value or opacity to be used at the stop point.
Try
strokeThe stroke attribute is an attribute defining the color used to paint the outline of the shape.
Try
stroke-dasharrayThe stroke-dasharray attribute is a presentation attribute defining the pattern of dashes used to paint the outline of the shape.
Try
stroke-linecapThe stroke-linecap attribute defines the shape of the stroke that is to be used at the end of the open subpath.
Try
stroke-opacityThe stroke-opacity attribute specifies the transparency of an object or of a group of objects.
Try
stroke-widthThe stroke-width attribute is an attribute defining the width of the stroke applied to the shape.
Try
styleThe style attribute helps us to style an element using CSS declarations.
Try
surfaceScaleThe surfaceScale attribute serve as the height of the surface.
Try
systemLanguageThe systemLanguage attribute express a list of many supported language tags.
Try
tabindexThe tabindex attribute allows one to control whether an element is focusable or not.
Try
tableValuesThe tableValues attribute declares a list of numbers. These numbers are defining a lookup table of values for a color component transfer function.
Try
text-anchorThe text-anchor attribute is used to align a text which is auto-wrapped or pre-formatted.
Try
text-decorationThe text-decoration attribute defines whether text is written with a strike-through, overline and/or underline.
Try
text-renderingThe text-rendering attribute gives hint about what contracts should be made while rendering text.
Try
textLengthThe textLength attribute allows you to enumerate the width of the space taken by the text.
Try
toThe SVG to attribute indicates the initial value of an attribute.
Try
transformThe transform attribute states the list of transform definitions that are applied to an element and its children.
Try
typeThe type attribute is a non-specific attribute that has a different meaning according to the context in which it used.
Try
vector-effectThe vector-effect attribute defines the vector effect to use when drawing an object.
Try
visibilityThe visibility attribute allows you to control the visibility of graphical elements.
Try
widthThe width attribute defines the vertical length of an element.
Try
word-spacingThe word-spacing attribute in SVG is used to indicate the spacing between words.
Try
xThe x attribute defines an x-axis coordinate in the user coordinate system.
Try
x1The x1 attribute is used to specify the first x-coordinate for drawing an SVG element that requires more than one coordinate.
Try
x2The x2 attribute is used to specify the first x-coordinate for drawing an SVG element that requires more than one coordinate.
Try
xChannelSelectorThe xChannelSelector attribute in SVG is used to indicate color channel from in2 that is use to displace the pixels in in along the x-axis.
Try
xml:langThe xml:lang attribute in SVG is used to indicate the primary language that is used in the contents and attributes containing text content on the website.
Try
yThe y attribute defines the y-axis coordinate in the user coordinate system.
Try
y1The y1 attribute is used to specify the first y-coordinate for drawing an SVG element that requires more than one coordinate.
Try
y2The y2 attribute is used to specify the first y-coordinate for drawing an SVG element that requires more than one coordinate.
Try
yChannelSelectorThe yChannelSelector attribute in SVG is used to indicate the channel from in2 that is used to displace the pixels in in along the y-axis.
Try
zThe z attribute in SVG is used to define the location along the z-axis in the coordinate system for a light source established by the primitiveUnits attribute on the <filter> element.
Try

Below example will give you a brief idea that how to use the SVG Attributes:

Example: In this example, we will create two SVG texts with different attribute effects.

HTML

<!DOCTYPE html>
<html>
<body>
   <center>
      <h1 style="color:green;">
         GeeksforGeeks
      </h1>
      <strong>
         SVG Attribute 
      </strong>
      <svg viewBox="0 0 300 50"
           xmlns="http://www.w3.org/2000/svg">
         <text y="20"
               textLength="100%">
            A Computer Science portal.
         </text>
      </svg>
      <svg viewBox="0 0 450 50"
           xmlns="http://www.w3.org/2000/svg">
         <text x="170" y="50"
               text-decoration="line-through">
            GeeksforGeeks
         </text>
      </svg>
   </center>
</body>
</html>

                    

Output: 

SVG Attribute

SVG Attribute



Last Updated : 10 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads