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

メディア - SVGの記事一覧

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

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

もっと見る

List

  • 2017/07/10

kingraph - 家系図/組織図ジェネレータ

組織図であったり、家系図といった図を描こうと思ったらどんなツールを使っているでしょうか。ドローツールも使えますが、編集したりするのが面倒だったりします。Excel職人の方はやはりExcelを駆使して作り上げてしまうかも知れません。今回はWebベースで使える家系図を作れるkingraphを紹介します。## kingrap...

List

  • 2017/06/20

Feather - SVG製のシンプルなアイコン集

Webサービスやスマートフォンアプリでどういったアイコンを使うかで全体の印象が大きく変わります。フラットデザインやマテリアルデザインのトレンドの中ではシンプルでラインだけで表現されたものが好まれています。今回紹介するFeatherはその流れを受けた、シンプルなアイコンになります。## Featherの使い方一覧です。基...

List

  • 2017/06/14

png2svg - PNGをSVGに変換

SVGもドロー系フォーマットとして一般的になりつつあります。モダンなWebブラウザは表示に対応していますし、JavaScriptと組み合わせればFlash風なインタラクティブ性を持ったコンテンツも作成できます。そんな中紹介したいのが画像をSVGに変換するというpng2svgです。## png2svgの使い方png2sv...

List

  • 2017/06/11

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

READMEなどテキストファイルには罫線を駆使したアスキーアートが載ることが多々あります。一度だけであれば良いのですが、メンテナンスもしづらいですし、見やすいものではありません。しかし技術者としてはドローソフトウェアでいちいち描いたりするのも面倒です。そこで使ってみたいのがsvgbobです。## svgbobの使い方一...

List

  • 2017/04/30

Mondrian - WebベースのリッチなSVGエディタ

Web上でドローをしようとした場合、取り得る選択肢はSVGかCanvasになります。Canvasは埋め込まれるコンテンツがバイナリになってしまいますが、SVGであればテキストベースなのが利点になるでしょう。そんなSVGコンテンツをWebベースで作成できるのがMondrianになります。## Mondrianの使い方デモ...

List

  • 2017/04/05

Contour - 多彩な種類に対応したWeb用グラフライブラリ

Webシステムを開発していてよく求められるのがグラフです。すでに多数のグラフライブラリがありますが、グラフの種類が物足りなかったり、使い勝手が良くない、デフォルトで生成されるグラフが作っているシステムに合わないなど様々な問題があります。そのため、まず多数のグラフライブラリを知っておくのが大切です。その中からニーズにあっ...

List

  • 2017/03/25

macSVG - macOS用のSVGエディタ

SVGがいくらテキストベースだといっても、手入力で作成しようと考える人はまずいないでしょう。専用のドローソフトウェアがなかったらとても作ることはできません。かといってその手のソフトウェアは効果なのが常です。そこで使ってみたいのがmacSVGです。GUIで簡単にSVGコンテンツが作成できます。## macSVGの使い方新...

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のズームイン/アウトを実現するためのライブラリ...