osbo.com | SVG | Attributes | height

The height SVG attribute specifies the height of the element.

<length-percentage>

120%

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <filter height="50%" id="myid"> <feGaussianBlur stdDeviation="10"/> </filter> </defs> <circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/> </svg>

filterUnits

primitiveUnits

width

x

y

World Wide Web Consortium (W3C)

The height SVG attribute specifies the height of the element.

auto | <length-percentage>

auto

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> foreignObject { background-color: yellow; width: 100%; } </style> <foreignObject> <div xmlns="http://www.w3.org/1999/xhtml">XHTML in SVG</div> </foreignObject> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> foreignObject { background-color: yellow; width: 50%; } foreignObject:nth-of-type(2) { x: 50%; } </style> <foreignObject height="100"> <div xmlns="http://www.w3.org/1999/xhtml">XHTML in SVG</div> </foreignObject> <foreignObject height="100%"> <div xmlns="http://www.w3.org/1999/xhtml">XHTML in SVG</div> </foreignObject> </svg>

width

x

y

World Wide Web Consortium (W3C)

The height SVG attribute specifies the height of the element.

auto | <length-percentage>

auto

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <image href="/assets/svg/HappyFace.svg"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <image height="100" href="/assets/svg/HappyFace.svg"/> <image height="100%" href="/assets/svg/HappyFace.svg"/> </svg>

crossorigin

href

preserveAspectRatio

width

x

y

World Wide Web Consortium (W3C)

The height SVG attribute specifies the height of the largest possible offscreen buffer.

<length-percentage>

120%

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <linearGradient id="myid1"> <stop/> <stop offset="100%" stop-color="red"/> </linearGradient> <mask height="0.5" id="myid2" y="0"> <svg viewBox="0 0 48 48"> <path d="M24,0 A24,24,0,0,1,24,48 A24,24,0,0,1,24,0 M16,12 A4,4,0,0,0,16,20 A4,4,0,0,0,16,12 M32,12 A4,4,0,0,0,32,20 A4,4,0,0,0,32,12 M8,24 A16,16,0,0,0,40,24 V28 H8" fill="white"/> </svg> </mask> <mask height="50%" id="myid3" y="50%"> <rect fill="white" height="100%" width="100%"/> <svg viewBox="0 0 48 48"> <path d="M24,0 A24,24,0,0,1,24,48 A24,24,0,0,1,24,0 M16,12 A4,4,0,0,0,16,20 A4,4,0,0,0,16,12 M32,12 A4,4,0,0,0,32,20 A4,4,0,0,0,32,12 M8,24 A16,16,0,0,0,40,24 V28 H8"/> </svg> </mask> <rect fill="url(#myid1)" height="100%" mask="url(#myid2)" width="100%"/> <rect fill="url(#myid1)" height="100%" mask="url(#myid3)" width="100%"/> </svg>

maskContentUnits

maskUnits

width

x

y

World Wide Web Consortium (W3C)

The height SVG attribute specifies the height of the pattern.

<length-percentage>

0

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern height=".02" id="myid1" width=".02"> <path d="M5,0 L10,5 L5,10 L0,5" fill="red"/> </pattern> <pattern height="4%" id="myid2" width="2%"> <path d="M5,0 L10,5 L5,10 L0,5" fill="blue"/> </pattern> </defs> <circle cx="50%" cy="50%" fill="url(#myid1)" r="50vh"/> <circle cx="50%" cy="50%" fill="url(#myid2)" r="50vh"/> </svg>

href

patternContentUnits

patternTransform

patternUnits

viewBox

width

x

y

World Wide Web Consortium (W3C)

The height SVG attribute specifies the height of the element.

auto | <length-percentage>

auto

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> rect { width: 100; } </style> <rect/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> rect { width: 100; } rect:nth-of-type(2) { fill: red; } </style> <rect height="100%"/> <rect height="100"/> </svg>

pathLength

rx

ry

width

x

y

World Wide Web Consortium (W3C)

The height SVG attribute specifies the height of the element.

auto | <length-percentage>

auto

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <rect height="100%" width="100%"/> <svg fill="red"> <rect height="100%" width="100%"/> </svg> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <rect height="100%" width="100%"/> <svg fill="red" height="50%"> <rect height="100%" width="100%"/> </svg> <svg fill="blue" height="50"> <rect height="100%" width="100%"/> </svg> </svg>

preserveAspectRatio

transform

viewBox

width

x

y

zoomAndPan

World Wide Web Consortium (W3C)

The height SVG attribute specifies the height of the element.

auto | <length-percentage>

auto

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <symbol id="myid"> <circle cx="50" cy="50" r="50"/> </symbol> <use href="#myid"/> <use fill="red" href="#myid" x="100"/> <use fill="green" href="#myid" x="200"/> <use fill="blue" href="#myid" x="300"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <symbol height="50%" id="myid1"> <circle cx="50%" cy="50%" r="50vh"/> </symbol> <symbol height="50" id="myid2"> <circle cx="50" cy="50" r="50"/> </symbol> <use href="#myid1"/> <use fill="red" href="#myid1" y="50vh"/> <use fill="blue" href="#myid1" y="100vh"/> <use href="#myid2"/> <use fill="red" href="#myid2" y="50"/> <use fill="blue" href="#myid2" y="100"/> </svg>

preserveAspectRatio

refX

refY

viewBox

width

x

y

World Wide Web Consortium (W3C)

The height SVG attribute specifies the height of the element.

This only has an effect if the referenced element defines a viewport.

auto | <length-percentage>

auto

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <svg id="myid" viewBox="0 0 100 100"> <rect height="100" width="100"/> </svg> <use fill="red" href="#myid" width="50%"/> <use fill="blue" href="#myid" width="25%"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <svg id="myid" viewBox="0 0 100 100"> <rect height="100" width="100"/> </svg> <use fill="red" height="50%" href="#myid"/> <use fill="blue" height="50" href="#myid"/> </svg>

href

width

x

y

World Wide Web Consortium (W3C)