Folioscope

プログラミング/Unix系/デザイン/CG などのメモがもりもり

CSS, SVG, Canvas による描画結果の比較

HTMLで図形を描く方法に、次のものがある。

CSS
CSS3から使用できるタグが増え、図形も描ける程度になりました。しかし他の2つと違い用途が異なるので、自由度は高くありません。
SVG
HTML5からSVG形式に対応し、``要素によってインラインで図形をペタペタ貼ることができます。
Canvas要素
HTML5から新たに追加された要素。JavaScriptでかけるので、幾何学的な画像が描きやすいです。

レンダリングエンジンが異なるためか,表示結果は全く違うものになりました。 それぞれの表示結果を比較してみます。

ご覧の通りわずかに結果が異なっています。 おそらく内部のレンダリングエンジンが違うのでしょう。 特に矩形の線が1pxですが、SVG/Canvasともにぼやけています。 また文字のカーニングがわずかに違っています。 そして一番の違いが出てきたのは、拡大時です。

f:id:ibenza:20140825151432p:plain

どういうわけかCanvasタグが大きくぼやけている。 おそらくパフォーマンス向上のためか、内部でラスタライズしている模様。 そしてなぜか拡大すると、再描画されずにラスタライズした画像がそのまま拡大されます。 これらのことを考慮して、適切なレンダリングエンジンを選択する必要があります。