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

メディア - SVGの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2013/09/25

Web上で動く格好いい時計「Wrist」

WristはCSS3/SVG製のオープンソース・ソフトウェア(MIT License)です。あるテーマを決めて、それに対してみんなでデザインを出し合って共有するというのは面白い試みです。今回はその一例として時計デザインを共有するWristを紹介します。シンプルで良いですね。短針が実は穴になっていて、奥の時間が見えるとい...

List

  • 2013/06/13

SVGをCSSを使ってHTMLで表現「svg2css」

svg2cssはPython製のオープンソース・ソフトウェア(MIT License)です。SVGのベクター画像はもっと使われるべきだと思うのですが、レガシーなブラウザでは表示ができないのが躊躇させてしまう要因です。そこで試してみたいのがSVGをCSSで表現してしまうsvg2cssです。使い方は簡単で、ターミナルでSV...

List

  • 2013/03/21

SVGをもっと活用するために使いたい「svg.js」

svg.jsはアニメーションやイベント駆動型のSVGを実現するライブラリです。SVGはまだ広く利用されているとは言いがたいですが、ビットマップではなくベクターデータなので拡大してもきれいなど特徴が多数あります。今回紹介するsvg.jsはSVGを使ったアニメーションを実現するライブラリになります。デモです。単純なオブジェ...

List

  • 2013/02/28

SVGを使ってイラスト制作過程をアニメーション化「Lazy Line Painter」

Lazy Line PainterはSVGファイルを読み込んで、描く過程をアニメーションにしてくれるJavaScriptライブラリです。イラストや絵画はアナログな世界ではできあがった作品を見るのみですが、デジタルであればその作成過程を何度も繰り返し楽しめます。そんな面白さが感じられるのがLazy Line Painte...

43534?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f10%2fd67f9044b99ec8da44795edbb2c5ff49

  • 2012/10/19

ローカル/リモートに対応したSVGビューワー「Squiggle」

SquiggleはApache財団の開発しているSVGビューワーです。SVGを閲覧しようと思った場合、Webブラウザを使ったり、Illustratorのようなドローソフトウェアを使う方法があります。今回はSVG専用のブラウザSquiggleを紹介します。例です。アニメーションも再生できます。Squiggleはローカルの...

List

  • 2012/08/27

拡大しても奇麗!SVGで作られたアイコン集「Drawic」

DrawicはSVGで作られたソーシャルサービス系アイコン集です。新しいMacBook ProやiPad、iPhoneなどから導入が進んでいるRetina Display。これまでにないほど、奇麗な描画が特徴ですが、それによって画像などの粗さが目立つようになってしまいました。それを回避するには画像ではなくベクターを使う...

List

  • 2012/08/05

FlashファイルからシェイプをSVGとして抜き出す「SWF2SVG」

AndroidもFlashをサポートしなくなると発表されて以降、既存のFlashコンテンツを活かす道が模索されるようになっています。今回紹介するSWF2SVGもその一つで、SWFファイルからシェイプデータをSVGとして抜き出してくれるソフトウェアになります。インストールの確認ダイアログです。Adobe AIRアプリです...

40562?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f07%2fscreenshot-2012-07-03-13.15.34_thumb

  • 2012/07/15

SVGを用いたリサイズ対応の地図「jQuery Vector Maps」

jQuery Vector MapsはSVGで描かれた地図です。JavaScriptとの親和性が高いです。HTML5から標準に取り入れられた技術の一つにSVGがあります。IllustratorなどもSVGで出力できますが、まだまだ利用範囲は広くありません。そこでSVGを使ったデモとしてjQuery Vector Map...

37800?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f04%2fscreenshot-2012-04-10-15.36.22_thumb

  • 2012/04/22

スパークラインに対応したJavaScript製のグラフライブラリ「Grafico」

GraficoはJavaScriptによるグラフライブラリです。棒、折れ線、スパークラインがサポートされています。Web上でグラフを描くライブラリも充実してきています。Flash、画像など様々な選択肢がありますが今回はGrafico、JavaScriptベースのグラフライブラリを紹介します。サンプルです。まず棒グラフ。...

List

  • 2012/01/30

SVGはもっと面白くなる。プログラマブルSVGツール「IScrIptDesIgn」

IScrIptDesIgnはプログラミングを組み合わせたSVG作成ツールです。SVGエディタと言えばInkscapeやIllustratorのようなドロー系ソフトウェアが多いですが、IScrIptDesIgnはそうしたソフトウェアに反対してプログラマブルなSVG作成ツールを目指しています。最初の画面です。奇麗な筆記体で...

32838?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f12%2fscreenshot2011-12-06-16.47.01_thumb

  • 2011/12/13

IE6から使えるSVG/VMLを使った高機能JavaScriptグラフライブラリ「Highcharts」

HighchartsはSVG/VMLを使って描画するJavaScript製のグラフライブラリです。Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基本として多様なWebブラウザに対応したグラフライブラリ...

31758?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f11%2fscreenshot2011-11-11-17.45.07_thumb

  • 2011/11/17

スマートフォンにも使える。SVGでグラフを描画するPythonライブラリ「svgplotlib」

svgplotlibはSVGで各種グラフを描画するPythonライブラリです。Webシステムを作っていて悩みどころになりやすいのがグラフ表示です。もし利用言語がPythonで、スマートフォンへの対応も考えないといけない時にはSVGでグラフを描画するsvgplotlibが良い選択肢になるかも知れません。グラフの例です。上...

List

  • 2011/10/03

小さなアイコン画像のSVG化に「pixel2svg」

pixel2svgは画像をSVGへ変換するPythonスクリプトです。pixel2svgはその名の通り、ピクセル画像をSVGファイルへ変換できるソフトウェアです。Pythonスクリプトで、ターミナルベースで動作します。処理を実行した所。解析処理が開始されます。対応している画像はPNG、JPEGの他PIL(Python ...

28104?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f07%2fscreenshot2011-07-08-11.58.11_thumb

  • 2011/07/20

TwitterのタイムラインをSVGに変換する「Tatami」

TatamiはTwitterのタイムラインをSVGで描くアートソフトウェア。TatamiはRuby/Sinatra製のフリーウェア(ソースコードは公開されている)。デジタルで作成した作品も評価されるようになっている。コンピュータを使って音楽をリミックスしたり、数式で芸術的な絵を描いたりもできる。フラクタル画像などは手で...

27259?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f05%2fscreenshot2011-05-30-11.06.52_thumb

  • 2011/06/10

トランプゲームを作りたくなる。SVGで書かれたトランプ「SVG-cards」

SVG-cardsはトランプをSVGでデザインしたソフトウェア。SVG-cardsはSVG製のオープンソース・ソフトウェア。コンピュータ上でできるゲームを考えたとき、誰でも簡単にできて分かりやすいのがトランプではないだろうか。古今東西、誰もが知っているし、できる遊びも多数ある。Windowsではソリティアはとても人気の...

None

  • 2011/05/24

iPhoneで使えるシンプルなSVGレンダリングエンジン「SVGQuartzRenderer」

SVGQuartzRendererはiPhone/Mac OSXで使えるシンプルなSVGレンダリングエンジン。SVGQuartzRendererはiPhone、Mac OSX用のオープンソース・ソフトウェア。画像は手軽に扱える反面、ベクターデータではないために拡大すると奇麗に表示されない。その点SVGであればどれだけ拡...

25771?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f02%2fscreenshot2011-02-28-16.12.01_thumb

  • 2011/03/10

ぜひ触れてほしい。WebベースのSVGエディター「Js Vector Editor」

Js Vector EditorはWebベースのSVGエディター。保存はできないがXMLを出力する。Js Vector EditorはJavaScript製のオープンソース・ソフトウェア。HTML5の登場によってようやく普及しそうなのがSVGだ。XMLのベクターフォーマットだ。テキストベースなのでシステムとの相性も良く...