blob: fb2008438d518f0485fac775ed7d3477f19d5d98 [file] [log] [blame]
<!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>