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:

Example

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

Specifications

Specification
Filter Effects Module Level 1 # element-attrdef-filter-height
Filter Effects Module Level 1 # element-attrdef-filter-primitive-height
CSS Masking Module Level 1 # element-attrdef-mask-height
Scalable Vector Graphics (SVG) 2 # Sizing
Scalable Vector Graphics (SVG) 2 # PatternElementHeightAttribute

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/height

Docs

Docs4dev

Title here