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