[B! SVG] okudenのブックマーク

こいつ、動くぞ！商用利用無料、シンプルにデザインされたSVGもフォントも揃った高品質なアイコン -Boxicons

1,500種類以上のアイコンが揃った、Webサイトやスマホアプリにぴったりなシンプルにデザインされた無料アイコンを紹介します。オープンソースで個人でも商用でも無料で利用できます。また、SVGアイコンとアイコンフォントで利用できるので、サイズやカラーの変更はCSSでできます。アイコンはリスト、固定幅、アニメーションにも対応しており、かなり便利だと思います。 Boxicons Boxicons -GitHub Boxiconsの特徴 Boxiconsの使い方 Boxiconsを実際に使ってみた Boxiconsの特徴 Boxiconsはオープンソースのプロジェクトで、1,500+種類のSVGアイコン・アイコンフォントが簡単に利用できます。シンプルなデザインは、さまざまなWebサイトやスマホアプリにぴったりです。けっこう前にも紹介しましたが、アップデートされ続け、アイコンの種類や機能がだいぶ

okuden 2021/11/11

リンク

WebサイトやスマホアプリのUIでよく使用するアイコンのSVGコードをコピペで簡単に利用できる -Akar Icons

アロー・ホーム・サーチ・カート・メール・ソーシャルメディア・ハートをはじめ、WebサイトやスマホアプリのUIでよく使用するアイコンのSVGコードをコピペで簡単に利用できるAkar Iconsを紹介します。コピーしたSVGコードはHTMLに貼り付けて使用してもよし、Adobe XD, Figma, Sketchなどでも利用できます。 Akar Icons Akar Icons -GitHub Akar Iconsには現在、283種類のアイコンが揃っています。少し丸みを帯びたシンプルなデザインは、非常に使い勝手がよいと思います。MITライセンスで、商用プロジェクトでも無料で利用できます。

okuden 2021/06/28

リンク

簡単で便利すぎる！UI用のシンプルなSVGアイコンをカスタマイズしてダウンロードできる -ICONSVG

Webサイトやスマホアプリに使用する、UI用のSVGアイコンをカスタマイズしてダウンロードできるICONSVGを紹介します。デザインは非常にシンプルで、使い勝手がよいと思います。 ICONSVG ICONSVGは登録など、面倒なことは一切不要。簡単にアイコンをダウンロードできます。アイコンの利用にあたっては、明記されていないので作者様に尋ねたところ、個人でも商用でも完全に無料で、商用のプロジェクトに利用しても無料、とのことです。まずは、カスタマイズの紹介。アイコンを選択し、右パネルで、アイコンのサイズやストロークを調整できます。

okuden 2019/02/22

リンク

国産のSVGアイコンサイトが登場！日本人クリエイターが作成した商用無料で利用できるアイコン素材 -Icon Box

海外の素材だとちょっと不安という人でも大丈夫、日本人クリエイターが作成した商用無料で利用できるアイコン素材を紹介します。アイコンは現在400種類以上あり、高品質で汎用性の高いものが揃っています。SVGも完備されているので、非常に使い勝手がよいと思います。 Icon Box アイコンの利用にあたっては個人でも商用でも無料で、「アイコンの編集もご自由にどうぞ」とのことです。アイコン自体の再配布は禁止です。詳しくは、ライセンスページをご覧ください。アイコンのフォーマットは、下記の通り。透過PNG SVG サイズは、16px, 32px, 64px, 128px, 256pxが用意されています。ダウンロードも簡単で、登録など面倒なことは一切不要です。各アイコンページの「PNGボタン」「SVGボタン」からダウンロードできます。

okuden 2018/08/23

リンク

Customize and apply backgrounds fast

Hey I'm Matt, please choose your way to credit my work: Credit with HTML link Share link on social Buy me a coffee Learn about attribution How to use Learn where to place the CSS code: Demo License summary By obtaining and using graphics from SVGBackgrounds.com, you agree to the terms of the SVGBackgrounds.com License Agreement You can use graphics in personal or commercial projects You cannot use

okuden 2018/02/07

リンク

コード不要で手描き風のSVGアニメーションを自動作成できるエディタ「Vivus Instant」の使い方大公開！ - paiza times

どうも、まさとらん（@0310lan）です！今回は、誰でも超簡単にSVG画像をアニメーション化できる無料のWebサービスをご紹介します！このサービスは、JavaScriptでSVG画像を制御できる「vivus.js」をベースにしており、誰でもプログラミング不要で簡単に「手描き風」のアニメーションを作れるのが特徴です。【 Vivus Instant 】そして本記事の後半では「vivus.js」を使った基本的なプログラミングについても解説しているので、ご興味ある方はぜひ参考にしてみてください！ ■「Vivus Instant」とは？それでは、実際に「Vivus Instant」を使いながら、どのようなサービスなのかを見ていきましょう！まずは、サンプルとして次のようなSVG画像を用意しました。 SVGは、ベクター形式で描かれたXML構造を持つデータですが、このままでは当然ながら静止画

okuden 2017/06/16

リンク

SVGコンテンツ制作に役立つ！流行りのSVGライブラリまとめ - ICS MEDIA

SVGはベクターグラフィックスの画像形式で、昨今のウェブサイトで幅広く使われています。ウェブサイトのアニメーションやインタラクションにもSVGを使えますが、その用途ではJavaScriptを使わなければなりません。たとえば矩形を1つ描くだけでも標準のAPIでは10行近いコードの記述が必要になりますが、JSライブラリを利用するとほんの数行で実装可能です。手軽に導入できるだけでなく、JSライブラリを使うことで表現の自由度が上がったり、古いブラウザもサポートできる利点もあります。この記事では有用なSVGライブラリをいくつかピックアップし、それぞれの特徴を紹介します。 Snap.svg Snap.svgはAdobe Systems社が提供しているオープンソースのライブラリです。SVG DOMの操作や、アニメーション・モーフィング、マスキング・クリッピングといったさまざまな高度な機能を簡潔に提供し

okuden 2017/06/12

リンク

シンプルなデザインで使いやすい！商用でも無料で利用できるSVGのアイコン素材 -Feather

無料のアイコン素材はたくさんありますが、シンプルなデザインで使い勝手のよいものとなるとなかなか見つかりません。個人でも商用でも無料で利用でき、豊富なアイテムが揃ったアイコン素材を紹介します。 Feather Feather -GitHub ダウンロードできるアイコンのフォーマットはSVGで、拡大縮小やカラー変更なども自由自在です。 WebサイトやアプリのUIでよく使うアイテムが、200種類以上揃っています。