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: heighthas 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 Status Comment
Filter Effects Module Level 1
The definition of 'height' in that specification.		 Working Draft Definition for <filter>
Filter Effects Module Level 1
The definition of 'height' in that specification.		 Working Draft Definition for filter primitives
CSS Masking Module Level 1
The definition of 'height' in that specification.		 Candidate Recommendation Definition for <mask>
Scalable Vector Graphics (SVG) 2
The definition of 'height' in that specification.		 Candidate Recommendation Definition as a geometry property
Scalable Vector Graphics (SVG) 2
The definition of 'height' in that specification.		 Candidate Recommendation Definition for <pattern>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'height' in that specification.		 Recommendation Initial definition for <foreignObject>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'height' in that specification.		 Recommendation Initial definition for <pattern>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'height' in that specification.		 Recommendation Initial definition for <image>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'height' in that specification.		 Recommendation Initial definition for <svg>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'height' in that specification.		 Recommendation Initial definition for <use>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'height' in that specification.		 Recommendation Initial definition for <filter>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'height' in that specification.		 Recommendation Initial definition for filter primitives
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'height' in that specification.		 Recommendation Initial definition for <mask>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'height' in that specification.		 Recommendation Initial definition for <rect>