| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| div { |
| background: yellow; |
| width: 75px; |
| height: 75px; |
| } |
| svg { |
| background: lime; |
| } |
| svg.intrinsic-size { |
| width: 50px; |
| height: 50px; |
| } |
| rect { |
| fill: red; |
| } |
| </style> |
| </head> |
| <body> |
| <div> |
| <svg class='intrinsic-size' width='100' height='100'> |
| <rect width='50%' height='50%'/> |
| </svg> |
| </div> |
| <div> |
| <svg width='100' height='100'> |
| <style> |
| svg { |
| width: 50px; |
| height: 50px; |
| } |
| </style> |
| <rect width='50%' height='50%'/> |
| </svg> |
| </div> |
| <div> |
| <svg class='intrinsic-size' width='100' height='100'> |
| <svg viewbox='0 0 100 100'> |
| <rect width='50%' height='50%'/> |
| </svg> |
| </svg> |
| </div> |
| <div> |
| <svg class='intrinsic-size' width='100' height='100'> |
| <svg class='intrinsic-size' viewbox='0 0 100 100'> |
| <rect width='50' height='50'/> |
| </svg> |
| </svg> |
| </div> |
| <div> |
| <svg class='intrinsic-size' width='100' height='100'> |
| <svg class='intrinsic-size' width='50%' height='50%' viewbox='0 0 100 100'> |
| <rect width='100%' height='100%'/> |
| </svg> |
| </svg> |
| </div> |
| <div> |
| <svg class='intrinsic-size' width='100' height='100'> |
| <svg width='50%' height='50%' viewbox='0 0 100 100'> |
| <rect width='100' height='100'/> |
| </svg> |
| </svg> |
| </div> |
| <div> |
| <svg width='100' height='100'> |
| <style> |
| svg { |
| width: 50px; |
| height: 50px; |
| } |
| </style> |
| <svg width='50%' height='50%' viewbox='0 0 100 100'> |
| <rect width='100' height='100'/> |
| </svg> |
| </svg> |
| </div> |
| </body> |
| </html> |
