Test of SVG ViewPort and ViewBox in HTML
SVG embedded using <object> in table
- td: backround yellow, padding 10px, margin 0
- object: background aqua, padding 10px, margin 0
- SVG: background (viewport) blue
- SVG rectangle: width 150, height 100, x 0, y 0, stroke 10, purple
- SVG rectangle: width 180, height 130, x -15, y -15, stroke 2, orange
- SVG circle: rx 75, ry 75, radius 45, red
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 |
|
|
|
|
Width=150 Height=100 |
|
|
|
|
Width=50% Height=50% |
|
|
|
|
Viewbox (150x100) |
No width/height |
|
|
|
|
Width=150 Height=100 |
|
|
|
|
Width=50% Height=50% |
|
|
|
|
Viewbox (300x200) |
No width/height |
|
|
|
|
Width=150 Height=100 |
|
|
|
|
Width=50% Height=50% |
|
|
|
|
SVG embedded using <div>
- div: backround yellow, padding 10px, margin 0
- object: background aqua, padding 10px, margin 0
- SVG: background (viewport) blue
- SVG rectangle: width 150, height 100, x 0, y 0, stroke 10, purple
- SVG rectangle: width 180, height 130, x -15, y -15, stroke 2, orange
- SVG circle: rx 75, ry 75, radius 45, red
SVG: no width/height, no viewBoxObject
div: no width/height, object: no width/height
div: no width/height, object: width=120px, height=120px
div: width=200px, height=200px, object: no width/height
div: width=200px, height=200px, object: width=120px, height=120px
SVG: width=150, height=100, no viewBox
div: no width/height, object: no width/height
div: no width/height, object: width=120px, height=120px
div: width=200px, height=200px, object: no width/height
div: width=200px, height=200px, object: width=120px, height=120px
SVG: width=50%, height=50%, no viewBox
div: no width/height, object: no width/height
div: no width/height, object: width=120px, height=120px
div: width=200px, height=200px, object: no width/height
div: width=200px, height=200px, object: width=120px, height=120px
SVG: no width/height, viewBox (0,0,150,100)
div: no width/height, object: no width/height
div: no width/height, object: width=120px, height=120px
div: width=200px, height=200px, object: no width/height
div: width=200px, height=200px, object: width=120px, height=120px
SVG: width=150, height=100, viewBox (0,0,150,100)
div: no width/height, object: no width/height
div: no width/height, object: width=120px, height=120px
div: width=200px, height=200px, object: no width/height
div: width=200px, height=200px, object: width=120px, height=120px
SVG: width=50%, height=50%, viewBox (0,0,150,100)
div: no width/height, object: no width/height
div: no width/height, object: width=120px, height=120px
div: width=200px, height=200px, object: no width/height
div: width=200px, height=200px, object: width=120px, height=120px
SVG: no width/height, viewBox (0,0,300,200)
div: no width/height, object: no width/height
div: no width/height, object: width=120px, height=120px
div: width=200px, height=200px, object: no width/height
div: width=200px, height=200px, object: width=120px, height=120px
SVG: width=150, height=100, viewBox (0,0,300,200)
div: no width/height, object: no width/height
div: no width/height, object: width=120px, height=120px
div: width=200px, height=200px, object: no width/height
SVG: width=50%, height=50%, viewBox (0,0,300,200)
div: no width/height, object: no width/height
div: no width/height, object: width=120px, height=120px
div: width=200px, height=200px, object: no width/height
div: width=200px, height=200px, object: width=120px, height=120px