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

メディア - SVGの記事一覧

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

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

もっと見る

List

  • 2015/05/11

wheelnav.js - 目を引く回転型メニュー

WebのUIは基本的に静的で、アニメーションはそれだけ目を引きます。かといって今は簡単にアニメーションが実装できるようになっていますので、ほんの少し揺れた程度ではスルーされてしまうでしょう。そこでwheelnav.js

List

  • 2015/03/29

Textures.js - SVGをパターンで塗りつぶし

SVGはWeb上でベクターグラフィックを表現するのに適した手法です。Flashのように外部プラグインはいらないですし、拡大/縮小しても綺麗なのでどんなデバイスの画面サイズにも対応できます。そんなSVGの表現力をあげるのに適したライブラリがTextures.jsです。多数のパターンを使って塗りつぶし処理を行います。## ...

List

  • 2015/02/23

canvg.js – SVGをパースしてCanvas上に描画

HTML5になってから新しく出てきたグラフィックス要素にSVGとCanvasがあります。Canvasはバイナリとして生成され、SVGはベクターデータでありその使い分けはできるでしょう。しかし逆にSVGデータをCanvas内に描画したい時もあるはずです。そこで使ってみたいのがcanvg.jsです。SVGデータをパースし、...

List

  • 2015/01/21

Orthogami - 組み立てられる立体ドット絵を生成

Minecraftに代表されるボクセル(Voxel)は8bitゲームの時代を彷彿とさせるデザインで人気があります。ペーパークラフトも幾つかあり、作ってみた経験がある方も多いのではないでしょうか。そんなVoxelモデルを実際に印刷して組み立てられる模型に展開してくれるのがOrthogamiです。好きなモデルを作ってみると...

List

  • 2015/01/13

東京鉄道路線図 - 持っておくと便利な鉄道路線図

首都圏は電車の交通網が発展しているので、移動であれば車よりも電車を使った方が確実に移動できます。それだけにどの電車がどう他の路線と交わっているのかを把握するのは大切です。そこで使えるのが路線図です。地下鉄だけ、JRだけといった路線図はあったのですが、東京鉄道路線図は網羅的に、かつPublic Domainで公開された路...

List

  • 2014/12/31

Evil Icons – すっきりしたデザインのSVGアイコン集

Web Fontが人気です。フォントを読み込めばかなり昔のブラウザであってもカスタムフォントが利用できます(IEにおいてはIE4から使えます)。難点としては作り手のスキルが必要ということでしょうか。もう少し手軽に画像ではないアイコンを使いたければSVGを使ってみるのはいかがでしょう。今回はその一つEvil Iconsを...

List

  • 2014/12/12

SVG Morpheus - SVGアイコンの切り替えをアニメーション化

SVGの良いところは画像と異なりバイナリではないので解析すれば様々な利用法が考えられる点にあります。単純にブラウザ任せに描画するだけでは勿体ないでしょう。ぜひその構造を読み取って、SVGならではの面白さを考えてみましょう。今回はその一つ、SVG Morpheusを紹介します。SVGアイコンから別なアイコンへのモーフィン...

List

  • 2014/11/27

vivus - SVGを解析してアニメーション表示

SVGはベクターベースのドローなので、どれだけ拡大しても綺麗に表示されます。レスポンシブや高解像度化するスマートフォン対応を考えれば画像よりもSVGのがメリットがあると言えるでしょう。もう一つのメリットとしてJavaScriptから操作するのが容易と言うことがあります。今回はその仕組みを使ったSVGアニメーションライブ...

List

  • 2014/11/23

Walkway.js – SVGコンテンツを取得して自動アニメーション

HTML5が正式勧告になり、SVGの利用も今後ますます広がっていくものと思われます。ベクターベースのドローができるので拡大表示したとしても綺麗に描けるのが特徴です。さらにもう一つ、アニメーションが書けるというのも特徴です。とはいえSVGアニメーションを作るというのはそうそう簡単ではありません。もうちょっとシンプルなアニ...

List

  • 2014/11/08

Page Loading Effects - ページ読み込み中はアニメーションを表示しよう

Webアクセスで最もストレスになるのはページローディングではないかと思います。95年くらいの時は10分待って画像が表示されるなんてのはざらだった訳ですが、今はそんな悠長に待っていられる時代ではありません。画像リソースのみならずページがさくさくと表示されて欲しいものです。もし表示が遅かったとしても解決する手段がない訳では...

List

  • 2014/11/07

Material Icons - マテリアルデザイン向けに作られたGoogle製アイコン集

Googleが提唱しているフラットUIを発展させたデザインがマテリアルデザインです。アイコンを単純化して情報構造を明確にするだけでなく、さらにマウスオーバーやタップ時のアニメーション、色の変化をつけることでシステムがどういう状態にいるかが明確になります。そんなマテリアルデザインにフォーカスして作られたアイコン集がMat...

List

  • 2014/10/21

svgexport – SVGを画像やPDFに変換

HTML5やRetinaディスプレイの登場があって、SVGに注目が集まっています。ベクターベースなので拡大しても綺麗なままで表現できます。しかしWebブラウザでも表示できますが、良いビューワーがなく再利用性が高くないのが現状です。そこで使ってみたいのがsvgexportです。SVGファイルを画像やPDFにエクスポートで...

List

  • 2014/10/14

ユーザのケアレスミスを防止しよう。業務で使えるオープンソース(136)「ローディングアイコン」

今回のテーマはローディングアイコンです。最近はWebアプリケーション化が進んでおり、JavaScript/Ajaxを多用した開発が多くなっています。アプリのように画面遷移しないケースも増えており、スピーディーになっているものの、処理状態がわかりづらくもなっています。そこで使っていきたいのがローディングアイコンをはじめと...

List

  • 2014/08/13

Trianglify – ポリゴンを組み合わせたSVGを生成

デザインして作る画像もいいですが、パラメータを指定してコンピュータ上で自動生成される画像は思いもしなかった出会いが生まれることがあります。特にプログラムと組み合わせれば動かすことも可能です。そこで見てみたいのがTrianglifyです。三角のポリゴンを組み合わせたSVG画像を背景にあてて表示する、幻想的な表示を行うJa...

List

  • 2014/06/29

MagicCircles – サークルを使った多彩な表現を簡単にできるグラフィックスライブラリ

HTMLの世界では主に左から右のテキストと、四角い枠の画像(別な形であっても背景が透明というだけで)で構成されているように見えます。だから角丸であったり、形が異なるものが目を引くようです。MagicCirclesを使うと円を使った多彩な表現が手軽に実現できるようになります。使い方を覚えるとWeb上での表現力が増しそうで...

List

  • 2014/04/11

I ♥ ∆ – 三角形を組み合わせたポリゴン画像を作成!

おお、これは面白い。ポリゴンを組み合わせた画像って格好いいですよね。大小さまざまなポリゴンを組み合わせることで写真やイラストとはまた違った印象を与えます。しかしゼロから作ろうと思うと相当難しいのではないでしょうか。既にある写真やイラストをもとにポリゴン化された画像を作成するソフトウェアがI ♥ ∆です。読み方は恐らくア...

Missing

  • 2014/04/08

Loading… – SVG製のローディングアイコン

ローディングアイコンというとアニメーションGIFで作成するイメージがありますが、それだと背景色の問題であったり、アニメーションをスムーズにしようとコマ割を多くするとサイズが大きくなるといった問題が出ます。そこで使ってみたいのがSVGです。SVGであればベクターなのでサイズを変更しても奇麗なままですし、色を変更したりする...

List

  • Premium_s 2014/04/01

使えるWebサービス・オープンソース(25)「SVG」

今回のテーマはSVGです。ずっと昔から存在はしつつもブラウザで標準サポートされなかったために日の目を見る事がなかったSVGもHTML5でサポートされるようになって徐々に採用ケースが増えてきています。そこで今回はSVGを使ったWebサービス、オープンソース・ソフトウェアを紹介します。まだまだ試験的なところがあるためにオー...

List

  • 2014/03/28

Mac-Slow Clock – Cairo-ClockをSVGにポーティング

Ubuntuのデスクトップで有名なガジェット時計がCairo-Clockです。Mac-Slow氏が開発したガジェットで、デスクトップに時計を配置できます。時計はいつでもすぐに見られると便利なので、デスクトップに配置しておくと役立つでしょう。そんなCairo-ClockをWebベースで再現したのがMac-Slow Clo...

List

  • 2014/03/25

vsd2svg - VisioのファイルをSVGに変換!

これは便利かも!こった図を描こうと思ったらよく使われるのがMicrosoft Visioです。しかし作成側としては良くとも、閲覧する側がソフトウェアが必要なのは面倒です。専用ビューワもありますが、そもそもインストールしたくない人は多いはずです。そこで使ってみたいソフトウェアがvsd2svgです。Visioのファイル、V...