本文

svgというベクタ画像形式のファイルは、HTMLに直接埋め込むことができます。

<!doctype html>
<html>
  <head><title>svg example</title></head>

  <body>
    <!-- svgで日本国旗(正方形版)を描画する -->
    <svg width="100" height="100" viewBox="0 0 100 100">
      <rect x="0" y="0" width="100" height="100" fill="white"/>
      <circle cx="50" cy="50" r="25" fill="red"/>
    </svg>
  </body>
</html>

svgタグにwidth height viewBoxというアトリビュートを指定しています。

widthとheightはそのまんま表示する幅と高さなのですが、viewBoxに関しては認識を間違っていました。

viewBox="a b c d"は以下のような意味を持ちます

表示領域の左上の座標は(a, b)
表示領域の右下の座標は(a + c, b + d)

つまり、viewBox="top-left-x top-left-y width height"というわけなのですが、勘違いしてviewBox="top-left-x top-left-y bottom-right-x bottom-right-y"だと思っていました。その結果、次のようなsvgを書いて「表示されない〜😭」と30分ほどわめいていました。

<!doctype html>
<html>
  <head><title>svg example</title></head>

  <body>
    <!-- 中央から右下方向に縦横50の正方形を描画するつもり -->
    <!-- しかし、表示されている画像の右下の座標は(0, 0)なので表示されない😭 -->
    <svg width="100" height="100" viewBox="-100 -100 100 100">
      <rect x="0" y="0" width="50" height="50" fill="red"/>
    </svg>
  </body>
</html>