| <!DOCTYPE html> |
| <title>SVG grid with percentage width</title> |
| <style type="text/css"> |
| body { width: 240px; } |
| </style> |
| <h1>SVG grid with percentage width</h1> |
| <p> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 320"> |
| <rect width="120" height="40" fill="salmon"/> |
| <rect x="120" width="120" height="40" fill="purple"/> |
| |
| <rect y="40" width="80" height="140" fill="rosybrown"/> |
| <rect y="40" x="80" width="80" height="80" fill="pink"/> |
| <rect y="120" x="80" width="80" height="60" fill="yellow"/> |
| <rect y="40" x="160" width="80" height="80" fill="darkcyan"/> |
| <rect y="120" x="160" width="80" height="60" fill="darkgoldenrod"/> |
| |
| <rect y="180" width="120" height="40" fill="peachpuff"/> |
| <rect y="180" x="120" width="120" height="40" fill="mistyrose"/> |
| |
| <rect y="220" width="30" height="60" fill="lightblue"/> |
| <rect y="220" x="30" width="90" height="60" fill="orange"/> |
| <rect y="220" x="120" width="60" height="60" fill="grey"/> |
| <rect y="220" x="180" width="60" height="60" fill="lightgoldenrodyellow"/> |
| |
| <rect y="280" width="120" height="40" fill="lightgrey"/> |
| <rect y="280" x="120" width="90" height="40" fill="green"/> |
| <rect y="280" x="210" width="30" height="40" fill="plum"/> |
| </svg> |
| </p> |