ゲームパッド・キーボードなどの入力ボタンアイコンが800種以上詰まった『Input Prompts』、Webサイト「Kenney」で無料公開

2024/01/22 6 users Kenney ゲームパッド アイコンパック キーボード マウス

入力ボタンのアイコンパック『Input Prompts』、Webサイト「Kenney」で無料公開 各種コンシューマー機のゲームパッド、キーボード・マウスといった入力ボタンのアイコンが収録されている SVGファイル、サイズの異なる2種のPNGファイルで用意 ゲーム開発用素材の配布やゲームの公開・販売などを行うWebサイト「Kenney」に... 続きを読む

Next.jsにおけるSVGファイルの表示方法を考える

2022/10/16 9 users Next.js Zenn src SVG IMGタグ

はじめに フロントエンド開発を進める際に、Next.jsでのSVGでの扱い方について考える機会があったので、Zennで共有しようと思った次第です。 本来、Webサイト内でSVGファイルを表示させる方法は、大きく分けて以下3点だと思われます。 imgタグのsrcにSVGファイルへのパスを設定して読み込ませる。 CSSファイル内のbackgr... 続きを読む

超お手軽モーションパス！SVGアニメーションを簡単に作成できる「SVGator」を使ってみた！ - paiza開発日誌

2022/07/15 12 users 0310lan アニメーション 手持ち SVGアニメーション

どうも、まさとらん（@0310lan）です！ 今回は、高度なSVGアニメーションを直感的に誰でも作成できるWebサービスをご紹介します。 手持ちのSVGファイルにアニメーションを追加できるのはもちろん、ゼロからイラストを描いてオリジナルのSVGアニメーションを作ることもできます。 記事後半ではモーションパスを活用したダ... 続きを読む

GIMPベースのMac用イメージエディタ「Seashore」がプラグイン無しでSVGファイルのインポート可能に。 | AAPL Ch.

2019/02/19 21 users Seashore GIM AAPL GIMPベース 以下

GIMPベースのMac用イメージエディタ「Seashore」がプラグイン無しでSVGフォーマットをサポートしています。詳細は以下から。 　Seashoreはクロスプラットフォームに対応した多機能イメージエディタ「GIM 続きを読む

srcset属性を使ったSVGフォールバック・ハック - Weblog - Hail2u.net

2015/10/03 39 users SVG Weblog hail2u.net バック ガン

SVGをサポートする環境がほとんどになってきた。それでもなんとか8であったり、かんとか2.3であったりのことを考慮せざるをえないという状況はありうる。それにはonerror属性を使った対応が有力だが、srcset属性でSVGファイルを指定するだけというハックのことを知った。将来的に使えなくなるわけではないが、やりたいことと実装に食い違いが少なからずあるのでハックと言って良いだろう。 <img sr... 続きを読む

手書きのイラストをIllustratorファイルに。魔法のようなモレスキン・Adobeスマートノートブック | Lifehacking.jp

2015/06/15 162 users 手書き Lifehacking.jp 魔法 イラスト Ads

手書きのイラストをIllustratorファイルに。魔法のようなモレスキン・Adobeスマートノートブック Ads: 手書きのイラストをスキャンし、Illustratorで編集可能なSVGファイルにしてしまう。そんな、魔法のようなモレスキン・スマートノートブックが登場しました。 モレスキン・スマートノートブックといえば、これまでEvernoteと連携したものがありましたが、今回のそれはAdobe ... 続きを読む

Vimで小数を四捨五入して置換 - Weblog - Hail2u.net

2015/04/21 12 users vim SVGO 小数 Weblog hail2u.net

渡されたSVGファイルを見たらpath要素のアンカーポイントの数字が小数点以下6桁くらいから30桁まで混在していて、無駄な感じがあった。SVGOでできるのでそれでやっても良かったが、まずは単純に小数を指定桁(3–5桁)で四捨五入したいだけなので他に何かされてしまう可能性があるツールはちょっと避けたい。ということでVimの置換でどうにかした。 コマンドとしては長いがやっていることは普通なので、後述の... 続きを読む

SVGをインラインに展開し、CSSでスタイル出来るようにするJSライブラリ・「deSVG」 - かちびと.net

2015/01/09 36 users SVG CSS JSライブラリ img class

deSVG deSVGはSVGをインライン展開してCSSでスタイリング出来るようにする為のJavaScriptライブラリです。<img>タグのsrc属性に挿入したsvgファイルを<svg>タグで表示出来るように自動で置換し、CSSでスタイリング可能にしてくれます。現在はsvgというclassが指定されていますが、任意のユニークなclass名に変えたい時はコードの最下部にあるdeSVG(“.svg”... 続きを読む

東京の鉄道路線図SVGを作りました＆パブリックドメインで配布します - Liner Note

2014/12/20 1220 users Liner Note パブリックドメイン スクロール 東京

illusratorを使って、東京圏の交通路線図を作りました。 現在、これを書きだしたSVGファイルを以下に置いて、ウェブ上から見られるようにしています。まだマップとして大した処理はしていないので、PCとかだとスクロールが面倒ですが、スマートフォンなどタッチ端末だとそこそこ見られると思います。 東京 鉄道路線図 なお、AIファイル・SVGファイルはパブリックドメイン(CC0)としますので、配布・改... 続きを読む

JavaScriptとCSSは不要！SVGの気持ちいいアニメーションで作られた超軽量のかわいいローディング -SVG Loaders | コリス

2014/12/10 129 users ローディング コリス SVG Step CSS

JavaScriptもCSSも画像も使用せず、SVGで実装された軽快で気持ちいいアニメーションで動くローディングのアイコンを紹介します。 ページに実装する時もJavaScript/CSSは必要ありません。簡単なHTMLでOK！ デモページ SVG Loadersの使い方 使い方は、簡単！ Step 1: SVGファイルをダウンロード 下記ページの右サイドの「Downlaod ZIP」から、SVGフ... 続きを読む

進化するフラットスタイル！確認しておきたい最新Webデザイン23個まとめ - Photoshop VIP

2014/09/24 116 users フラットスタイル Photoshop Vip エントリー

フラットデザインという言葉が登場してからある程度経過し、CSSアニメーションを加えたり、SVGファイルを活用したりと、デザインスタイルも少しずつ変化しているようです。今回は最新のフラットスタイルを見ていきましょう。 海外デザインブログGraphic Design Junctionで、フラットスタイルを採用した最近のWebサイトデザインをまとめたエントリー「32 New Examples Flat ... 続きを読む

InkscapeのインストーラーがChromeでのSVG表示を壊す - Weblog - Hail2u.net

2014/08/27 16 users Inkscape インストーラー SVG Weblog 修復

Inkscapeのv0.91pre2が出たのでインストールしたところ、ローカルのSVGファイルがChromeで表示できなくなった。どうもInkscapeのインストーラー(多分安定版のインストーラーでは起こらない)が関連付けを変える時に間違ったContent-Typeを設定してしまうことが原因のようだ。 修復はレジストリ・エディターで行うのが一番早そう。 HKEY_CLASSES_ROOT\.svg... 続きを読む

見た目のクオリティはそのままで、SVGファイルを大幅に軽量化する便利ツール -SVGO GUI | コリス

2014/06/03 77 users コリス SVGO SVG GUI クオリティ

当ブログでも最近、SVGの素材を紹介することが多くなりました。そんなSVGファイルから不要なデータを取り除いて軽量化するアプリを紹介します。 ↓は、今日紹介したアイコンのSVGを軽量化したものです。 ほとんどのファイルが50%以上軽量化されました。 SVGO GUI SVGO GUIは、Node.jsベースのSVG軽量化ツール「SVGO」をGUIで操作できるようにしたもので、Windows用とMa... 続きを読む

SVGグラフィックを手書き風アニメーションさせられる「Lazy Line Painter」:phpspot開発日誌

2013/02/07 21 users phpspot開発日誌 SVG 描画 手書き風 グラフ

Lazy Line Painter SVGグラフィックを手書き風アニメーションさせられる「Lazy Line Painter」 こちらのサイト上にSVG画像をアップロードすればSVGアニメーションするJSコードが得られます。 試しに適当なSVGをアップロードしてみたところ。 色味もその場で変えられるっぽいです。複雑なSVGファイルほど面白い効果が得られそう 関連エントリ 美麗なグラフをSVGで描画... 続きを読む

アイコンフォントをコマンドラインで生成できる「Font Custom」:phpspot開発日誌

2012/12/12 20 users コマンドライン フォントファイル phpspot開発日誌

Font Custom アイコンフォントをコマンドラインで生成できる「Font Custom」 ベクター形式のアイコンをフォントファイルに1個にまとめてフォントのように扱えるけど実はアイコン、なアイコンフォントをコマンドラインでジェネレートできるツールです。 SVGファイルをまとめておいてコマンドラインを叩くとCSSとフォントファイルが生成されます。 単にフォントファイルにまとめるだけでなく、CS... 続きを読む

Google画像検索で高解像度のロゴのみをザクザク見る | ぷらすぶろぐ

2012/12/08 272 users ぷらすぶろ ロゴ 高解像度 google画像検索 SVG

ロゴ制作時に使えるTIPSをご紹介。 アイデア捻出とかでロゴをザーッと見たいとき、Google画像検索で検索ワードに「logo」とか入れて検索すると思います。 そこに「filetype:svg」を追加してファイル形式を「SVGファイル」のみに制限することで、高解像度のロゴのみを検索できます。 サンプル でも、SVGファイルって何でしょうか？ SVGファイルってなんなのさ SVGフォーマットはJPE... 続きを読む

IE10でのSVGのfavicon - Weblog - hail2u.net

2012/07/18 9 users favicon SVG Weblog hail2u.net

SVGのfaviconで試した奴のWindows 8 Release Preview上のInternet Explorer 10での実験。Metro版とデスクトップ版共にSVGのfavicon自体は表示できるけど、単純にlink要素で指定してもダメで、ドメイン・ルートにfavicon.icoというファイル名でSVGファイルを置く必要がある。 IE10はMetro版では32x32を、デスクトップ版で... 続きを読む

SVGのフィード・アイコン - Weblog - hail2u.net

2011/11/06 20 users SVG Weblog hail2u.net LGPL GPL

背景を完全に透明にして白い丸と円弧の部分だけのフィード・アイコンを作ってみました(上の画像は背景がオレンジ色になっていますが、CSSで背景色を指定しているだけです)。Wikimedia CommonsにあるSVGアイコンをエディタでいじっただけですけどね。SVGファイルのソースにコメントとして書いてあるように元ファイルと同じくMPL/GPL/LGPLのトリプル・ライセンスです。 View Demo... 続きを読む

小さなアイコン画像のSVG化に「pixel2svg」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

2011/10/03 22 users Pythonスクリプト MOONGIFT ソフトウェア 通り

pixel2svgはその名の通り、ピクセル画像をSVGファイルへ変換できるソフトウェアです。Pythonスクリプトで、ターミナルベースで動作します。 0 続きを読む

Googleの画像検索からSVGファイルのみを検索できるように！ : ライフハッカー［日本版］

2011/02/21 10 users ライフハッカー CheckTweetGoogle 画像検索

Google , Webツール , その他 , 壁紙 , 検索Googleの画像検索からSVGファイルのみを検索できるように！2011.02.21 14:00コメント数：[ 0 ]CheckTweetGoogleは、SVGファイル（Scalable Vector Graphics）のインデックスをおよそ半年前に追加していますが、この度、SVGファイルのみを表示させることが可能になりました。画像検索... 続きを読む

GIGAZINE - Illustratorのようにベクター画像を扱うフリーソフト「Inkscape」

2006/07/05 489 users GIGAZINE Inkscape FreeBSD 解像度

いわゆるSVG形式のベクター形式画像ファイルを扱う時に便利なオープンソースのソフトウェア。開いたSVGファイルを任意の解像度のPNGファイルに変換できます。また、Illustratorのようにベクター形式で画像を作成することも可能。Linux、Windows 2000/2003/XP、Mac OS X、FreeBSDなどで動作します。 実際のインストールと利用方法は以下の通り。 Inkscape.... 続きを読む