The svg SVG element specifies the coordinate system and viewport.
Attributes
height
Specifies the height of the element.
Value
auto | <length-percentage>
Default
preserveAspectRatio
Specifies whether or not to force uniform scaling.
Value
Default
transform
Specifies a transformation to the coordinate system.
Value
Default
viewBox
Specifies a rectangle in user space.
A list of four numbers: min-x , min-y , width , and height that should be mapped to the bounds of the SVG viewport established by the given element, taking into account the preserveAspectRatio attribute. The presence of the viewBox attribute results in a transformation being applied to the viewport coordinate system.
Value
[ <min-x>,? <min-y>,? <width>,? <height> ]
Default
width
Specifies the width of the element.
Value
auto | <length-percentage>
Default
x
Specifies the x-coordinate of the element.
Setting the outer svg element will have no effect.
Value
Default
y
Specifies the y-coordinate of the element.
Setting the outer svg element will have no effect.
Value
Default
zoomAndPan
Specifies magnification and panning.
Setting the inner svg element will have no effect.
Value
Default
height
auto
<length-percentage>
<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
<align>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<svg preserveAspectRatio="xMinYMin" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</svg>
</svg>
<meetOrSlice>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</svg>
</svg>
transform
none
<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>
<transform-list>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" transform="rotate(45)">
<rect height="100%" width="100%"/>
<svg fill="red">
<rect height="100%" width="100%"/>
</svg>
</svg>
viewBox
<height>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg fill="red" viewBox="0 0 100 50">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg fill="blue" viewBox="0 0 100 200">
<circle cx="50" cy="50" r="50"/>
</svg>
</svg>
<min-x>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg fill="red" viewBox="-50 0 100 100">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg fill="blue" viewBox="50 0 100 100">
<circle cx="50" cy="50" r="50"/>
</svg>
</svg>
<min-y>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg fill="red" viewBox="0 -50 100 100">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg fill="blue" viewBox="0 50 100 100">
<circle cx="50" cy="50" r="50"/>
</svg>
</svg>
<width>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg fill="red" viewBox="0 0 50 100">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg fill="blue" viewBox="0 0 200 100">
<circle cx="50" cy="50" r="50"/>
</svg>
</svg>
width
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>
<length-percentage>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect height="100%" width="100%"/>
<svg fill="red" width="50%">
<rect height="100%" width="100%"/>
</svg>
<svg fill="blue" width="50">
<rect height="100%" width="100%"/>
</svg>
</svg>
x
<length-percentage>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect height="100%" width="100%"/>
<svg fill="blue" x="50">
<rect height="100%" width="100%"/>
</svg>
<svg fill="red" x="50%">
<rect height="100%" width="100%"/>
</svg>
</svg>
y
<length-percentage>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect height="100%" width="100%"/>
<svg fill="blue" y="50">
<rect height="100%" width="100%"/>
</svg>
<svg fill="red" y="50%">
<rect height="100%" width="100%"/>
</svg>
</svg>
zoomAndPan
disable
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" zoomAndPan="disable">
<circle cx="50%" cy="50%" r="50vh"/>
</svg>
magnify
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" zoomAndPan="magnify">
<circle cx="50%" cy="50%" r="50vh"/>
</svg>
Internal
External