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

メディア - SVGの記事一覧

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

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

もっと見る

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...

List

  • 2014/03/16

morris.js - SVGで手軽に綺麗なグラフを描くJavaScriptライブラリ

管理画面などに格好いいグラフがあるとテンションがあがりますよね。とは言えグラフを表示するというのは意外と面倒で、ついつい後回しになってしまいがちです。そこで手軽に格好いいグラフを描けるライブラリとしてmorris.jsを紹介します。## morris.jsの使い方morris.jsはまずJavaScript/スタイルシ...

List

  • 2014/02/26

SVG Floorplan Editor - HTML5で実現するフロアマップエディタ

SVGといえばWeb上でベクターベースの描画を可能にしますが、その使い方はまだまだ模索中と言ったところでしょう。画像の代替として使おうと思ってもサポートされているブラウザやその対応負荷が大きくなかなか取り組めないと思います。そこで一案として面白そうなのがWeb上で実際にドロー自体させてしまうというものです。そんなソフト...

List

  • 2013/12/26

iconmelon - 色々使えそうなSVG製アイコン集

アイコンを上手に使うと文字で説明するよりももっと簡単にすぐに機能や意味するところを理解してくれるようになります。最近ではアイコンに使う素材の選択肢が広がっており、PNGやGIFといった画像の他、Web Fontsを選択するケースも増えています。今回はそのどちらでもない、SVGを使ったアイコン集iconmelonを紹介し...

List

  • 2013/11/20

Pizza Pie Charts - レスポンシブで使えるSVGの円グラフ

他のグラフにも対応して欲しい!円グラフは複数の情報がどれくらいのシェアを占めているのかを表すのに向いています。そんな円グラフをWeb上で手軽に扱えるようにしたJavaScriptライブラリがPizza Pie Chartsです。さらに円グラフはSVGで作られており、Retinaなどの高画質ディスプレイやもちろんスマート...

List

  • 2013/11/08

jQuery Mapael – jQuery x Raphaëlな地図描画ライブラリ

JavaScriptと連携できる地図が欲しかった方は要チェック!Web上でSVGを扱う際に使われるライブラリで有名なのがRaphaël;```といった感じに呼び出すだけです。とても手軽ですね。Alternative contentというコンテンツがある通り、クローラーやJavaScript非対応の場合は別なコンテンツを...

List

  • 2013/11/07

Animated SVG Icons - Snap.svgを使ったアニメーションするアイコン

これは覚えておくと良さそうですよ!スタイルシートやJavaScriptを使ってマウスオーバーで画像を差し替えたりする操作は良くありますが、その発展版とも言えるのがAnimated SVG Iconsです。SVGを使ったアイコンをクリックやマウスオーバー時にアニメーションしながら表示変更してくれるライブラリです。画像だと...

List

  • 2013/10/31

Snap.svg – アニメーションもサポートしたJavaScript連携可能なSVGライブラリ

HTML5の時代になってSVGにも注目が集まっていますが、個人的に思うのはAdobeはその何年も前からSVGに取り組んでいたなということです。IEで使えるSVGプラグインビューワーも早い段階から出していましたし、IllustratorもSVG書き出しを相当前のバージョンからサポートしています。そんな中、Adobeがさら...

List

  • 2013/09/25

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

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