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を駆使する事でできるようになる技術もあるでしょう。
MOONGIFTの関連記事
コメント
