画像を表現するフォーマットの1つに SVG(Scalable Vector Graphics) があります。いわゆる「ベクトルデータ」なので、拡大縮小時にもなめらかな曲線で描くことが可能になる、という特徴があります。

この SVG 、実体は特定のルールで記述された XML データとなります。例として以下は 100x100 の2次元エリア内に黒い塗りつぶし三角形を描画しています:
<svg width="100" height="100">
<path d="M0 100 L100 100 L100 0 Z" style="fill:black"/>
</svg>

このような XML データを image/svg+xml の Content-Type を指定して返すことで画像データを動的に生成してクライアントに返すことが可能になります(以下は Node.js での例):
  :

app.get( '/img.svg', function( req, res ){
  res.contentType( 'image/svg+xml' );
  var svg = '<svg width="100" height="100">';
  svg += '<path d="M0 100 L100 100 L100 0 Z" style="fill:black"/>';
  svg += '</svg>';
  res.write( svg );
  res.end();
});

  :

理論的にはこの動的画像を HTML の <img> タグで指定して表示することができる、はず、です:
  :
<img src="/img.svg"/>
  :

ところがこの方法だと正しく表示できません(画像として認識されないようです):
2018053001


<img> タグの src 属性に埋め込んで指定する場合、SVG 側でも xmlns 属性を指定して生成する必要があるようです。つまり SVG 側を以下のように変更します:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<path d="M0 100 L100 100 L100 0 Z" style="fill:black"/>
</svg>

コードの場合も同様に変更します:
  :

app.get( '/img.svg', function( req, res ){
  res.contentType( 'image/svg+xml' );
  var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">';
  svg += '<path d="M0 100 L100 100 L100 0 Z" style="fill:black"/>';
  svg += '</svg>';
  res.write( svg );
  res.end();
});

  :

こうした上で <img src="/img.svg"/> とすると正しく表示できるようになりました:
2018053002