SVG

    <svg width="600" height="300">
      <rect width="100%" height="100%" fill="red"/>
    </svg>

SVGでは後ろに書いたものが前に表示されます。

    <svg width="600" height="300">
      <rect width="100%" height="100%" fill="red"/>
      <rect width="100" height="50" fill="blue"/>
    </svg>

viewBox:デバイスに合わせて反映

    <svg width="600" height="300" viewBox="0 0 400 200">
      <rect width="400" height="200" fill="red"/>
      <rect width="100" height="50" fill="blue"/>
    </svg>

色の設定

    <svg width="600" height="300">
      <rect width="600" height="300" fill="red"/>
      <rect width="500" height="250" fill="#00ff00"/>
      <rect width="400" height="200" fill="rgb(0, 0, 255)"/>
      <rect width="300" height="150" fill="rgba(255,255,255,0.4)"/>
    </svg>

枠線

    <svg width="600" height="300">
      <rect width="600" height="300" fill="red" stroke="black" stroke-width="10"/>
    </svg>

sytle属性による記述

    <svg width="600" height="300">
      <rect width="600" height="300" style="fill:red; stroke:black; stroke-dasharray:20,5"/>
    </svg>

cssのような書き方

    <svg width="600" height="300">
        <style type="text/css"><!&#91;CDATA&#91;
    #myBox{
      fill:red;
      stroke:black;
    }
        &#93;&#93;></style>
      <rect width="600" height="300" id="myBox">
    </svg>

gタグ

    <svg width="600" height="300">
    <g stroke="black">
      <rect width="600" height="300" fill="red" />
      <rect width="500" height="200" fill="green" />
      <rect width="400" height="100" fill="white"/>
    </g>
    </svg>

グラデーション

    <svg width="600" height="300">
    <defs>
        <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1"> 
            <stop offset="0" stop-color="skyblue" />
            <stop offset="0.5" stop-color="pink" />
            <stop offset="1" stop-color="yellow" stop-opacity="0.5"/>
        </linearGradient>
    </defs>
      <rect width="600" height="300" fill="url(#g1)" />
    </svg>

円形グラデーション

    <svg width="600" height="300">
    <defs>
        <radialGradient id="g1" cx="0.5" cy="0.5" r="0.5"> 
            <stop offset="0" stop-color="skyblue" />
            <stop offset="0.5" stop-color="pink" />
            <stop offset="1" stop-color="yellow" stop-opacity="0.5"/>
        </linearGradient>
    </defs>
      <rect width="600" height="300" fill="url(#g1)" />
    </svg>

stroke

<line x="100" y1="100" x2="200" y2="200" stroke-width="20" stroke="black" stroke-linecap="raound"  />

circle, ellipse

<circle cx="200" cy="100" r="40" fill="white" />
      <ellipse cx="400" cy="100" rx="40" ry="80" fill="green" />

polygon, polyline, path

      <polyline points="100 50 150 100 50 100" stroke="black" fill="none"/>
      <polygon points="100 50 150 100 50 100" stroke="black" fill="none"/>
      <path d="M100 50 l50 50 h100 v100 h100" stroke="black" fill="none"/>