svg2cssはPython製のオープンソース・ソフトウェア（MIT License）です。

SVGのベクター画像はもっと使われるべきだと思うのですが、レガシーなブラウザでは表示ができないのが躊躇させてしまう要因です。そこで試してみたいのがSVGをCSSで表現してしまうsvg2cssです。

[](http://images.moongift.jp/2013/06/Screenshot 2013-06-04 11.33.17.1370343723.png)
使い方は簡単で、ターミナルでSVG画像を指定する程度です。

[](http://images.moongift.jp/2013/06/Screenshot 2013-06-04 11.31.31.1370343726.png)
元のSVG画像です。半透明の部分があります。

[](http://images.moongift.jp/2013/06/Screenshot 2013-06-04 11.32.43.1370343730.png)
こちらがHTML化されたものです。再現性はとても高いです。

[](http://images.moongift.jp/2013/06/Screenshot 2013-06-04 11.32.54.1370343734.png)
ソースを見るとCSSのスタイルが数多く出力されているのが分かります。

[](http://images.moongift.jp/2013/06/Screenshot 2013-06-04 11.33.21.1370343739.png)
日本語のテスト。ばっちり出力されています。

[](http://images.moongift.jp/2013/06/Screenshot 2013-06-04 11.33.34.1370343743.png)
ぼかしを加えた版もあります。こちらも問題なさそうです。

[](http://images.moongift.jp/2013/06/Screenshot 2013-06-04 11.33.55.1370343747.png)
複数のデータをスライド式にしたSVGのテストです。左右をクリックして切り替えられます。

[](http://images.moongift.jp/2013/06/Screenshot 2013-06-04 11.34.05.1370343750.png)
こんな感じです。

[](http://images.moongift.jp/2013/06/Screenshot 2013-06-04 11.37.33.1370343754.png)
画像のテスト。画像の形を変えたり、一部だけを表示したりする事もできます。画像は別ファイルのものを読み込みます。

元々の目的としてはInkscapeのプラグインであり、作成したドローをSVGを介してHTML化するためのソフトウェアになります。なおsvg2cssではHTMLソース中にスタイルを埋め込む事も、別ファイルとして書き出す事もできます。

MOONGIFTはこう見る

何か新しい技術が出てくるたびに問題視されるのがレガシーなソフトウェアへの対応です。HTML5については変更の幅が大きいために特に顕著になっています。IE10以降でしかまともにHTML5が使えないIEのシェアが大きい状況下では今しばらく問題視されるでしょう。

しかしだからこそ最新の技術をレガシーなブラウザで使うための技術に目が向けられます。最もシンプルなのはFlashでの拡張かも知れません。他にもJavaScriptを駆使する事でできるようになる技術もあるでしょう。

shogo82148/svg2css · GitHub