SVG Images
Svg
The <Svg /> element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents.
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| width | The displayed width of the rectangular viewport | String, Number | undefined |
| height | The displayed height of the rectangular viewport | String, Number | undefined |
| viewBox | The SVG viewport coordinates for the current SVG fragment | String | undefined |
| preserveAspectRatio | How the svg fragment must be deformed if it is displayed with a different aspect ratio. See more | String | undefined |
| style | Defines SVG styles. See more | Object, Array | undefined |
Line
The <Line /> element is used to create a line.
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| x1 | Defines the x-axis coordinate of the line starting point. | String, Number | undefined |
| x2 | Defines the x-axis coordinate of the line ending point. | String, Number | undefined |
| y1 | Defines the y-axis coordinate of the line starting point. | String, Number | undefined |
| y2 | Defines the y-axis coordinate of the line ending point. | String, Number | undefined |
See also Presentation Attributes
Polyline
The <Polyline /> element is used to create any shape that consists of only straight lines (that is connected at several points).
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| points | This attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline | String | undefined |
See also Presentation Attributes
Polygon
The <Polygon /> element is used to create a graphic that contains at least three sides.
Polygons are made of straight lines, and the shape is "closed" (all the lines connect up).
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| points | This attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon | String | undefined |
See also Presentation Attributes
Path
The <Path /> element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more.
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| d | This attribute defines the shape of the path. See more | String | undefined |
See also Presentation Attributes
Rect
The <Rect /> element is used to create a rectangle and variations of a rectangle shape.
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| x | The x coordinate of the rect. | String, Number | undefined |
| y | The y coordinate of the rect. | String, Number | undefined |
| width | The width of the rect. | String, Number | undefined |
| height | The height of the rect. | String, Number | undefined |
| rx | The horizontal corner radius of the rect. | String, Number | undefined |
| ry | The vertical corner radius of the rect. | String, Number | undefined |
See also Presentation Attributes
Circle
The <Circle /> element is used to create a circle.
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| cx | The x-axis coordinate of the center of the circle. | String, Number | undefined |
| cy | The y-axis coordinate of the center of the circle. | String, Number | undefined |
| r | The radius of the circle. | String, Number | undefined |
See also Presentation Attributes
Ellipse
The <Ellipse /> element is used to create an ellipse.
An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| cx | The x position of the ellipse. | String, Number | undefined |
| cy | The y position of the ellipse. | String, Number | undefined |
| rx | The radius of the ellipse on the x axis. | String, Number | undefined |
| ry | The radius of the ellipse on the y axis. | String, Number | undefined |
See also Presentation Attributes
Text
The <Text /> element draws a graphics element consisting of text.
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| x | The x coordinate of the starting point of the text baseline. | String, Number | undefined |
| y | The y coordinate of the starting point of the text baseline. | String, Number | undefined |
See also Presentation Attributes
Tspan
The SVG <Tspan /> element defines a subtext within a <Text /> element or another <Tspan /> element. It allows for adjustment of the style and/or position of that subtext as needed.
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| x | The x coordinate of the starting point of the text baseline. | String, Number | undefined |
| y | The y coordinate of the starting point of the text baseline. | String, Number | undefined |
See also Presentation Attributes
G
The <G /> SVG element is a container used to group other SVG elements.
Transformations applied to the <G /> element are performed on its child elements, and its attributes are inherited by its children.
Valid props
This element only includes Presentation Attributes
Stop
The SVG <Stop /> element defines a color and its position to use on a gradient. This element is always a child of a <LinearGradient /> or <RadialGradient /> element
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| offset | Defines where the gradient stop is placed along the gradient vector. | String, Number | undefined |
| stopColor | Defines the color of the gradient stop. It can be used as a CSS property. | String | undefined |
| stopOpacity | Defines the opacity of the gradient stop. It can be used as a CSS property. | String, Number | 1 |
Defs
The <Defs /> element is used to store graphical objects that will be used at a later time. Objects created inside a <Defs /> element are not rendered directly. To display them you have to reference them
ClipPath
The <ClipPath /> SVG element defines a clipping path, to be used by the clipPath property.
A clipping path restricts the region to which paint can be applied. Conceptually, parts of the drawing that lie outside of the region bounded by the clipping path are not drawn.
LinearGradient
The <LinearGradient /> element lets authors define linear gradients that can be applied to fill or stroke of graphical elements.
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| x1 | Defines the x coordinate of the starting point of the vector gradient along which the linear gradient is drawn. | String, Number | undefined |
| x2 | Defines the x coordinate of the ending point of the vector gradient along which the linear gradient is drawn. | String, Number | undefined |
| y1 | Defines the y coordinate of the starting point of the vector gradient along which the linear gradient is drawn. | String, Number | undefined |
| y2 | Defines the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn. | String, Number | undefined |
RadialGradient
The <RadialGradient /> element lets authors define radial gradients that can be applied to fill or stroke of graphical elements.
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| cx | Defines the x coordinate of the end circle of the radial gradient. | String, Number | undefined |
| cy | Defines the y coordinate of the end circle of the radial gradient. | String, Number | undefined |
| fr | Defines the radius of the start circle of the radial gradient. The gradient will be drawn such that the 0% <Stop> is mapped to the perimeter of the start circle. | String, Number | undefined |
| fx | Defines the x coordinate of the start circle of the radial gradient. | String, Number | undefined |
| fy | Defines the y coordinate of the start circle of the radial gradient. | String, Number | undefined |
Presentation Attributes
SVG presentation attributes are CSS properties that can be used as attributes on SVG elements. This means it can be passed either inside a style object or directly by element's props.
Supported attributes
| Prop name | Description | Type | Default |
|---|---|---|---|
| color | Provides a potential indirect value for the fill or stroke attributes. | String | undefined |
| dominantBaseline | Defines the baseline used to align the box’s text and inline-level contents. | String | auto |
| fill | It defines the color of the inside of the graphical element it applies to. | String | undefined |
| fillOpacity | It specifies the opacity of the color or the content the current object is filled with. | String, Number | 1 |
| fillRule | It indicates how to determine what side of a path is inside a shape. | String | nonzero |
| opacity | It specifies the transparency of an object or a group of objects. | String, Number | 1 |
| stroke | Defines the color used to paint the outline of the shape. | String | undefined |
| strokeWidth | Defines the width of the stroke to be applied to the shape. | String, Number | 1 |
| strokeOpacity | Defines the opacity of the stroke of a shape. | String, Number | 1 |
| strokeLinecap | Defines the shape to be used at the end of open subpaths when they are stroked. | String | butt |
| strokeDasharray | Defines the pattern of dashes and gaps used to paint the outline of the shape. | String | undefined |
| transform | Defines a list of transform definitions that are applied to an element and the element's children. | String | undefined |
| textAnchor | Defines the vertical alignment a string of text. | String | undefined |
| visibility | Lets you control the visibility of graphical elements. | String | visible |
