height
The height attribute defines the vertical length of an element in the user coordinate system.
You can use this attribute with the following SVG elements:
<feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLighting><feDisplacementMap><feDropShadow><feFlood><feGaussianBlur><feImage><feMerge><feMorphology><feOffset><feSpecularLighting><feTile><feTurbulence><filter><foreignObject><image><mask><pattern><rect><svg><use>
Example
html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<!-- With a height of 0 or less, nothing will be rendered -->
<rect y="0" x="0" width="90" height="0" />
<rect y="0" x="100" width="90" height="60" />
<rect y="0" x="200" width="90" height="100%" />
</svg>
feBlend
For <feBlend>, height defines the vertical length for the rendering area of the primitive.
| Value | <length> | <percentage> |
|---|---|
| Default value | 100% |
| Animatable | Yes |
feColorMatrix
For <feColorMatrix>, height defines the vertical length for the rendering area of the primitive.
| Value | <length> | <percentage> |
|---|---|
| Default value | 100% |
| Animatable | Yes |
feComponentTransfer
For <feComponentTransfer>, height defines the vertical length for the rendering area of the primitive.
| Value | <length> | <percentage> |
|---|---|
| Default value | 100% |
| Animatable | Yes |
feComposite
For <feComposite>, height defines the vertical length for the rendering area of the primitive.
| Value | <length> | <percentage> |
|---|---|
| Default value | 100% |
| Animatable | Yes |
feConvolveMatrix
For <feConvolveMatrix>, height defines the vertical length for the rendering area of the primitive.
| Value | <length> | <percentage> |
|---|---|
| Default value | 100% |
| Animatable | Yes |
feDiffuseLighting
For <feDiffuseLighting>, height defines the vertical length for the rendering area of the primitive.
| Value | <length> | <percentage> |
|---|---|
| Default value | 100% |
| Animatable | Yes |
feDisplacementMap
For <feDisplacementMap>, height defines the vertical length for the rendering area of the primitive.
| Value | <length> | <percentage> |
|---|---|
| Default value | 100% |
| Animatable | Yes |
feDropShadow
For <feDropShadow>, height defines the vertical length for the rendering area of the primitive.
| Value | <length> | <percentage> |
|---|---|
| Default value | 100% |
| Animatable | Yes |
feFlood
For <feFlood>, height defines the vertical length for the rendering area of the primitive.
| Value | <length> | <percentage> |
|---|---|
| Default value | 100% |
| Animatable | Yes |
feGaussianBlur
For <feGaussianBlur>, height defines the vertical length for the rendering area of the primitive.
| Value | <length> | <percentage> |
|---|---|
| Default value | 100% |
| Animatable | Yes |
feImage
For <feImage>, height defines the vertical length for the rendering area of the primitive.
| Value | <length> | <percentage> |
|---|---|
| Default value | 100% |
| Animatable | Yes |
feMerge
For <feMerge>, height defines the vertical length for the rendering area of the primitive.
| Value | <length> | <percentage> |
|---|---|
| Default value | 100% |
| Animatable | Yes |
feMorphology
For <feMorphology>, height defines the vertical length for the rendering area of the primitive.
| Value | <length> | <percentage> |
|---|---|
| Default value | 100% |
| Animatable | Yes |
feOffset
For <feOffset>, height defines the vertical length for the rendering area of the primitive.
| Value | <length> | <percentage> |
|---|---|
| Default value | 100% |
| Animatable | Yes |
feSpecularLighting
For <feSpecularLighting>, height defines the vertical length for the rendering area of the primitive.
| Value | <length> | <percentage> |
|---|---|
| Default value | 100% |
| Animatable | Yes |
feTile
For <feTile>, height defines the vertical length for the rendering area of the primitive.
| Value | <length> | <percentage> |
|---|---|
| Default value | 100% |
| Animatable | Yes |
feTurbulence
For <feTurbulence>, height defines the vertical length for the rendering area of the primitive.
| Value | <length> | <percentage> |
|---|---|
| Default value | 100% |
| Animatable | Yes |
filter
For <filter>, height defines the vertical length for the rendering area of the filter.
| Value | <length> | <percentage> |
|---|---|
| Default value | 120% |
| Animatable | Yes |
foreignObject
For <foreignObject>, height defines the vertical length for the rendering area for the referenced document.
| Value |
auto |
<length>
|
<percentage>
|
|---|---|
| Default value | auto (treated as 0) |
| Animatable | Yes |
Note: Starting with SVG2, height is a Geometry Property meaning this attribute can also be used as a CSS property for <foreignObject>.
image
For <image>, height defines the vertical length for the image.
| Value |
auto |
<length>
|
<percentage>
|
|---|---|
| Default value | auto (treated as the intrinsic height of the image) |
| Animatable | Yes |
Note: Starting with SVG2, height is a Geometry Property meaning this attribute can also be used as a CSS property for images.
mask
For <mask>, height defines the vertical length of its area of effect. The exact effect of this attribute is influenced by the maskUnits attribute.
| Value | <length> | <percentage> |
|---|---|
| Default value | 120% |
| Animatable | Yes |
pattern
For <pattern>, height defines the vertical length of the tile pattern. The exact effect of this attribute is influenced by the patternUnits and patternTransform attributes.
| Value | <length> |
|---|---|
| Default value | 0 |
| Animatable | Yes |
rect
For <rect>, height defines the vertical length for the rectangle.
| Value |
auto |
<length>
|
<percentage>
|
|---|---|
| Default value | auto (treated as 0) |
| Animatable | Yes |
Note: Starting with SVG2, height is a Geometry Property meaning this attribute can also be used as a CSS property for rectangles.
svg
For <svg>, height defines the vertical length for the rendering area of the SVG viewport.
Note: In an HTML document if both the viewBox and height attributes are omitted, the svg element will be rendered with a height of 150px
| Value |
auto |
<length>
|
<percentage>
|
|---|---|
| Default value | auto (treated as 100%) |
| Animatable | Yes |
Note: Starting with SVG2, height is a Geometry Property meaning this attribute can also be used as a CSS property for <svg>.
use
For <use>, height defines the vertical length for the referenced element.
| Value |
auto |
<length>
|
<percentage>
|
|---|---|
| Default value | auto (treated as 0) |
| Animatable | Yes |
Note: height has no effect on use elements, unless the element referenced has a viewBox - i.e. they only have an effect when use refers to a svg or symbol element.
Note: Starting with SVG2, height is a Geometry Property meaning this attribute can also be used as a CSS property for used elements.