Open In App

SVG Attribute Complete Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
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

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 element.
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.

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