Adobe Illustrator で描画したものをSVGで書き出し、
svg要素でHTMLにインラインで埋め込む
Illustratorで書き出したSVG画像を <svg>要素を使って HTML上にインラインで埋め込み、ページの上下を区切っています。
ウィンドウサイズを変えてみてください。SVG画像も追随して拡大縮小し、拡大によって画像が粗くなったりしません。
Illustratorから書き出す詳細は「ほんっとにはじめての HTML5 と CSS3」の「[70-1] svg要素でベクターグラフィクスを埋め込もう」記事本文に書いていますのでご覧ください。
ここにもこのページのHTMLコードをざっと載せておきます。
<svg>から</svg>までのコード（6〜20行）は、Illustratorが自動で書き出したものをコピペしただけです。
このページのHTML抜粋です。
<body> <!-- ←bodyの背景は白 -->
<div id="wrap_upper"> <!-- ←画面上部は背景ベージュに指定 -->
<!--略-->
</div>
<!-- ↓SVG画像を埋め込む -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 900 102" enable-background="new 0 0 900 102" xml:space="preserve">
<g id="under">
<rect fill="#E6DAD8" width="900" height="95"/>
</g>
<g id="middle">
<path opacity="0.5" fill="#FFFFFF"
d="M0,61.627C0,61.627,99.72,30,168,30c133,0,217.973,43,384,43c120,0,196-95,347-58v79H0
L0,61.627z"/>
</g>
<g id="upper">
<path fill="#FFFFFF"
d="M0,91c0,0,78.854-55.608,228-58c124.731-2,178.84,47.12,345,43c121-3,190.849-77,327-62v88H0V91z"/>
</g>
</svg>
<section>
<h1>Illustratorで描いて書き出すだけ</h1>
<!--略-->
</section>
</body>
CSSの要点も書いておきます。
body {background: #fff} /*←bodyの背景は白*/
div#wrap_upper {background: #e6dad8} /*←画面上部のdivの背景をベージュにしました*/
svg {
width:100%;
height:auto} /*←svg要素のサイズを指定（この場合はウィンドウサイズに追随するようにしています）*/
このサンプルの場合は、<svg>要素のサイズはウィンドウサイズに追随するように「幅100％、高さauto」にしています。（4〜5行目）
この場合、HTML側の <svg>要素の「height属性・width属性」が不要ですので削除しておきます。