The svg element for SVG specifies the coordinate system and viewport.
Specifies the height of the element.
auto | <length-percentage> Specifies whether or not to force uniform scaling.
Specifies a transformation to the coordinate system.
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.
[ <min-x>,? <min-y>,? <width>,? <height> ] Specifies the width of the element.
auto | <length-percentage> Specifies the x-coordinate of the element.
Setting the outer svg element will have no effect.
Specifies the y-coordinate of the element.
Setting the outer svg element will have no effect.
Specifies magnification and panning.
Setting the inner svg element will have no effect.
<svg 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>
<svg preserveAspectRatio="xMinYMin" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg transform="none" xmlns="http://www.w3.org/2000/svg">
<rect height="100%" width="100%"/>
</svg>
<svg transform="rotate(45) scale(0.5) translate(100, 100)" xmlns="http://www.w3.org/2000/svg">
<rect height="100%" width="100%"/>
</svg>
<svg 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>
<svg 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>
<svg 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>
<svg 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>
<svg xmlns="http://www.w3.org/2000/svg">
<rect height="100%" width="100%"/>
<svg fill="red">
<rect height="100%" width="100%"/>
</svg>
</svg>
<svg 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>
<svg 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>
<svg 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>
<svg xmlns="http://www.w3.org/2000/svg" zoomAndPan="disable">
<circle cx="50%" cy="50%" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" zoomAndPan="magnify">
<circle cx="50%" cy="50%" r="50vh"/>
</svg>