SVG を PNG に変換する

D3 の作者マイク・ボストック氏による “Save SVG as PNG” の訳です。

内容はタイトル通り、ブラウザ上に表示された SVG 画像を PNG 画像としてダウンロードする方法です。正確には、任意の web ページ上にある SVG 画像を一度 SVG ファイル(イラストレータなどでも編集可能な SVG フォーマット)としてローカルに保管し、それをブラウザ上で PNG に変換してダウンロードさせます。

できあがった PNG 画像は SVG 未対応の旧ブラウザでも表示できますが、この変換のためには SVG に対応したモダンブラウザが必要です。

また、下記の例では SVG ファイル名(ここでは fallback.svg )を直接 html 内にハードコードしていますが、ちょっと工夫すればファイル名を別途入力する、あるいは SVG ファイルを「アップロード」して変換させ、ダウンロードさせるようにできるでしょう。

なお、訳文末尾にあるように、chrome のバージョンによってはうまく動作しません。私の chrome(windows7 の バージョン 29.0.1547.76 m)でも動作しませんでした。画面上で SVG 画像は表示されるのですが、ダウンロードは始まらない、という症状です。記載のアドレスから chrome canary(開発版)をインストールしたところ、問題なく動作しました。

chrome canary はインストール済の安定版の chrome とは別にインストールされるため、安定板と共存が可能です。インストール後ちょっと間を置いて、安定版 chrome と環境(ブックマーク等)が同期されます。

SVGをPNGに変換する


原文: mbostock’s block #646603 – 著: Mike Bostock (2013年9月24日) | 訳:H.Sakai (2013年9月25日)

ブラウザ上で D3 を使って動的に生成した SVG を、SVGに対応していない旧ブラウザのためのフォールバック(代替物)用に静的な PNG として保存したいとする。こうした目的のためには他にも多数のレンダー用ツールがある。たとえば BatikPhantomJS などだ。

しかしこの処理をブラウザ上で行い、しかもその静的な PNG と動的な SVG を、透明度まで含めてサブピクセルまで正確に一致させたいとすればどうすればよいだろうか?

以下にその方法を述べる。

1. SVGとして保管

SVG をファイルとして保管するには、SVG Crawbar ブックマークレット(※1)を使う。適切に保管できたかどうか確かめるには、その SVG ファイルをブラウザで開いてみよう。

SVG Crawbar(※2) は通常ページ内で使われているスタイルシートをきちんと反映しているはずだが、場合によっては手作業でスタイルシートを修正する必要がある。たとえば font-family の “sans-serif” は、ブラウザ上の SVG では表示できていても、保管した SVG 画像ではうまく表示されない。この場合には、”Helvetica” や “Arial”等、明示的にフォント名を指定する必要がある。

2. SVGをPNGに変換する

次に下記のコードの html ファイルを作り、”fallback.html” という名前で保管する。

<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="640" height="3250"></canvas>
<script>
var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");

var image = new Image;
image.src = "fallback.svg";
image.onload = function() {
    context.drawImage(image, 0, 0);

    var a = document.createElement("a");
    a.download = "fallback.png";
    a.href = canvas.toDataURL("image/png");
    a.click();
};
</script>

ローカルの webサーバを起動し、この fallback.html を開いてみよう。python の場合(※3):

python -m SimpleHTTPServer 8008

最後に、ブラウザのURL欄に http://localhost:8008/fallback.html と入れる。これで自動的に変換された fallback.png のダウンロードが始まるはずだ(※4)。

註:使っているブラウザが Chrome や Safari の場合、Chrome Canaryが必要になるかもしれない。最近修正されたばかりの Webkit のバグのためだ。


訳注

  • ※1 SVG Crawbar のインストールは簡単です。リンクページを開き、中ほどの”SVG Crawbar”のマーク(下記)をブラウザのブックマークバーにドラッグするだけです。
  • ※2 GitHub の svg-crowbarNYTimes(ニューヨークタイムズ)アカウントのプロジェクトです。御存じの通り著者の Mike Bostock 氏はニューヨークタイムズの web 版開発にも関与しており、SVG Crowbar も(おそらく)Mike 氏の手によるものでしょう。
  • ※3 もちろん webサーバは apache でも XAMPP でも何でもかまいません。あるいはローカルサーバでなく、web上のサーバに置いてもかまいません。D3 コミュニティでは、上記のように python の簡易サーバがよく使われます。これを使うにはもちろん python がインストールされている必要があります。
  • ※4 サーバ経由ではなく、直接 htmlファイルを開いた場合(エクスプローラ上の fallback.html をクリックしたような場合)、画面上で fallback.svg は表示されてもダウンロードは始まりません。ブラウザのセキュリティポリシーのためです。



コメントを残す


6 + = 七