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

メディア - SVGの記事一覧

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

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

もっと見る

List

  • 2018/07/20

AstroChart - SVGによる占星術用チャート生成

チャートは実に多彩に存在します。ガントチャートや組織図のようなビジネス向きのものもあれば、地図や路線図と合わせるものなど様々です。何かの情報を分かりやすく伝えるためにはチャートによる可視化が有効です。今回は特殊なチャートを描くAstroChartを紹介します。なんと占星術用のチャートを描くライブラリです。## Astr...

List

  • 2018/06/28

letter-icon-generator - SVG/画像で一文字のアイコンを生成

最近、プロフィールアイコンを設定していないアカウントは頭文字だけを表示するといったアイコンが増えています。Slackでもデフォルトではチャットの頭文字だけが表示されます。そういったアイコンを生成してくれるのがletter-icon-generatorです。## letter-icon-generatorの使い方lett...

List

  • 2018/06/20

Bowlcu - SVGテキストを自在に変化

SVGの面白いところはバイナリデータではないので、JavaScriptから簡単に操作できるところです。時間によって移動させたり、形を変えることもできます。もちろんクリックなどのイベント処理とも連携できます。今回紹介するBowlcutはSVGのテキストを面白く表示できるライブラリです。## Bowlcutの使い方例です。...

List

  • 2018/06/02

logo.svg - テキストとフォントからSVGを生成

スマートフォンやタブレットによって高解像度なディスプレイが普及しています。そのため、画像などのバイナリのファイルは高解像度向けにサイズの大きなファイルを用意せざるを得ず、ネットワークの負荷増大につながっています。そこで使ってみたいのがlogo.svgです。テキストベースの簡易的なロゴをSVGで生成してくれます。## l...

List

  • 2018/05/27

Canvas2Svg - Canvasの内容をSVG化

Canvas機能によってWeb上の表現力は格段に上がりました。同様にSVGも表現力を高めるのに役立っています。しかしCanvasはバイナリ、SVGはベクターと相容れない存在になっています。この二つを結びつけられるライブラリがCanvas2Svgです。Canvasの内容をSVGとして出力できます。## Canvas2Sv...

List

  • 2018/05/14

text2svg - 任意のフォント/テキストをSVG化

コピーされたくない文字があった時、これまでは画像化するのが一般的でした。しかしデバイスの解像度によっては汚く見えてしまったり、変更が面倒と言った欠点があります。そこで使ってみたいのがtext2svgです。任意のフォント、テキストでSVGが生成できます。## text2svgの使い方生成した例です。インスペクタで見ると、...

List

  • 2018/03/29

Kauntah SVG - 萌え系カウンター

かつて、Webサイトを訪れるとカウンターが付いているのが当たり前でした。訪問する度に数字が繰り上がるのですが、最初は自分しか訪問せず、ひたすらリロードを繰り返した経験もあるのではないでしょうか。そんなカウンターを現代風に蘇らせたのがKauntah SVGです。数字を出すだけの味気ないカウンターではないので設置してみたく...

List

  • 2018/03/27

Coördinator - SVGの描き方を自由にカスタマイズ

SVGを使う面白さはベクターベースであるために一回描いた図形をカスタマイズしやすいということです。さらにカスタマイズするのもXMLを直に編集するのではなく、プログラムからできるのが利点です。今回紹介するCoördinatorは音楽サービスで知られるSpotifyが開発したSVGカスタマイズツールです。## Coördi...

List

  • 2017/12/19

Spritebot - SVGを最適化してサイズをより小さく

SVGファイルはベクターデータなので画像サイズによってはPNGやJPEGに比べて小さなサイズで表現できます。特に高解像度になればなるほどSVGのがサイズが小さくなります(SVGは画像サイズは関係がないので)。そんなSVGですが、まだまだムダがあります。それらを削り取るのがSpritebotです。## Spritebot...

List

  • 2017/11/18

Frappe Charts - GitHub風グラフもあるSVGグラフライブラリ

WebはSVG/CanvasによってWeb標準だけで高度な表現が実現できるようになりました。しかし、それを使いこなすのは大変で、多くの場合ライブラリを使って実現しているでしょう。今回紹介するFrappe ChartsはSVGを使ってグラフ表示を行うライブラリです。## Frappe Chartsの使い方棒グラフ。マウス...

List

  • 2017/11/09

KanjiVG - 漢字/平仮名/カタカナ/アルファベット/数字の書き順付きSVG集

コツコツと続けるのは大変ですが大事なことです。ソフトウェアはコードという中身で見れば同じようなものですが、結果として異なる動きがあるので楽しいでしょう。しかしあまり変化の多くないものを作り続けるのは根気が必要です。今回は日本語の漢字をSVG化したKanjiVGを紹介します。しかも書き順付きです。## KanjiVGの使...

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