hakobera's blog

技術メモ。たまに雑談

SVG で カルトゥーシュ・ジェネレータを作った

Cartouche Generator

先週エジプト旅行に行ってきたので、その勢いで作りました。構想から公開まで1日くらい。

テキストを入力するだけで、以下のような画像が生成できます。

f:id:scalar:20101003163629p:image

カルトゥーシュ (cartouche) というのは、古代エジプトで使われていたヒエログリフの文字(記号)の1つで、ファラオの名前を囲む曲線のことです。このジェネレータでは入力したテキストをヒエログリフ古代エジプト文字)に変換し、カルトゥーシュで囲んだ図形を生成してくれます。

今回はじめて SVG で作ってみましたが、これくらい簡単な図形なら Canvas より扱いやすかったです。IE9 が SVG 対応したので、今後はサーバーサイド・プログラミングレスな HTML5 + CSS3 + Javascript だけの 画像ジェネレータも増えてくるんじゃないかと思います。