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

メディア - SVGの記事一覧

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

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

もっと見る

List

  • 2021/03/20

svgasm - アニメーションGIFをSVGに変換してサイズ軽減

アニメーションGIFを作成したり、利用してWebサイトのコンテンツに使っている人たちは多いです。しかしアニメーションGIFは画像をつなぎ合わせたもので、長い時間や大きい画像だと、あっという間に肥大化してしまいます。そこで使ってみたいのがsvgasmです。アニメーションGIFをSVG化することで、サイズの小さくできます。...

List

  • 2021/03/14

Canvas - 多彩なフォーマットに対応したグラフィックスライブラリ

業務システムを開発する際にはコンテンツをHTMLで出したり、帳票やグラフを使うなど様々なフォーマットを扱います。その度にライブラリを変えても良いですが、より多くのフォーマットに対応したライブラリを使えば学習コストは下がるでしょう。今回紹介するCanvasはGoを使っている時にお勧めしたいライブラリです。SVGやPDF、...

List

  • 2021/03/10

placeholders - ダミー画像やテキストを生成するWeb Components

Webデザインを行っていて、画像の部分にプレイスホルダーとなるダミー画像を適用することがあります。大抵画像サイズだけが表示されていたり、目的(ロゴなど)の文字を書いていたりします。プレイスホルダー画像を提供するサービスもありますが、今回はローカルでも使えるプレイスホルダー画像を作るWeb Components、plac...

List

  • 2021/01/13

github-readme-quotes - GitHubのREADMEに名言を表示しよう

GitHubのREADMEに用いるバッジは数多く存在します。たとえばビルド結果を出したり、バージョンを出したりします。多くはそのソフトウェアを知るための情報です。開発者もそうした情報を埋め込むことで、ソフトウェアの信頼を獲得できます。今回紹介するgithub-readme-quotesはそういった信頼性とは一線を画す存...

List

  • 2021/01/06

Panelle.js - マンガのコマ割り用エディタ

マンガは日本が世界に誇るコンテンツです。日々多くのマンガが書かれ、年間数え切れないほどの雑誌やマンガが発刊されています。そのマンガの肝ともいえるのがコマ割りではないでしょうか。今回紹介するPanelle.jsはマンガのレイアウト(コマ割り)を作成するエディタです。## Panelle.jsの使い方メインページです。あら...

List

  • 2020/12/24

Plaiceholder - 画像をぼかしてプレイスホルダー化

Webサイトやアプリのデザインを考える際に使われるのがプレイスホルダーと呼ばれるモック的な画像です。単純にサイズを明記しただけのものもありますが、多少は情報があった方がそれっぽくなります。今回紹介するPlaiceholderは既存の画像をベースにプレイスホルダー化するライブラリです。## Plaiceholderの使い...

List

  • 2020/12/14

SVG Screenshot - Google ChromeのスクリーンショットをSVGで取得

一般的にスクリーンショットといえば画像になります。画像の場合、テキストが書かれていたとしてもコピーできず、再利用性が劣ります。スクリーンショットに出ているエラーメッセージが欲しい、といった時にとても不便です。今回紹介するSVG ScreenshotはスクリーンショットをSVGで保存してくれるGoogle Chrome機...

List

  • 2020/12/11

QR-Code-SVG-Logo-Generator

QRコードは仕様が決まっており、その範囲内で自由にカスタマイズできます。たとえば、一部が欠けたとしても読み込まれるようにエラー処理も入っています。つまりQRコードは一部だけでも大丈夫なのです。今回紹介するQR-Code-SVG-Logo-GeneratorはQRコードの中心にロゴを差し込んでくれるソフトウェアです。##...

List

  • 2020/12/03

SvgPathEditor - WebベースのSVGエディタ

SVGを作成する場合、Illustratorなどのドローアプリケーションを使ってSVG形式でエクスポートするのではないでしょうか。SVGを直接作成、編集できるソフトウェアはあまりないように思います。そこで使ってみたいのがSvgPathEditorです。SVGをWebブラウザ上で作成、編集できるソフトウェアです。## S...

List

  • 2020/11/29

Svg Wave - 綺麗な波のデザインを描く

自然の動きを表現するのはとても難しいです。コンピュータは直線を描いたり、繰り返す動きを描くのは得意ですが、滑らかな曲線を自然に描くのは容易ではありません。しかし自然物のデザインはそうした繰り返しではないところに魅力があります。今回紹介するSvg WaveはSVGで波を描けるソフトウェアになります。## Svg Wave...

List

  • 2020/08/28

Heroicons - 140種類のSVGアイコン集

アイコンセットはWebサイトの雰囲気やデザインによって最適なものを選ぶべきです。そのため、様々なアイコンセットを知っておけば、利用できる場面も増えるでしょう。今回紹介するHeroiconsはシンプルなアイコンセットになります。特徴としてはすべてSVGであることでしょう。## Heroiconsの使い方角丸で、柔らかい雰...

List

  • 2020/07/23

ゆるGIFメーカー - 画像を振るわせてアニメーションGIFを生成

アニメーションGIFは動いていなければ意味がありません。しかし、アニメーションを一から作るのは大変です。動画などの素材をベースにするのはそのためです。コマ撮りで作るのは時間も労力もかかります。そこで一枚の画像からでもアニメーションGIFが作れるゆるGIFメーカーを使ってみましょう。フルフルと震える、新しいかわいらしさを...

List

  • 2020/07/14

SVGuitar - SVGでギターコードを表示

ギターはコードを覚えて弾き方をマスターしていきます。今はオンライン上にもたくさんのギターコードがアップロードされています。しかし、表示形式が特殊なので、画像でできているものが殆どです。画像の場合、別なコードを作成したり、修正するのも面倒です。そこで使ってみたいのがSVGuitarです。## SVGuitarの使い方左側...

List

  • 2020/06/02

Pose Animator - 顔や体の動きを2Dキャラクターに反映する

アニメを人のように動かそうと思った場合、従来は顔や体にマーカーを付けて動きを記録する必要がありました。しかし、今では機械学習を使って顔や体の動きを学べるようになっています。それによってアニ文字のような技術も生まれています。今回紹介するPose Animatorは顔や体の動きを2Dに再現するソフトウェアです。## Pos...

List

  • 2020/04/12

Tabler Icons - 300種類のSVGアイコン集

最近は画像ではなく、SVGでアイコンを表示するケースも増えています。PNGなどのバイナリとは異なり、SVGならば縮小、拡大しても綺麗だというのが利点です。さらにちょっとしたデータ変更であれば(色など)、データを書き換えたり、CSSで変更できます。今回紹介するTabler IconsはSVGで作られた300種類のアイコン...

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の使い方こういう雰囲気、見ますよね。!