JavaScriptでSVG画像を色変更しながらPNGへ変換

たまには技術ネタも。

このサイトを立ち上げた当初、

  • カラーバリエーションの追加
  • ベクター形式の追加
  • 目論んでいたわけですが、ベタの画像ファイルとしてカラーバリエーションを色々と用意するのはなかなかに手間なので作戦変更。ベクター形式の追加と合わせ、二兎追って逆転狙い。

    案としては、ベクター形式であるSVG画像を使いつつ、好きな色を選択してもらって、JavaScriptでSVGにその色を反映、色付けされた画像をSVGとPNGどちらの形式でもダウンロードできるように実装する感じ。

    Office365ではSVGをそのままパワポに貼ったりできるのできっと便利。それ以前のパワポではSVGを扱えないので、inkscapeかなんかでemfファイルに変換して頑張る感じです…だったらPNGで良いかって感じ…

    では、さっそく実験。

    左側がSVG画像。右側黒枠がcanvasでPNG出力。カラーピッカーはiro.jsを拝借。カラーピッカーをグリグリするとSVGの色が変わって、それを随時canvasでPNGとして生成。気持ちイイ。

    Attacker Created with Sketch.

    基本コンセプトはできたので、あとは時間見つけて本格実装。

    ちなみに本実験のコードはこんな感じ。

    追記:Safariで動かない…調べなきゃ…直った。Blobのtypeにcharset書いちゃダメ。


    [JavaScriptでSVG画像を色変更しながらPNGへ変換](https://gist.github.com/a28b04ee5c11832507ec07b0278bee34)