画像を表現するフォーマットの1つに SVG(Scalable Vector Graphics) があります。いわゆる「ベクトルデータ」なので、拡大縮小時にもなめらかな曲線で描くことが可能になる、という特徴があります。
この SVG 、実体は特定のルールで記述された XML データとなります。例として以下は 100x100 の2次元エリア内に黒い塗りつぶし三角形を描画しています:
このような XML データを image/svg+xml の Content-Type を指定して返すことで画像データを動的に生成してクライアントに返すことが可能になります(以下は Node.js での例):
理論的にはこの動的画像を HTML の <img> タグで指定して表示することができる、はず、です:
ところがこの方法だと正しく表示できません(画像として認識されないようです):

<img> タグの src 属性に埋め込んで指定する場合、SVG 側でも xmlns 属性を指定して生成する必要があるようです。つまり SVG 側を以下のように変更します:
コードの場合も同様に変更します:
こうした上で <img src="/img.svg"/> とすると正しく表示できるようになりました:

この 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"/> :
ところがこの方法だと正しく表示できません(画像として認識されないようです):

<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"/> とすると正しく表示できるようになりました:
