Test of SVG ViewPort and ViewBox in HTML

SVG embedded using <object> in table

     HTML→

SVG
TD
No W/H
TD:
W/H=200px
Object:
No W/H
Object:
W/H=120px
Object:
No W/H
Object:
W/H=120px
No Viewbox No width/height X X X X
Width=150
Height=100
X X X X
Width=50%
Height=50%
X X X X
Viewbox
(150x100)
No width/height X X X X
Width=150
Height=100
X X X X
Width=50%
Height=50%
X X X X
Viewbox
(300x200)
No width/height X X X X
Width=150
Height=100
X X X X
Width=50%
Height=50%
X X X X

SVG embedded using <div>

SVG: no width/height, no viewBoxObject

div: no width/height, object: no width/height

X

div: no width/height, object: width=120px, height=120px

X

div: width=200px, height=200px, object: no width/height

X

div: width=200px, height=200px, object: width=120px, height=120px

X

SVG: width=150, height=100, no viewBox

div: no width/height, object: no width/height

X

div: no width/height, object: width=120px, height=120px

X

div: width=200px, height=200px, object: no width/height

X

div: width=200px, height=200px, object: width=120px, height=120px

X

SVG: width=50%, height=50%, no viewBox

div: no width/height, object: no width/height

X

div: no width/height, object: width=120px, height=120px

X

div: width=200px, height=200px, object: no width/height

X

div: width=200px, height=200px, object: width=120px, height=120px

X

SVG: no width/height, viewBox (0,0,150,100)

div: no width/height, object: no width/height

X

div: no width/height, object: width=120px, height=120px

X

div: width=200px, height=200px, object: no width/height

X

div: width=200px, height=200px, object: width=120px, height=120px

X

SVG: width=150, height=100, viewBox (0,0,150,100)

div: no width/height, object: no width/height

X

div: no width/height, object: width=120px, height=120px

X

div: width=200px, height=200px, object: no width/height

X

div: width=200px, height=200px, object: width=120px, height=120px

X

SVG: width=50%, height=50%, viewBox (0,0,150,100)

div: no width/height, object: no width/height

X

div: no width/height, object: width=120px, height=120px

X

div: width=200px, height=200px, object: no width/height

X

div: width=200px, height=200px, object: width=120px, height=120px

X

SVG: no width/height, viewBox (0,0,300,200)

div: no width/height, object: no width/height

X

div: no width/height, object: width=120px, height=120px

X

div: width=200px, height=200px, object: no width/height

X

div: width=200px, height=200px, object: width=120px, height=120px

X

SVG: width=150, height=100, viewBox (0,0,300,200)

div: no width/height, object: no width/height

X

div: no width/height, object: width=120px, height=120px

X

div: width=200px, height=200px, object: no width/height

X
X

SVG: width=50%, height=50%, viewBox (0,0,300,200)

div: no width/height, object: no width/height

X

div: no width/height, object: width=120px, height=120px

X

div: width=200px, height=200px, object: no width/height

X

div: width=200px, height=200px, object: width=120px, height=120px

X