React-pdf

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 nameDescriptionTypeDefault
widthThe displayed width of the rectangular viewportString, Numberundefined
heightThe displayed height of the rectangular viewportString, Numberundefined
viewBoxThe SVG viewport coordinates for the current SVG fragmentStringundefined
preserveAspectRatioHow the svg fragment must be deformed if it is displayed with a different aspect ratio. See moreStringundefined
styleDefines SVG styles. See moreObject, Arrayundefined

Line

The <Line /> element is used to create a line.

Valid props

Prop nameDescriptionTypeDefault
x1Defines the x-axis coordinate of the line starting point.String, Numberundefined
x2Defines the x-axis coordinate of the line ending point.String, Numberundefined
y1Defines the y-axis coordinate of the line starting point.String, Numberundefined
y2Defines the y-axis coordinate of the line ending point.String, Numberundefined

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 nameDescriptionTypeDefault
pointsThis attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polylineStringundefined

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 nameDescriptionTypeDefault
pointsThis attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygonStringundefined

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 nameDescriptionTypeDefault
dThis attribute defines the shape of the path. See moreStringundefined

See also Presentation Attributes


Rect

The <Rect /> element is used to create a rectangle and variations of a rectangle shape.

Valid props

Prop nameDescriptionTypeDefault
xThe x coordinate of the rect.String, Numberundefined
yThe y coordinate of the rect.String, Numberundefined
widthThe width of the rect.String, Numberundefined
heightThe height of the rect.String, Numberundefined
rxThe horizontal corner radius of the rect.String, Numberundefined
ryThe vertical corner radius of the rect.String, Numberundefined

See also Presentation Attributes


Circle

The <Circle /> element is used to create a circle.

Valid props

Prop nameDescriptionTypeDefault
cxThe x-axis coordinate of the center of the circle.String, Numberundefined
cyThe y-axis coordinate of the center of the circle.String, Numberundefined
rThe radius of the circle.String, Numberundefined

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 nameDescriptionTypeDefault
cxThe x position of the ellipse.String, Numberundefined
cyThe y position of the ellipse.String, Numberundefined
rxThe radius of the ellipse on the x axis.String, Numberundefined
ryThe radius of the ellipse on the y axis.String, Numberundefined

See also Presentation Attributes


Text

The <Text /> element draws a graphics element consisting of text.

Valid props

Prop nameDescriptionTypeDefault
xThe x coordinate of the starting point of the text baseline.String, Numberundefined
yThe y coordinate of the starting point of the text baseline.String, Numberundefined

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 nameDescriptionTypeDefault
xThe x coordinate of the starting point of the text baseline.String, Numberundefined
yThe y coordinate of the starting point of the text baseline.String, Numberundefined

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 nameDescriptionTypeDefault
offsetDefines where the gradient stop is placed along the gradient vector.String, Numberundefined
stopColorDefines the color of the gradient stop. It can be used as a CSS property.Stringundefined
stopOpacityDefines the opacity of the gradient stop. It can be used as a CSS property.String, Number1

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 nameDescriptionTypeDefault
x1Defines the x coordinate of the starting point of the vector gradient along which the linear gradient is drawn.String, Numberundefined
x2Defines the x coordinate of the ending point of the vector gradient along which the linear gradient is drawn.String, Numberundefined
y1Defines the y coordinate of the starting point of the vector gradient along which the linear gradient is drawn.String, Numberundefined
y2Defines the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn.String, Numberundefined

RadialGradient

The <RadialGradient /> element lets authors define radial gradients that can be applied to fill or stroke of graphical elements.

Valid props

Prop nameDescriptionTypeDefault
cxDefines the x coordinate of the end circle of the radial gradient.String, Numberundefined
cyDefines the y coordinate of the end circle of the radial gradient.String, Numberundefined
frDefines 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, Numberundefined
fxDefines the x coordinate of the start circle of the radial gradient.String, Numberundefined
fyDefines the y coordinate of the start circle of the radial gradient.String, Numberundefined

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 nameDescriptionTypeDefault
colorProvides a potential indirect value for the fill or stroke attributes.Stringundefined
dominantBaselineDefines the baseline used to align the box’s text and inline-level contents.Stringauto
fillIt defines the color of the inside of the graphical element it applies to.Stringundefined
fillOpacityIt specifies the opacity of the color or the content the current object is filled with.String, Number1
fillRuleIt indicates how to determine what side of a path is inside a shape.Stringnonzero
opacityIt specifies the transparency of an object or a group of objects.String, Number1
strokeDefines the color used to paint the outline of the shape.Stringundefined
strokeWidthDefines the width of the stroke to be applied to the shape.String, Number1
strokeOpacityDefines the opacity of the stroke of a shape.String, Number1
strokeLinecapDefines the shape to be used at the end of open subpaths when they are stroked.Stringbutt
strokeLinejoinDefines the shape to be used at the corners of paths when they are stroked.Stringmiter
strokeDasharrayDefines the pattern of dashes and gaps used to paint the outline of the shape.Stringundefined
transformDefines a list of transform definitions that are applied to an element and the element's children.Stringundefined
textAnchorDefines the horizontal alignment of a string of text.Stringundefined
visibilityLets you control the visibility of graphical elements.Stringvisible