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

メディア - SVGの記事一覧

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

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

もっと見る

List

  • 2019/08/31

svg2pdf.js - Webブラウザ上でSVGをPDF化

Webブラウザで表示している内容をPDFにしたいというニーズはよくあります。サーバ側でレンダリングして出力するのも良いですが、何かと面倒です。文字だけであればまだしも、画像をドローイングされた内容をPDF化するのはさらに大変です。そこで使ってみたいのがsvg2pdf.jsです。WebブラウザだけでSVGをPDF化します...

List

  • 2019/08/22

SuperTinyIcons - 1KB以下の軽量アイコン集

アイコン集はいくら知っていてもいいものです。多彩なパターンに対応したものもあれば、特定の用途に使えるものもあります。様々なものを知っていれば、役立つ機会が多いにあります。今回紹介するSuperTinyIconsは1KB以下という小さなサイズが特徴なアイコン集となっています。## SuperTinyIconsの使い方ソー...

List

  • 2019/07/03

GraphvizOnline - GraphvizをWebブラウザ上で使う

複雑なチャートを描く際に、ExcelやPowerPointを使っていては、後々の更新コストが大きくなります。そこでお勧めなのがGraphvizです。dotファイルを作れば、チャート化する部分は自動で任せられるようになります。今回紹介するGraphvizOnlineはWeb上でGraphvizを試せるツールです。各自のロ...

List

  • 2019/06/29

OpenMo - どこでも使えるオープンな絵文字

絵文字は様々なサービス、アプリで使われるようになっています。AppleやAndroid、Slack、Facebook、Twitterなどが各社独自の絵文字を作っており、完全に統一されている訳ではありません。また、それらは各サービスのものであり、自由に使える訳ではありません(Twitterの絵文字はオープンソースです)。...

List

  • 2019/06/15

Zdog - SVGやCanvasにドロー

Illustratorなどで描いたキャラクターも、そのままでは単なる絵と変わりません。SVGであれば、JavaScriptを使ってインタラクティブな操作が実現します。そうすれば、画像とは違った楽しみ方が生まれるでしょう。今回紹介するZdogはJavaScriptでイラストを描き、3Dのように回転もできるライブラリです。...

List

  • 2019/06/10

sqleton - SQLiteのデータベース構造をSVGで可視化

データベース設計を定期的に確認することで、全体が分かりづらくなっていないか、不要なカラムが追加されていないかなど健康状態をチェックできます。そんな時、Excelなどではなくビジュアル化されていると分かりやすいでしょう。そこで使ってみたいのがsqletonです。データベース構造をSVGファイルにしてくれます。## sql...

List

  • 2019/06/09

drawgon - Web上でドロー

Web上で絵を描こうと思うとCanvasタグを使って行います。そして、そこに描かれた情報は画像としてダウンロード可能です。しかし、ベクターデータとして(SVGとして)欲しい場合もあるでしょう。そこで使ってみたいのがdrawgonです。Web上で使えるドローイングアプリケーションです。## drawgonの使い方最初にサ...

List

  • 2019/05/12

Ikonate - カスタマイズ重視のSVGアイコン集

SVGの良いところはXMLでベクターベースなのでJavaScriptからカスタマイズしやすいということです。色などはもちろん、表示する向きなども変えられます。拡大、縮小しても綺麗なのも嬉しいポイントです。そんなSVGアイコンとしてIkonateを紹介します。カスタマイズしやすいのが売りのSVGアイコン集です。## Ik...

List

  • 2019/05/05

Reanimate - アニメーションするSVGをプログラマブルに生成

SVGはXMLベースのドローフォーマットで、JavaScriptや他のプログラミング言語から扱いやすいのですが、なかなか広まりません。素のSVGを理解し、使っていくのは敷居が高く、使いやすくラッピングしたライブラリの登場が期待されます。今回はHaskellを使ってアニメーションするSVGを生成できるReanimateを...

List

  • 2019/04/18

Kroki - テキストからドローに変換するWeb APIサーバ

プログラマーは図を書くのが嫌いです(たぶん)。少なくともドローソフトウェアを使って書くのは嫌がるでしょう。メンテナンスしづらいですし、コードと図の乖離が発生しがちです。せめてテキストで書いて、自動的に図にしてくれるものであれば、元のテキストを自動生成する方法が選べたり、バージョン管理で差分が取れるようになります。そんな...

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の使い方デモです。横幅の広いバッジも作...