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

メディア - SVGの記事一覧

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

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

もっと見る

List

  • 2017/03/23

Shape Shifter - 異なるSVGに変化するアニメーションを生成

SVGとこれまでの画像バイナリと決定的に違う部分はなんと言ってもプログラムから操作しやすいということでしょう。アニメーションの定義などはSVG内でもできますが、より詳細なアニメーションはJavaScriptで制御できます。そんなSVGを使って形状変化するアニメーションを定義できるのがShape Shifterです。##...

List

  • 2017/03/20

zPath.js - SVGをアニメーションしながら描画

SVGの良いところはベクターベースのデータである点と、内容がXMLなのでプログラマブルに操作可能ということです。バイナリデータと異なり、一部だけを描画したり色を変えると言ったことも簡単にできます。そこで使ってみたいのがzPath.jsです。SVGを読み込んでアニメーションしながら描画してくれます。## zPath.js...

List

  • 2017/03/17

Export Tool for Vector Tiles to SVG - タイルデータを一つのSVGに統合

SVGはディスプレイの高画質化が進んでいく中で、バイナリに変わる画像フォーマットとして有力です。JavaScriptで動的に書き換えたり、拡大や縮小にも強い作りとなっています。今後ますます広がっていくことでしょう。そうした中面白そうなのがExport Tool for Vector Tiles to SVGです。地図デ...

None

  • Premium_s 2017/03/10

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

今回のテーマはSVGです。スマートフォンやノートPCなどがどんどん高画質化する中で、画像などのバイナリファイルがどんどん肥大化しています。今後、ますます高画質化していくとバイナリファイルでは限界が出てくるでしょう。そこで注目したいのがSVGです。ベクターベースのファイルフォーマットで、XMLで記述されています。今回は関...

List

  • 2017/02/12

svg2png - SVGファイルをPNGに変換

最近、画像の代わりにSVGを使っているサイトが増えてきました。それは良いことなのですが、まだまだ対応していないソフトウェアも多く、使い回す際に若干の不便があります。そんな時はWebブラウザでSVGを表示して、それのスクリーンショットを取るなんて面倒なことをしたりします。今回紹介するオープンソース・ソフトウェアはsvg2...

List

  • 2016/12/10

Koto - D3.jsを使ったグラフライブラリ

D3.jsと言えばデータのビジュアライズを行うJavaScriptライブラリです。多彩なグラフィックスを描けますが、高度な機能だけに使いこなすのも難しいという印象があります。そこで今回はKotoを紹介します。D3.jsをベースに、グラフを描くライブラリです。## Kotoの使い方Kotoのデモグラフです。!

List

  • 2016/11/26

Hotdraw.js - JavaのHotdrawをJavaScriptにポーティング

Javaはサーバサイドだけでなく、デスクトップ開発でも利用できます。速度面などに難があって利用は伸びませんが、かつては多くのデスクトップソフトウェアがJavaで作られていました。そんなJavaには多くの先進的試みがありました。JHotDrawというJavaによる2Dドロー技術もその一つで、今回紹介するHotdraw.j...

List

  • 2016/11/05

svgcleaner - SVGファイルのサイズ軽減

画面の高画質化に伴って注目されているのがSVGです。ベクターベースなので拡大縮小に左右されることなく綺麗に表示できます。今後、画像サイズが上がれば上がるほど、ニーズが高くなっていくと思われます。そんなSVGですが、余計な情報が多いとサイズが肥大化してしまいます。そこで使ってみたいのがsvgcleanerです。## sv...

List

  • 2016/09/20

Odoo - SVGを使ったオドメーター

大きな数字の目標を達成した時、イベントの賞金を表示する際に使われるのがオドメーターを使ったカウントアップの表示です。数字がくるくると回転して100万、1,000万などの数字になるエフェクトは誰もが見たことがあるでしょう。そんな表示をWeb上で実現できるのがOdooです。SVGで作られており、軽快に動作します。## Od...

List

  • 2016/08/23

Goat - アスキーアートをSVGに変換

アスキーアートと画像は切り離せない関係にあります。面白い写真が誰かの手によってアスキーアート化されたり、逆にアスキーアートのキャラクターがイラスト化されたりします。それぞれに良さがあります。今回はアスキーアートをSVGに展開するGoatを紹介します。テキストで作った作品が滑らかな直線、曲線で描かれるのは面白いです。##...

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

List

  • 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ですぐに使いこなせるドローアプリで...