Open In App

SVG Attribute Complete Reference

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

by The by attribute specifies a relative offset value for an attribute that will be modified during an animation.
Try
cx The cx attribute define the x-axis coordinate of a center point.
Try
cy The cy attribute defines the y-axis coordinate of a center point.
Try
fill The fill attribute can be used in two things.
Try
fill-opacity The fill-opacity attribute is a presentation attribute defining the opacity of the paint applied to a shape.
Try
filter The 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-color The flood-color attribute indicates what color is used to flood the current filter primitive subregion.
Try
flood-opacity The flood-opacity attribute indicates the opacity value to use across the current filter primitive subregion.
Try
font-size The 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-adjust The 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-style The font-style attribute is used to specify whether the text is to be rendered using a normal, italic, or oblique face style.
Try
visibility The visibility attribute allows you to control the visibility of graphical elements.
Try
from The from attribute indicates the initial value of an attribute, it is used with to attribute.
Try
fr The fr attribute defines the radius of the focal point for the linear gradient.
Try
height The height attribute defines the vertical length of an element.
Try
keyPoints The keyPoints attribute specifies the duration of an animation.
Try
keyTimes The 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
lengthAdjust The lengthAdjust attribute is used to decide the stretching of the text within the length defined by the textLength attribute.
Try
letter-spacing The letter-spacing attribute controls spacing between text characters.
Try
lighting-color The lighting-color attribute represents the color of the light source for lighting filter primitives.
Try
markerHeight The 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
markerWidth The 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
mask The SVG mask attribute is used to bind an element in which this attribute is defined to with the given <mask> element.
Try
media The media attribute shows a media query that must be matched for a style sheet to apply.
Try
numOctaves The numOctaves attribute defines the number of octaves for the noise function of the <feTurbulence> primitive.
Try
opacity The opacity attribute specifies the transparency of an object or of a group of objects.
Try
operator The operator attribute either defines the compositing operation or morphing operation to be performed.
Try
orient The orient attribute shows, how a marker is rotated when it is placed at its position on the shape.
Try
path The 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
pathLength The pathLength attribute defines the total length for the path, in user units.
Try
patternContentUnits The patternContentUnits attribute is used to indicate which coordinate system must be used for the contents of the <pattern> element.
Try
patternTransform The patternTransform attribute describes a list of transform functions that are applied to a pattern.
Try
patternUnits The patternUnits attribute specifies that which coordinate system must be used for the geometry properties of the
Try
pointer-events The pointer-events attribute allows us to define whether or when an element may be the target of a mouse event.
Try
points The points attribute describes a list of points for the polygon or polyline element.
Try
pointsAtX The 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
pointsAtY The 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
pointsAtZ The 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
r The r attribute defines the radius of the circle.
Try
radius The radius attribute is the radius for the operation on <feMorphology> filter primitive.
Try
repeatCount The repeatCount attribute specifies the time duration of an animation.
Try
repeatDur The repeatDur attribute specifies the total duration to repeat the animation.
Try
restart The restart attribute is used to decide whether an animation will restart or not.
Try
rotate The rotate attribute shows the rotation of an animated element as it travels along a specified path in an <animateMotion> element.
Try
rx The rx attribute defines a radius on the x-axis.
Try
ry The ry attribute defines a radius on the y-axis.
Try
scale The scale attribute decides the displacement scale factor that must be used on a <feDisplacementMap> filter primitive.
Try
seed The seed attribute denotes the starting number for the pseudo-random number generator of the <feTurbulence> filter primitive.
Try
shape-rendering The shape-rendering attribute hints the renderer about the tradeoff’s to be made while rendering shapes like paths, circles, or rectangles.
Try
startoffset The startOffset attribute decides the start of the path for the initial text position.
Try
stdDeviation The stdDeviation attribute explains the standard deviation for the blur operation.
Try
stitchTiles The stitchTiles attribute indicates the behavior of the Perlin Noise tiles at the border.
Try
stop-color The stop-color attribute is used to indicate the color to be used at the stop point of a gradient.
Try
stop-opacity The stop-opacity attribute indicates the alpha value or opacity to be used at the stop point.
Try
stroke The stroke attribute is an attribute defining the color used to paint the outline of the shape.
Try
stroke-dasharray The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes used to paint the outline of the shape.
Try
stroke-linecap The stroke-linecap attribute defines the shape of the stroke that is to be used at the end of the open subpath.
Try
stroke-opacity The stroke-opacity attribute specifies the transparency of an object or of a group of objects.
Try
stroke-width The stroke-width attribute is an attribute defining the width of the stroke applied to the shape.
Try
style The style attribute helps us to style an element using CSS declarations.
Try
surfaceScale The surfaceScale attribute serve as the height of the surface.
Try
systemLanguage The systemLanguage attribute express a list of many supported language tags.
Try
tabindex The tabindex attribute allows one to control whether an element is focusable or not.
Try
tableValues The tableValues attribute declares a list of numbers. These numbers are defining a lookup table of values for a color component transfer function.
Try
text-anchor The text-anchor attribute is used to align a text which is auto-wrapped or pre-formatted.
Try
text-decoration The text-decoration attribute defines whether text is written with a strike-through, overline and/or underline.
Try
text-rendering The text-rendering attribute gives hint about what contracts should be made while rendering text.
Try
textLength The textLength attribute allows you to enumerate the width of the space taken by the text.
Try
to The SVG to attribute indicates the initial value of an attribute.
Try
transform The transform attribute states the list of transform definitions that are applied to an element and its children.
Try
type The type attribute is a non-specific attribute that has a different meaning according to the context in which it used.
Try
vector-effect The vector-effect attribute defines the vector effect to use when drawing an object.
Try
visibility The visibility attribute allows you to control the visibility of graphical elements.
Try
width The width attribute defines the vertical length of an element.
Try
word-spacing The word-spacing attribute in SVG is used to indicate the spacing between words.
Try
x The x attribute defines an x-axis coordinate in the user coordinate system.
Try
x1 The x1 attribute is used to specify the first x-coordinate for drawing an SVG element that requires more than one coordinate.
Try
x2 The x2 attribute is used to specify the first x-coordinate for drawing an SVG element that requires more than one coordinate.
Try
xChannelSelector The 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:lang The 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
y The y attribute defines the y-axis coordinate in the user coordinate system.
Try
y1 The y1 attribute is used to specify the first y-coordinate for drawing an SVG element that requires more than one coordinate.
Try
y2 The y2 attribute is used to specify the first y-coordinate for drawing an SVG element that requires more than one coordinate.
Try
yChannelSelector The 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
z The 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.






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


Article Tags :