無料で使えるSVGアイコンはたくさんありますが、使い勝手がよいシンプルなデザインで、バリエーションも豊富となるとなかなか見つかりません。 WebサイトやスマホアプリのUIでよく使うアイコンが1,470種類、カラー・サイズ・ストロークの変更もサポートしているSVGアイコン素材を紹介します。 Lucide Lucide -GitHub LucideはFeather IconsのForkで、Featherに対する不満が高まったことによりコミュニティ運営で始まったプロジェクトです。FeatherにはたくさんのIssuesやPRが未解決で放置されており、これらの対応はされていません。 Lucideのアイコンは、元のシンプルなデザイン言語に忠実なまま、可能な限りアイコンセットを拡張しています。ライセンスはISC Licenseで、個人でも商用プロジェクトでも無料で利用できます。

WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 アイコンは小さいサイズでもくっきり見えるようにデザインされており、SVGだけでなく、Webフォントも揃っています。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 アイコンのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute IconはWebサイトやスマホアプリのUI用にシンプルにデザインされた高品質なアイコンです。24x24のグリッドで設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストローク、SVG、PNG、およびWebフォントがサポートされています。 ライセンスはApache License 2.0で、商用

商用プロジェクトでも完全に無料、コピペで簡単に利用できるSVGアニメーションのスピナーを紹介します。よく見かけるものから変わったものまで、さまざまなスピナーが揃っており、スピナーの素材として重宝すると思います。 SVGのスピナーのほとんどは、300-2500バイトの超軽量サイズ。アニメーションも快適で、くるくる気持ちよく動きます。 SVG Spinners -GitHub SVG Spinnersは、SVGで実装された超軽量のスピナーです。24x24dpで設計されていますが、SVGなのでサイズやカラーを簡単に変更できます。MITライセンスで、商用プロジェクトでも無料で利用できます。 スピナーは44種類あり、その中からいくつかコピペしてみました。 まずはよく見かけるドットが回転するスピナー。 <svg width="24" height="24" viewBox="0 0 24 24" xm

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

<text x="40" y="80">Hello World</text> <path fill="none" stroke="blue" stroke-width="3" d="M 28 152 C 28 152 49 78 100 67 C 151 56 210 164 255 148 C 300 133 295 59 295 59" />

<svg version="1.1" id="icon-hearbeat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="510px" height="510px" viewBox="0 0 510 510" style="enable-background:new 0 0 510 510;" xml:space="preserve"> <path d="M369.75,21.675c-43.35,0-86.7,20.4-114.75,53.55c-28.05-33.15-71.4-53.55-114.75-53.55C61.2,21.675,0,82.875,0,161.925 c0,96.9,86.7,175.95,219.3,29

商用でも無料で利用できる1,000種類のアイコンが3つのスタイル、そしてPhotoshoop用・Adobe XD用・Sketch用・Figma用・inVision用、そしてSVGまで完備されたMaterial Icons Libraryを紹介します。 一度にすべてのアイテムがダウンロードできるので、備えておくと便利だと思います。 Material Icons Library ラインセスはApache License Version 2.0で、個人でも商用でも無料で利用できます。 アイコンはMaterial Designを踏襲しており、全部で1,000種類のアイテムが揃っています。スタイルは角丸・アウトライン、ツートーンの3種類。合計すると、3,000種類以上になります。 アイコンの特徴 フォーマットは、Photoshop, Adobe XD, Sketch, Figma, inVision

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

複数のアイコンを自由に組み合わせて、SVG対応のWebフォントにできるmacOS対応の無料ツールを紹介します。 ソーシャルメディア用のアイコンで作成したり、自分のサイト用のアイコンで作成したり、自分だけのオリジナルのWebフォントを簡単に作成できます。 Webfontの特徴 アイコンを自由に組み合わせ 手元のアイコンを自由に組み合わせて、SVG対応のWebフォントのセットを作成できます。既存のフォントをインポートすることも可能です。 フォントのカスタマイズ アイコンをカスタマイズして、フォントに名前を付けることができます。 フォントのエクスポート フォントには1クリックでエクスポートできます。HTMLやCSSファイルも生成されるので、簡単に利用できます。 フォーマットは、.svg, .ttf, .eot, .woff, .woff2 コラボレーション メンバーを招待し、チームを作成して、共

SVGは、Illustratorで制作する図形のようなベクトルグラフィック形式の一種です。そのためベクトルグラフィックを制作する際に一般的に気をつけなければいけないことは、SVGにも当てはまります。 この記事では、Illustrator CCを使用してSVGを書き出す際にやった方が良いこと、やらない方が良いことについてまとめています。 なお、この記事の内容は 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 という書籍のLesson 03の内容を一部抜粋し、この記事用にリライトしたものです。 やったほうがよいこと 曲線のアンカーポイントを減らす ブラシツールで描いた曲線などは、そのままではアンカーポイントがかなり多くなってしまうことがあります。アンカーポイントが多すぎるとファイルサイズも大きくなるのて

<div class="menu cross menu--1"> <label> <input type="checkbox"> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="30" /> <path class="line--1" d="M0 40h62c13 0 6 28-4 18L35 35" /> <path class="line--2" d="M0 50h70" /> <path class="line--3" d="M0 60h62c13 0 6-28-4-18L35 65" /> </svg> </label> </div>

もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き

どうもですよはやちですよ₍₍ (ง ˘ω˘ )ว ⁾⁾ 今回はですね、随分前にご紹介したanime.jsとSVGを使って画面のモーフィングアニメーションを実装いたしました！ ご紹介いたします！ やりたいこと ローディングアニメーションが終わったら画面が上がりつつ最後にSVGを変形していくような作りにしていきます。 実装方法 SVGを用意 ぐにゃっとさせるSVGを画面いっぱいにするために太くたれてるSVGと細くなってるSVGの2種類を用意します。 <svg class="shape" width="100%" height="100vh" preserveAspectRatio="none" viewBox="0 0 1440 800" xmlns:pathdata="https://www.codrops.com/"> <path d="M 73.3,178.6 C 101.7,363.8

ユーザーが一目で分かるよう精巧で、幾何学的な美しい図形でデザインされたユーザインターフェース用のSVGのアイコン素材を紹介します。 個人でも商用でも無料で、企業サイトなどにも利用できます。

2016年11月24日 JavaScript, jQuery, SVG 今やCSSだけでも多彩なアニメーションを取り入れることができますが、JavaScriptとSVGを使うことで、より美しく自由度のきく表現が可能です。今回はSVGを使った、便利なJavaScriptライブラリーやjQueryプラグインを紹介します。 ↑私が10年以上利用している会計ソフト！ ラインアート 1. DrawSVG See the Pen Simple usage by Leonardo Santos (@lcdsantos) on CodePen. Webサイト｜GitHub｜デモ SVGのパスを使ってラインをアニメーションさせるためのプラグイン。2kbと軽量です。デモ画面右下の「RETURN」ボタンをクリックして試してみてください。 var mySVG = $('#my_svg_element').draw

このブログのロゴにも使用していますが、最近よく目にするようになったSVG。イラストにはうれしい画像形式なので、とても注目しています。しかし、制作するグラフィックツールによって書き出しの設定が本当にまちまち・・・ということでいろいろ試してみた結果です。 SVGとは Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）で「SVG」。拡大縮小しても荒れない画像形式ということで、ロゴやアイコンなどに使用されるシーンも増えてきました。テキストエディタで編集できたり、CSSで色を変えたり、グラフィックツールがなくても画像を編集することができるのが特徴です。タイムリーにも、先日MicrosoftのOfficeでも、SVG形式が利用できるようになるというニュースもありました。 SVGの利点として、変更の差分が取りやすくGitなどで管理しやすい、ということがあります。例

SVGの利用 今更感ではありますが当サイトのロゴをpng画像からSVGに変更しました。 SVGの利用に関しては松田さんの書いたIllustrator＆ベクターデータの教科書 を参考にさせていただきました。 SVGコードの取得 まず、Illustratorのアウトライン化したロゴからコピペでエディタにSVGのコードを貼り付けられます。 以下の様なXMLがクリップボードに格納されるのでコピペで終了です。 <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSV

SVGでセクションの区切りを斜め線にする セクションの区切りを斜め線とかにしてしてみると、ちょっと他と違う感がでるかもしれない! 斜め線はCSSで回転させたりする方法もありますが、ここではSVGを使用した方法をご紹介いたします。 投稿日2015年10月14日 更新日2015年10月14日 HTML HTMLは単純にsectionで並べるだけです。 HTML <section id="section1"> <div class="inner"> <h2>Section First</h2> </div> </section> <section id="section2"> <div class="inner"> <h2>Section Second</h2> </div> </section> <section id="section3"> <div class="inner"> <h2>S