Webサイト上でSVGファイルを編集・PNGでDLしたい

Question

フリー素材配布サイトを作ろうとしています。

下記のサイトのように、(おそらく)SVGファイルから色やサイズを指定し、PNG形式でダウンロードできるようにしたいと考えています。
http://icooon-mono.com/

ネットで情報を探してみたところ、どうやらこのサイトはWordPressで出来ているであろうことはわかりました。
ですが、色やサイズを指定し、サーバー上でPNGファイルを生成しダウンロードする部分をどうやって実装しているのかがわかりません。
該当するようなプラグインがあるのかもと思い調べてみましたが見つけることが出来ませんでした。

WordPressにそのようなプラグインがあるのか、あるいは自前で実装しているのか？
しているとしたらどのような言語やフレームワーク等が必要なのか、アドバイスをいただけませんでしょうか。

以上、よろしくお願いいたします。

Answer 1

一覧表示・詳細表示は、たしかに WordPress のようですが、詳細表示(WordPressのsingle.php)で、やっていることは画面で選んだボタンに合わせて、Javascript で、画像のURLを /i/icon_00000/icon_000000.png のように作成しているだけのようです。

この /i/ のディレクトリの下に 選択できるすべての種類の画像ファイルが置いてあるだけなのか URLにアクセスがある都度に WordPress 以外のプログラムが動いて画像を生成しているのかは、外からは判断できません。

---

独自のプログラムが動いていると仮定する場合ですが ImageMagick 等の画像ライブラリが使えたら PHP でも Ruby でも他の言語でも変換できると思います。

コマンドラインから ImageMagick の convert を使って

convert -resize 256x256 icon.svg icon.png

 または

convert -geometry 256x256 icon.svg icon.png

のコマンドで SVG を 256px の PNG に変換できます。

Comments

[midomurasaki]

ご回答ありがとうございます。

WordPressを使って
・素材一覧ページをindex.phpで作成
・詳細ページをsingle.phpで作成
・ダウンロードURL(WebAPI？)をJavascriptで生成するよう実装
サーバー側で
・リクエストを受けるWebAPIをPHP等で作成
・リクエストに応じてImageMagickにコマンド発行？
・リクエスト元へImageMagickで生成した画像を返す

という理解で正しいでしょうか？

[CHERRY]

画像のバリエーションの種類も多くないので、サーバーの負荷等も考えて、 /i/ の下に　すべての画像ファイルがそのまま置いてあるだけではないかと思っています。
プログラムで変換処理をするのであれば、わざわざ 画像別の URL を作らなくてもパラメータで渡す方が簡単だと思います。

プログラムで画像を変換して、バリエーションを作成するのであれば、想像されている内容で概ね合っていると思います。

[midomurasaki]

確かに都度生成するのであればわざわざフォルダ分けする必要はありませんね。

ただ、画像のサイズだけでなくRGBとalphaまで細かく指定できるので、そう考えると256^4*画像サイズ分ものファイルを用意しているとはちょっと考えにくいです。色指定時にブラウザ上でリアルタイムに変化もしますし。

フォルダ分けの真意は不明ですが画像をサーバー上で生成する方向で開発を進めたいと思います。
おかげさまでそのための大まかなイメージが付きました。
ご回答ありがとうございました。