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

メディア - SVGの記事一覧

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

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

もっと見る

List

  • 2019/04/17

Hanzi Writer - 漢字の書き順をアニメーション表示

漢字は基本的な書き順さえ覚えてしまえば大抵のものには対応できますが、時々複雑なものがあったりします。さらに漢字と言っても日本のものだけでなく、中国語もあります。日本人でも中国の漢字の書き順はぱっと見ただけでは分からないかも知れません。そこで使ってみたいのがHanzi Writerです。中国語(日本の漢字も)の書き順を表...

List

  • 2019/03/29

Svgbob Editor - Web上でアスキーダイアログをWYSIWYGで描く

プログラマはドローアプリケーションを扱うのが苦手です(偏見)。メンテナンスするのも面倒ですし、簡単な図であればテキストで罫線を使った方が簡単に書けるでしょう。後は罫線が自動的にドローされれば良いだけです。そこで使ってみたいのがSvgbob Editorです。罫線で描いたアスキーダイアログをSVGに変換してくれるソフトウ...

List

  • 2019/01/25

anime.js - 軽量、多機能なアニメーションライブラリ

Webの表現力が向上しているのを実感できるものの一つにアニメーションが挙げられます。これまではFlashであったりJavaScriptで無理矢理DOMを動かしていましたが、CSS3やSVGによってスムーズなアニメーションが実現できています。とは言え、アニメーションを作るのは大変です。今回は軽量なアニメーションライブラリ...

List

  • 2019/01/06

Path Slider - SVGをJavaScriptでアニメーション

SVGの良いところはベクターベースなので縮小、または拡大しても綺麗なまま表現できること、そして一般的に画像よりも軽量ということです。さらにJavaScriptとの親和性も高いのが開発者にとって嬉しいことです。とはいえ、SVGに対して高度な操作を行うのは大変です。すでにある、例えば今回紹介するPath Sliderのよう...

List

  • 2018/11/29

termtosvg - ターミナル操作を記録してSVG化

サーバのセットアップやソフトウェアのインストール時にはターミナルの操作を記録しておきたいと思うものです。それによって後で振り返ることができたり、問題があった時に気付けるようになります。ターミナル操作を記録するソフトウェアは幾つかありますが、特にWebとの親和性が高そうなのがtermtosvgです。なぜなら生成されるファ...

List

  • 2018/11/24

graph-cli - CSVから画像ファイルを生成

資料でグラフを使うことで数値の羅列から視覚に訴えられるようになります。多くの場合、表計算ソフトウェアを使ってグラフを作りますが、アップデートする度に作成し直したり画像化するのが面倒です。そこで使ってみたいのがgraph-cliです。CLIでCSVデータをグラフ化します。## graph-cliの使い方Sinの値をCSV...

List

  • 2018/11/21

Clarity - 多彩な種類が用意されたアイコンセット

Webサイトやスマートフォンアプリにおいてアイコンはとても重要です。全体として統一されていることでユーザが迷いなく操作できるようになります。最近のフラットで単色系のアイコンでは使われるシンボルが共通化されつつありますが、それでも多彩な種類に対応していないと、ぴたりと当てはまる使い方ができません。今回紹介するClarit...

List

  • 2018/11/19

Eva icons - 480種類以上の綺麗なアイコン集

アイコンはWebサイトやアプリなどの使い勝手を決定づける重要な存在です。統一されたアイコンを使っているかどうかは大きな問題であり、そのためにも多数のパターンに対応したアイコン集の利用が求められます。今回は480種類を越えるアイコンを収録したEva iconsを紹介します。## Eva iconsの使い方PNG版を紹介し...

List

  • 2018/09/11

3D Builder - SVGで3Dを描く

HTML5以降、APIがどんどん拡張されており、Webにおける表現力が増しています。支える技術として知られているのがSVGとCanvasでしょう。これらは2Dグラフィックスを描画するのに使われることが多いです。そんな中、登場したのが3D Builderです。なんとSVGで3Dを描くためのライブラリです。## 3D Bu...

List

  • 2018/08/12

Badgen - 各種サービスに対応したバッジを表示

GitHubのREADMEを見ると、様々なバッジが表示されています。バージョンいくつかコンパイル通った、テストが通過したといった情報であったり、ライブラリのバージョンを明記したりもします。そんなバッジを柔軟に生成できるのがBadgenです。SVG製なので軽量です。## Badgenの使い方デモです。横幅の広いバッジも作...

List

  • 2018/07/23

termtosvg - ターミナルの操作を記録してSVGアニメーション化

CLIのソフトウェアなどのインストール記事を書く際、ターミナルの入力を残しておくと便利です。社内でドキュメントにする際にも良いでしょう。しかし、出力を適宜コピー&ペーストするのは非常に面倒です。そこで使ってみたいのがtermtosvgです。ターミナル出力を記録し、SVGアニメーションにしてくれます。## termtos...

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