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

メディア - SVGの記事一覧

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

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

もっと見る

List

  • 2016/08/19

pcb-stackup - Arduino Uno/8bit Mixtapeなどの電子回路図を生成

IoTの熱が高まっており、個人でもガジェット開発を楽しめるようになってきました。そうした過程をブログにアップしている人も多いでしょう。そんな時に配線図などを書きたくなるのですが、良い書き方があまりありません。回路図を描く際のベースになりそうなのがpcb-stackupです。SVGで綺麗なマイコンボードを出力してくれます...

List

  • 2016/06/16

Yarrow - アニメーションする矢印をSVGで作成

SVGコンテンツの面白いところとして、Flashのようなアニメーションもサポートしていると言うことです。コンテンツを徐々に描いていくようにすれば良いだけなのですが、手作業で実現するのは無理があるでしょう。そこで使ってみたいのがYarrowです。HTMLのプレゼンなどと組み合わせると効果的かも知れません。## Yarro...

List

  • 2016/06/16

SVG panzoom - SVGのズームイン/アウト機能を提供

Web上でSVGが多く使われるようになってきました。SVGの利点の一つに挙げられるのが、ベクターなので拡大しても綺麗ということです。拡大や縮小するというのは、情報の粒度を自分で変更したいという時に便利です。そこで紹介したいのがSVG panzoomです。その名の通り、SVGのズームイン/アウトを実現するためのライブラリ...

List

  • 2016/04/19

uiflow - Markdown風の記法でUI Flowを記述

UI FlowはBasecamp(旧37 signals)が考えた画面遷移手法で、ユーザの見るもの/することという点に主眼を置いて描かれるのが特徴です。ムダを省いた作りなので、メンテナンスしやすく、かつ分かりやすいという利点があります。とは言え、画面遷移図は徐々にメンテナンスされていかなくなるものです。原因としては、バ...

List

  • 2016/03/25

Legofy - 画像をレゴ風に変換

画像を変換するソフトウェアはたくさん存在します。そのためには元の画像を認識した上で、情報を置き換える必要があります。問題はその画像の解析部分と、どういった情報に置き換えるかです。今回はLegofyというソフトウェアを紹介します。あなたの好きな画像をレゴ風にしてくれます。## Legofyの使い方サンプルです。実際には一...

List

  • 2016/02/11

SVGnest - 工作加工に。一つの部材から効率的に部品を切り出す

最近、IoTもあって工作が流行っています。3Dプリンタもありますが、CNC旋盤のように予めコンピューティングした上で加工してくれる機械もあります。そこで大事になるのが素材の切り出し法です。同じ部材からでも切り出す部品を上手に隙間なく並べることで無駄なく取り出せるようになります。そのための計算を行ってくれるのがSVGne...

50391?type=list&url=http%3a%2f%2fimages.moongift.jp%2f2014%2f01%2fscreenshot%25202014-01-26%252022.15.32_thumb.94019c1ffda2d3840c44c573aac1db1d

  • Premium_s 2016/01/28

業務で使えるオープンソース(175)「SVG」

今回のテーマはSVGです。ずっと昔から存在はしつつもブラウザで標準サポートされなかったために日の目を見る事がなかったSVGもHTML5でサポートされるようになって徐々に採用ケースが増えてきています。そこで今回はSVGの良さと関連オープンソース・ソフトウェアを紹介します。## 拡大、縮小しても綺麗最近はRetinaをはじ...

List

  • 2015/11/20

jQuery DrawSVG - SVGをアニメーションしながら描画

画面の解像度が高まるのに合わせて注目を集めているのがSVGです。これまでのバイナリと異なり、SVGはXMLベースのテキストデータなので縮小、拡大しても綺麗なままです。そしてテキストデータということは、その書き方もデータがすべて読み取れるということです。そこで作られたのがjQuery DrawSVGになります。## jQ...

List

  • 2015/10/05

flowchart.js - SVGのフローチャートを生成するJavaScriptライブラリ

システムやワークフローを分かりやすく説明する際にフローチャートを使うことがあります。特に業務システムなど、多数のシステムが複雑に組み合わさって処理が実行される場合、きちんと可視化されているかどうかで結果が大きく変わる可能性があります。Excelで仕様書を書いているとExcel上で完結しそうです。しかしこれでは検索性やメ...

List

  • 2015/09/10

Curve App - 手軽に使えるSVGでドローアプリ

ベジュ曲線などを使ったドローイングをやろうと思うとIllustratorやInkscapeのような特別なソフトウェアを使わないといけない気がしてしまいます。それこそ覚えるのに何日もかかるでしょう。そこで使ってみたいのがCurve Appです。機能は決して多くありませんが、シンプルなUIですぐに使いこなせるドローアプリで...

List

  • 2015/07/26

Svidget.js – SVGをウィジェット化してもっと使いやすく

SVGはHTML5になって標準化された新しいメディアです。これまでのPNG、JPEG、GIFとは異なり、ベクターベースなので拡大しても綺麗で、かつHTMLの中に埋め込んだりJavaScriptから操作することもできます(画像も埋め込めますが、あれはBase64エンコードした結果です)。そこでSVGをもっと手軽に使えるよ...

List

  • 2015/07/18

SVG PORN - 各種サービスロゴをSVG化

SVGはHTML5になって標準化されているメディアフォーマットですが、まだあまり広く活用はされていません。ただし、現在の高解像度化であったり、幅広い画面幅に対応していこうと考えるとSVGのようなベクター画像はとても大事になっていくでしょう。今回はそんなSVGを使って各種サービス、ソフトウェアのロゴを描いたSVG POR...

List

  • 2015/05/30

Animate Plus - CSS/SVGを用いたアニメーションライブラリ

ユーザビリティを高めるためにちょっとしたアニメーションを組み込むアプリ、サイトが増えています。スプラッシュ的なものではなく、押した時に反応していることを確認したり、処理中である旨を通知するのに使えます。そんなアニメーションを手軽に扱えるライブラリがAnimate Plusです。CSSやSVGを使いつつ、JavaScri...

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アイコンから別なアイコンへのモーフィン...