■ 四角

<svg>
  <rect id="myBox" x="0" y="0" fill="red" width="100" height="80" />
</svg>

↑ この隙間。svg タグに何も指定しないと width="300px" height="150px" になります。（Chrome）
svg の width, height より図形の方が大きいとはみ出た分は表示されません。
svg は通常画像と同じ inline です。下に小さな隙間が出来たり、改行しないと右横に文字がきます。

■ 四角（線付き）

<svg width="300px" height="70px">
  <rect x="10" y="10" width="200" height="50" stroke="black" stroke-width="3" fill="none" />
</svg>

stroke-width は線の太さ。
fill は塗り。
px は有っても無かっても同じようです。

■ テキスト

<svg width="300" height="50">
  <text x="100" y="25">Hello World</text>
</svg>

■ 単一線

<svg width="300" height="150">
  <line x1="0" y1="0" x2="150" y2="150" stroke="black" stroke-width="1" />
</svg>

■ 円

<svg width="300" height="120">
  <circle cx="150" cy="60" r="50" stroke="black" stroke-width="1" fill="none" />
</svg>

■ 楕円

<svg width="300" height="120">
  <ellipse cx="150" cy="60" rx="100" ry="50" stroke="black" stroke-width="1" fill="none" />
</svg>

■ 三角

<svg width="100" height="100">
  <path d="M50 0 L0 100 L100 100 Z" style="fill:red"/>
</svg>

M 開始位置
L 直線
Z 終点から開始位置まで閉じる線

■ 三角 高さの異なるものを並べる例

<svg width="100" height="150">
  <path d="M50 0 L0 150 L100 150 Z" style="fill:red"/>
</svg>
<svg width="100" height="150">
  <path d="M50 50 L0 150 L100 150 Z" style="fill:red"/>
</svg>

この書き方だと、開始位置の y 座標を変えるだけで良い。

■ 折れ線

<svg width="300px" height="100px">
  <path stroke="blue" fill="none" d="M 0 0 L 50 50 100 20 150 50 200 10"></path>
</svg>

M 開始座標。
L x, y 座標のセット。
fill="none" を描かないと黒で塗られます。

■ 折れ線（丸付き）

<svg width="300px" height="100px">
  <path stroke="red" fill="none" d="M 50 50 L 100 50 150 20 200 80 250 10" style="marker: url(#line-marker)"></path>
  <marker id="line-marker" markerWidth="10" markerHeight="10" refX="5" refY="5" stroke="none" fill="red">
    <circle cx="5" cy="5" r="5"/>
  </marker>
</svg>

style="marker: url(#line-marker)" はすぐ下で定義されている円。

■ 棒グラフ、折れ線グラフ

<svg>
  <rect id="myBox" x="30" y="70" fill="#59acfd" width="30" height="80" />
  <rect id="myBox" x="60" y="100" fill="#f99ccd" width="30" height="50" />
  <rect id="myBox" x="110" y="20" fill="#59acfd" width="30" height="130" />
  <rect id="myBox" x="140" y="50" fill="#f99ccd" width="30" height="100" />
  <rect id="myBox" x="190" y="40" fill="#59acfd" width="30" height="110" />
  <rect id="myBox" x="220" y="10" fill="#f99ccd" width="30" height="140" />
  <path stroke="red" fill="none" d="M 60 130 L 140 70 220 100" style="marker: url(#line-marker)"></path>
  <marker id="line-marker" markerWidth="10" markerHeight="10" refX="5" refY="5" stroke="none" fill="red">
    <circle cx="5" cy="5" r="5"/>
  </marker>
</svg>

■ 文字縁取り

<style type="text/css">
.svg-text{
  font-weight: bolder;
  font-size: 32px;
  fill: #000;
  stroke: #f00;
  stroke-width: 2px;
}
</style>
<svg width="300" height="80">
  <text x="10" y="40" class="svg-text">ほにょぺにょこ</text>
</svg>

■ 文字縁取りに影追加

<svg width="300" height="80">
  <defs>
    <filter id="svg-text-shadow" x="0" y="0" width="120%" height="120%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="offOut" />
      <feOffset in="offOut" dx="-2" dy="2" result="blurOut" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
<text x="10" y="40" class="svg-text" filter="url(#svg-text-shadow)">　ほにょぺにょこ</text>

offOut, blurOut は変数なので任意。
SourceAlpha, SourceGraphic はパラメーター。
stdDeviation="2" がボカシ。
dx="-2" dy="2" がボカシの方向。
左にぼかしたときに切れるので、例では１文字空けたりしていますが、他に方法ないかな。

■ 半透明

<svg>
  <rect id="myBox" x="0" y="0" fill="red" width="100" height="80" />
  <rect id="myBox" x="50" y="40" fill="blue" width="100" height="80" fill-opacity="0.7" />
</svg>

fill-opacity="0.7" 透明度 30 %。0 に近いほど透明。

<svg width="200" height="200">
  <line x1="50" y1="0" x2="50" y2="200" stroke="#707271" stroke-width="1">
  <line x1="150.5" y1="0" x2="150.5" y2="200" stroke="#707271" stroke-width="1">
</svg>