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

メディア - SVGの記事一覧

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

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

もっと見る

List

  • 2020/03/30

SVG ANIMATIONS - JavaScriptも画像も用いないアニメーション集

Web上でアニメーションを実現する方法は幾つかあります。アニメーションGIFを使う方法、CSSアニメーション、そしてSVGやJavaScriptを使うこともできるでしょう。ユーザ操作によるインタラクティブなアニメーションを実現しようとすると、JavaScriptが選択肢になります。しかしWebブラウザ側でJavaScr...

List

  • 2020/01/23

CoreUI Icons - 1,500種類を超える多彩なアイコン集

今のWebサイト、スマートフォンアプリではテキストではなくアイコンで操作を指示することが増えています。絵の方が分かりやすい場面も多いですが、分かりづらいアイコン(保存のフロッピーアイコンなど)もあります。その中でも大事なのが統一性です。大量のアイコンが一つのパッケージになっていることで、統一されたデザインが実現できます...

List

  • 2020/01/16

EscherSketch - タイル状のシンメトリーデザインを簡単に作成

あるパターンを繰り返すシンメトリーデザインは万華鏡などでよく知られています。折り紙を折って、ハサミで切ったりして遊んだ経験がある人も多いでしょう。繰り返すことで新しい魅力が引き出されるのは面白いです。今回紹介するEscherSketchはWeb上でシンメトリーデザインを描けるソフトウェアです。## EscherSket...

List

  • 2020/01/15

linedraw - 画像をSVGに変換

画像を変換する類のソフトウェアは多数あります。例えばアスキーアートに変換したり、グレースケールにする、油絵風にするなど様々です。手法を知っておけば、目的に応じてぴったりなソフトウェアが選べるはずです。今回紹介するlinedrawは画像をSVGにしてくれるソフトウェアです。他では見られないものだけに知っておくと役立ちそう...

List

  • 2020/01/09

unDraw - 自由に使えるフラットなイラストをダウンロード

最近、海外のWebサイトを見ると、フラットな人やオブジェクトを使ったイラストがよく使われています。日本であればいらすとやと同レベルかというくらい使われています。そんな雰囲気のイラストがSVGで無償公開されています。それがunDrawです。## unDrawの使い方こういう雰囲気、見ますよね。!

List

  • 2019/12/07

drawthe.net - Visioに頼らず綺麗なネットワーク構成図を手に入れる

開発者であれなネットワーク構成図を書く機会があるかと思います。そんな時、ドローツールを使うとメンテナンスが面倒だったり、変更時の差分確認もできず、徐々に運用が煩雑になっていきます。そこで使ってみたいのがdrawthe.netです。テキストから詳細なネットワーク構成を生成してくれるドローツールです。## drawthe....

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のよう...