ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

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


使い方は簡単で、ターミナルでSVG画像を指定する程度です。


元のSVG画像です。半透明の部分があります。


こちらがHTML化されたものです。再現性はとても高いです。


ソースを見るとCSSのスタイルが数多く出力されているのが分かります。


日本語のテスト。ばっちり出力されています。


ぼかしを加えた版もあります。こちらも問題なさそうです。


複数のデータをスライド式にしたSVGのテストです。左右をクリックして切り替えられます。


こんな感じです。


画像のテスト。画像の形を変えたり、一部だけを表示したりする事もできます。画像は別ファイルのものを読み込みます。

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


MOONGIFTはこう見る

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

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

shogo82148/svg2css · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2