SVGの書き出し方【よくある失敗例】+ IllustratorからPhotoshopにシェイプをコピー 更新日：2017/06/30 SVGは拡縮可能なベクター画像です。 PhotoshopでもIllustratorでも、jpgやpngと同じようにアセット機能で書き出しができます。 ですが、「中身がパスではなく画像になっている」という問題がよく起きるので、本記事ではよくある失敗例をまとめてみました。 上手くいかないあるある「SVGの中身が画像になっている」というミスは新人さんがよくやりがちです。 これはぱっと見で気づきにくく、スマホ実機検証などで「SVGなのに滲んでいる…？」というところから発覚したりします。 確認方法としておすすめなのが、「ページ全体を拡大表示して確認する」という方法です。 画面を拡大していくと、中身がパスになっていないSVGはどんどん荒くなっていくので一目で分かります。
公開日：2021/10/25 13:57更新日：2022/9/15 15:53 ホーム > Tips > フロントエンド 【CSS filter】svgをJSなし・インライン読み込みなしで自由に色を変更する方法！ css, 軽量化, 画像, svg ※追記：2022年8月31日 mask-imageでも簡単に色を変えられます。ぜひこちらの新しい記事もご覧ください。 →【CSS mask-image】SVGなどのアイコン画像の色を変更する方法！ svg画像をCSSで制御して色を変えたりするためには、インラインで読み込みしなければいけません。 こうなる。 そうするとHTMLファイルがすごいことになります。少なくとも人間にとっては読みにくくなってしまいます。 それを回避するために、いろいろ方法がありますが、現時点で私が一番楽だと思う方法をご紹介。 SVG以外の形式でも使えるよ！ 1. SVGを黒
【制作中】もぐらたたきをSVGで作ろうとしています - Little Strange Software
どうも！LSSです！！ 以前、即興で「もぐらたたき」をJavaScriptで作ってみました。 「もぐら」という文字をクリックする、という素気ないものでしたが、画像・ゲーム性ともに充実させたものを作りたい、とは思っていて、 やけに可愛くできあがってしまった「もぐら」の絵も描いたりしていました^^ あと、叩かれた「もぐら」の絵なども用意しなきゃですが、先に「ゲーム画面」をどうするかを考えていたので、今回ちょっとそれを形にしてみます。 まず穴を５つ配置します もぐらが隠れるためのカバーを用意します ほら、こうすれば土管じゃなくなりますｗ いよいよ、もぐら召喚！ 今のところはここまで まず穴を５つ配置します こんな感じ。 配置は結構自由が利くので、３×２に並べたりせず、５つの穴にしました。 コード <svg xmlns="http://www.w3.org/2000/svg" width="70%
〽️use要素の使い方。 〽️画像を準備。 〽️アニメーション実装 〽️マイナスの「遅れ」。 〽️いろんな要素でやってみよう。
SVG Splashは任意のSVGに自由に色付け出来るシンプルなデスクトップアプリです 使い方も簡単で色を選んで変更したい箇所をマウスでクリックするだけです。あとはコードをコピーしたりダウンロードしたり 知識が無くてもSVGに変更を加えられるので一定の需要はあるかもしれませんね SVG Splash
URL-encoder for SVG
About tool We can use SVG in CSS via data URI, but without encoding it works only in Webkit based browsers. If encode SVG using encodeURIComponent() it will work everywhere. SVG must have attribute xmlns like this: xmlns='http: //www.w3.org/2000/svg'. If it doesn't exist, it will be added automagically. Encoded SVG can be used in background, in border-image or in mask (live demo).
A Deep Dive Into The Wonderful World Of SVG Displacement Filtering — Smashing Magazine
What exactly is a displacement filter? In this article, Dirk Weber explains the SVG feDisplacementMap filter primitive with a good number of examples to demonstrate the concept of animated displacement maps. Even today, the magic, wicked realm of SVG Filter Effects is largely uncharted territory. The art of SVG filtering is still surrounded by an aura of alchemy: you have to bravely dive into a da
WordPressでは、デフォルトの状態だとSVGファイルをアップロードすることができません。投稿や固定ページの中にSVGを挿入したくても、アップロードしようとするとエラーで弾かれてしまいます。 SVG Supportは、WordPressでSVGファイルを扱えるようにしてくれるプラグインです。SVG Supportをインストールすることで、メディアライブラリにSVGファイルをアップロードできるようになります。 SVG Supportのインストール インストール手順は以下の通りです。 SVG Supportをダウンロードします。ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。管理画面の[プラグイン]ページで、SVG Supportを有効化します。 SVG Supportの設定 [設定] – [SVG Support]で細かい設定を行えます。
SVG Path VisualizerはSVGのパスデータを可視化するWebアプリです パスを定義するd属性を入力すると、それぞれのパラメーターが何をどのように描いているかを可視化、解説してくれる、というもの。解説文の数値等にマウスホバーするとどこを解説してるのかも分かるようになっています まあそれだけなんですがSVGの学び初めに良いと思ったので備忘録。ライセンスの明記はありませんがソースコードがGithubで公開されています SVG Path Visualizer
For years, my pain has been not being able to create a somewhat natural-looking pattern in CSS. I mean, sometimes all I need is a wood texture. The only production-friendly solution I knew of was to use an external image, but external images are an additional dependency and they introduce a new complexity. I know now that a good portion of these problems could be solved with a few lines of SVG. Tl
3D Wireframes in SVG
3D Wireframes in SVG (via Python) Contents Designing the Rendering API Using the API Implementation Examples Parametric Shapes Thick Varying Borders Dashed Lines for Hidden Faces Diffuse and Specular Lighting Overview SVG is great for line art. It scales nicely for high DPI displays without using much bandwidth. However SVG was not designed for 3D, so it does not provide mechanisms for applying pe
SVGcode: a PWA to convert raster images to SVG vector graphics SVGcode is a Progressive Web App that lets you convert raster images like JPG, PNG, GIF, WebP, AVIF, etc. to vector graphics in SVG format. It uses the File System Access API, the Async Clipboard API, the File Handling API, and Window Controls Overlay customization. (If you prefer watching over reading, this article is also available a
はじめに 仕事で少しSVGを扱うことがあったので、免許証ジェネレータを作ってみました。 制作工数: 2日間(20時間程度) 作ったもの 免許証ジェネレータ 🥳 パラメータを設定して↓のような免許証を生成できます。 使い方 下部のタブから画像やテキスト等を設定して「変更を反映」を押下します。 「画像を保存」からローカルに画像を保存できます。 ソースコード 雑ですが↓に置いています。 免許証ジェネレータの作り方 定数を設定しようと考えましたが、めんどくさくなってマジックナンバーだらけになりました😿 SVGコードのベストプラクティス的なものがよくわかっていないので今後勉強しようと思います。 技術 JavaScriptとHTMLだけです。 JavaScriptでSVGを生成して、HTML要素にappendします。 描画メソッドを作る 線、枠、文字、画像を描画するメソッドを作成します。 座標、大
SVGファイルをカスタムSF Symbolsに変換してくれるMac用ユーティリティ「Custom Symbols」がリリース。
SVGファイルをカスタムSF Symbolsに変換してくれるMac用ユーティリティ「Custom Symbols」がリリースされています。詳細は以下から。 Appleが公開している「SF Symbols」はSan Francisco(SF)フォントから派生したベクターシンボルで、macOS 11 Big Sur/iOS 14のシステムシンボルに利用しているだけでなく、サードパーティ製macOS/iOSアプリの開発者も利用することができますが、開発者がデザインしたSVGファイルのシンボルをカスタムSF Symbolsに変換してくれるユーティリティ「Custom Symbols」が新たにリリースされています iOS & MacOS devs: My first developer tool is live! It's an app for converting any SVG art into
SVG VAE: Generating Scalable Vector Graphics Typography
SVG VAE: Generating Scalable Vector Graphics Typography Oct 15, 2019 Rapha Gontijo Lopes irapha iraphas13 SVG-VAE is a new generative model for scalable vector graphics (SVGs). With it, artists and designers have the power of machine learning at their fingertips to create new styles of fonts, intuitively manipulate character attributes, and even transfer styles between characters. SVG-VAE outputs
2020.4.25 イラレからSVGで書き出す設定 - パーツ別に書き出す方法 SVG（拡張子svg）は容量が軽く、拡大しても劣化することがないファイル形式です。 Adobe Illustratorのアートボード全体をSVG化したり、個別にパーツ単位でSVGで書き出す方法について書きます。 アートボード全体をSVG形式で書き出す アートボードをSVG形式で書き出すには、メニューバーの「ファイル」 → 「書き出し」 → 「書き出し形式」を選びます。 書き出しのパネルのファイル形式で「SVG（svg）」を選択。 「アートボードごとに作成」にチェックを入れます。 「書き出し」をクリックするとSVGオプションが表示されます。 OKをクリックでSVGファイルが書き出されます。 アウトライン化されていないフォントがある場合 書き出したSVGファイルの文字は、ブラウザのデフォルトフォントで表示されてしま
SVGの描画領域 - Qiita
ビューポート 図形を描画する領域のサイズです。 一番外側のsvgタグのwidth、heightで指定します。 (svgタグにposition:absoluteやposition:fixedが指定されていればpositionが優先されます) ビューポートの単位 長さの単位は em, ex, px, pt, pc, cm, mm, in, %を利用できます。 単位を省略した場合はpxになります。 ビューボックス viewBox属性 SVGの描画領域の定義に使います。 viewBoxで指定できる値は4つです。 viewBox="x, y, width, height"(カンマか、半角スペースで区切る) 値 内容
When I started giving talks about SVG back in 2016, I’d occasionally hear a question I never had a great answer for: What if you have a lot of icons on a page? You see, many attendees were interested in transitioning away from icon fonts. But while SVG offers a more accessible, reliable and powerful alternative, there’s no denying that browsers have an easier time displaying thousands of text char
jquery.graphviz.svg - GraphvizのSVGデータを表示/機能追加するjQueryプラグイン MOONGIFT
チャートやネットワーク図などを描くのに使われるのがGraphvizです。多くの場合PNGなどの画像で出力して利用しますが、SVGへのエクスポートも可能です。Web向けであれば、画像よりも使い勝手が良いでしょう。 そんなGraphvizで出力したSVGを表示するのがjquery.graphviz.svgです。 jquery.graphviz.svgの使い方 表示しました。 ノードをクリックすると、ハイライト表示されます。 さらにズームイン/アウトができます。 jquery.graphviz.svgはGraphvizのSVGデータに対して、ハイライトとズームイン、ズームアウトを追加します。さらにデータをレスポンシブにしてくれるので、どのデバイスに対しても適切な表示が可能です。 jquery.graphviz.svgはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT L
OMG, SVG Favicons FTW!
This article explores the world of SVG favicons. We cover adding them to HTML, using emojis, inlining them as data URIs, supporting dark mode, and animations. Chinese Version / 中文版 I’ve been working on some side projects recently (Style Check and bedrocss), and as with any project I work on long enough, I got to the point where I wanted to add a favicon. I decided to play around with SVG favicons.
筆ブラシの質感をそのまま再現できるSVGフォントCalifornia Sunriseが、発売を記念して1週間限定の無料ダウンロードキャンペーンを行っています。 デザイン販売サイトCreative Marketの人気フォントデザイナーNicky Laatzによる新作英語フォントで、公式サイトでのみ無料配布されています。 無料ダウンロードできる美しい筆記体やブラシフォントは、以下の記事でも紹介しているので参考にどうぞ。 入力するだけで美しい！筆記体フリーフォント86選 改訂版 商用OKな手描きブラシ無料フォント83個まとめ【5年熟成の秘密レシピ】 【商用可＆無料】2020年上半期ベスト英語・日本語フリーフォント厳選90個まとめ 手書きした筆ブラシのリアルな質感を再現！SVG英語フォントCalifornia Sunrise California Sunriseは、通常のOTF形式のフォントに加え
SvgPathEditorはSVGのパスを作成、操作できるオープンソースのSVGパスエディターです。 実際に完成図を直感的に操作可能で、データが即時反映されます。左ペインからデータを編集する事も可能です。 少し慣れは必要ですが、必要な方には地味に嬉しいアプリかもしれませんね。本アプリはOSSとしてソースコードも公開されています。ライセンスはApache-2.0。 SvgPathEditor
SVG within CSS | CSS-Tricks
Stefan Judis has a “Today I Learned” (TIL) post explaining how SVGs filters can be inlined in CSS. The idea is that CSS has the filter property which supports some built-in functions, like grayscale(100%) and stuff like that. But it can also point to a filter defined by SVG. So you could do filter: url(#my-custom-filter) which is in some inline <svg> as <filter id="my-custom-filter">. It’s kinda f
今回は、「.png画像」から3Dプリンターで使える「.stlファイル」を作る方法について紹介します。 .png画像を「SVG」という拡張子にすることで、Fusion360で読み込めるようになります。 そのスケッチを元に「押出し」などを使えば、画像を立体として保存したり、3Dモデルにロゴを刻んだりできるようになるので参考にしてみてください。
svg2png-wasmをつくった
つくったもの svg2png-wasm という名前に全ての情報が入っていますが、 WebAssembly を内部で利用して SVG 画像を PNG 画像に変換することができます。 つくった経緯 SVG のメリット SVG は XML で記述されるベクター画像ですが、以下のような利点があると考えています。 ベクター画像なため拡大してもドットが見えてこない 文字列で構築できるので（文字や図形を中心とした画像を）非常に低いコストで動的に生成できる Markdown で記述されたドキュメント内で表示できる（ついでにアニメーションできる） よく見るこれも SVG svg2png-wasm のアイコンも SVG SVG のデメリット 動的に生成しやすいとなると OGP の画像に設定したくなります（なります）。 ですが、そうは問屋がおろしません。 Facebook のドキュメントによれば、JPEG, G
SVG画像ビューア「Gapplin」がApple Siliconに対応しています。詳細は以下から。 GapplinはCotEditorなどを開発するMineko Imanishiさんが公開しているMac用SVG画像ビューアですが、このGapplinがApple Siliconに対応した「Gapplin v2.0」としてリリースされています。 Gapplin v2.0ではIntelとApple Siliconに対応したUniversal 2 Binaryとなった他、アプリケーションアイコンがBig Sur以降に最適化され、Quick LookプラグインがアニメーションSVGのプレビューに対応しています。 また、今回のアップデートではシステム要件がmacOS 11 Big Sur以上に変更されていますが、アプリは聞き続きMac App Storeで無料公開されているので、SVG画像ビューアをお
Transform SVGs into React componentsA complete tool box to take advantage of using SVGs in your React applications.
GitHub - Yqnn/svg-path-editor: Online editor to create and manipulate SVG paths
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
こんにちは、SVGに目覚めた梶原です(*_*) この記事ではJavaScriptでSVGを操作するための情報をまとめてみました。 SVGの基本についてはこちら 「コードで描くSVG 図形・テキスト編」 要素の取得・指定 SVGの要素を取得するときはdocument.getElementByIdで取得できます。 取得した要素を変数に入れて.setAttribute又は.styleで属性を指定できます。 但し.setAttributeと.styleを混合して書くとうまく動かないことがあるようです。 コードもキレイになりますのでどちらからに統一した方が◎です。
Vectorizer.AI Beta - AIパワーでJPGやPNGのビットマップ画像をSVGベクターファイルに変換出来るサービス！ベータ版が無料使用可能！
Blender アセット アセット-Asset Pattern Designer - 1枚の画像から多彩なシームレスパターンを作... 2024-04-09 コンセプトアーティストでデザイナーのPierre Lazarevic氏による1枚の画像から多彩なシームレスパターンを作成出来るBlender用シェーダーノードグループ『Pattern Designer』のご紹介！ 続きを読む ソフトウェア＆ツール-Software&Tool モデルビューアー LGLTracer V3 - 高速＆美麗なレイトレーシングレンダリングをブラウザ... 2024-04-09 todaylg氏（@WebAMV）による高速＆美麗なレイトレーシングレンダリングをブラウザ上で実行可能なビューアー＆エディター『LGLTracer V3』のご紹介！ 続きを読む AI 技術 技術-Technology Glimnote E
あるウェブページで次のようなSVG要素が直に埋め込まれていたのを見つけた。 <svg viewBox="0 0 24 24" height="32" width="32" aria-hidden="false" focusable="false" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" aria-label="email" stroke-linecap="round" stroke-linejoin="round"> <path d="..."></path> <polyline points="..."></polyline> </svg> （d属性値やpoints属性値は話の本筋とは無関係なので省略。） この例ではSVG要素に結構な属性が指定されているのだけれども、本当にその属性値は必要な
Motionはあらかじめ用意されているSVGで書かれたシンプルな線画アイコンのアニメーション速度やカラー、ストロークの太さ等を調整してDL出来るソフトウェアです 現在ベータ版となっており、多くのアイコンは無料版で使う事が可能で、一部有償版のみとなっています 以下のようなアイコンを作成してコードをコピーするかファイルをDL出来るようになっています
With this tool, designers and developers can create beautiful and dynamic wave patterns that can be used as a css wave background element, as an overlay effect, or as part of a more complex graphic design project. This tool is particularly useful for those who want to add a touch of creativity and uniqueness to their designs without having to spend hours creating complex graphics from scratch. SVG
[レベル: 上級] リッチリザルト用の構造化データで設定する画像ファイルには、画像検索がサポートする画像フォーマットをすべて利用できます。 これには、SVG や WebP も含まれます。 画像検索がサポートする画像フォーマットはすべて構造化データで利用可能 AMP 記事と組織ロゴで設定する画像に関しては、SVG や WebP をしばらく前からサポートするようになっています。 サポートする画像フォーマットは、Google 画像検索がサポートする画像フォーマットです。 次の 6 種類になります。 BMP GIF JPEG PNG WebP SVG 現在はロゴに限定されることなく、どのリッチリザルトで設定する画像でもこれらの画像フォーマットを利用できるようになりました（おそらく以前からサポートしていたと思われるが、公式にドキュメント化された）。 Product（商品）や Recipe（レシピ）な
こんにちは。エンジニアのJackieです。 最近Webでよく見られるSVGのアニメーションが簡単に作れるライブラリー「Vivus.js」を紹介したいと思います。 Vivus.jsは簡単にSVG要素をアニメーション化できる軽量のJavaScriptライブラリーです。SVG画像のパスを、一つひとつの線が描いているようなアニメーションが作れるので、手書きな筆記体や複雑なラインアート・線画アニメーションには適していて、かなり手間を減らしてタイトなスケジュールがあった場合には役立ちます。 では手順を確認しましょう。 SVGを用意する。 アニメーションさせたいSVGを用意しましょう。SVG自体はいくつかの条件があります： 要素がStroke属性があることです。Fill属性は使わないです。 例：fill: "none"; stroke: "#FFF";隠れているパス要素、見えない要素をSVGに入っていな
SVGテキストとCSSブレンドモードとの組み合わせ
Result 白抜きと通常のテキストを用意して少しずらし、ブレンドモードで良テキストが重なった部分のカラーを表示する、みたいなの 簡単に書けるコードでちょっと目を惹くテキストに装飾できますね。管理もしやすいです css.main {/*通常テキストのスタイル*/ fill: #da4167; font-size:13px; font-weight:bold; text-transform: lowercase; } .overline {/*白抜きテキストのスタイル*/ text-transform: lowercase; stroke: #01b9e1; font-weight:bold; font-size:13px; stroke-width: 0.5px; fill: transparent; mix-blend-mode: darken; }html<svg viewBox="0
SVGモーフィングで「流体シェイプ」をモフモフさせる – SWELLカスタマイズ - POINT OF VIEW 略して、ポイビュー。
SVGモーフィングで流体シェイプをモフモフと動かしたい 最近、SVGアニメーションにハマっているヤモヲです。 今回ご紹介するカスタマイズは、そんなSVGアニメーションのひとつ「SVGモーフィング」を使い、 デザイン要素に「流体シェイプ」を使っているSWELLユーザーの方 に向けたカスタマイズになります。 ただ、残念なことにウチのブログではこの「流体シェイプ」は使っていません^^; なので、SWELLユーザーで「流体シェイプ」といえば、この方。 「つきみにまる」のつきみさん（@tsukiminimal）にご了承いただき、カスタマイズ事例として使わせていただきました。 つきみさん、ご協力ありがとうございます！ 今回のカスタマイズ内容 ということで、今回のカスタマイズ内容としては 自己満足カスタマイズ
Shape Dividerはヒーローイメージやセクション間で使えそうなSVGのカスタムシェイプを直感的に作れるシンプルなWebアプリです 実際に完成図を見ながらセッティング、作成できるので特別な知識なども不要、ユーザー登録等も必要ありません 作成後は雲のアイコンをクリックすればCSSとHTMLを含むsvgのコードが発行されます。右端にあるデバイスアイコンからは各デバイスの見え方も表示できます。地味に便利ですね Shape Divider
【CSS+SVG】ヘリンボーン模様の背景 - Little Strange Software
どうも！LSSです！！ 【CSS+SVG】れんが模様の背景 で、CSSにSVGを織り込むという手法で、背景を描くコードを作成しました。 そのコメント欄に、 さじ(id:conasaji) レンガの組み方でヘリボーンってのもあるんですけど、以前の彩綾型みたいに組まれた模様で面白いかもです。 %23にしなくちゃいけません、って決まりなんですか？誰が決めたんでしょうね（笑） とのコメントをいただき、ヘリボーンについて調べてみると、いつも通ってる歩道で見かけるような模様でした。 さじ様、いつもありがとうございます^^ ヘリンボーン (模様) - Wikipedia ※英語の読み方次第で、ヘリングボーンだったり ヘリンボーンだったり ヘリボーンだったりしますが、以下「ヘリンボーン」と呼ぶ事にします。 ヘリンボーン模様の背景 コード 改変しやすい部分をコード中で赤文字にしています CSS+SVGでも、
iconhubは色や太さ、サイズなどを設定して利用できるシンプルなSVGアイコンセットです。 スタイルは単色線画、単色塗りつぶし、2色線画、2色塗りつぶし、2色線画+塗りなどから選択でき、サイズは6種、線の太さも6種選択可能で、カラーも任意のカラーを選ぶ事が出来ます。 見た目もシンプルで使いやすそうです。設定後は単体でSVGコードをコピーできる他、選択して一括ダウンロードする事も可能です。 ライセンスは独自ライセンスで、20個までなら商用でも無料、50個までは個人/非商用でも無料で利用できるそうです。詳しくはライセンスをご確認下さい。 iconhub
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVGの書き出し方【よくある失敗例】+ IllustratorからPhotoshopにシェイプをコピー | 東京のホームページ制作 / WEB制作会社 BRISK
【CSS filter】svgをJSなし・インライン読み込みなしで自由に色を変更する方法！ | ブルーシュ
>SVG、線を描くアニメーション。
任意のSVGに自由に色付け出来るシンプルなデスクトップアプリ・「SVG Splash」
SVGファイルの取り扱いを許可してくれるWordPressプラグイン「SVG Support」
SVGのパスデータを可視化するシンプルなWebアプリ・「SVG Path Visualizer」
Creating Patterns With SVG Filters | CSS-Tricks
SVGcode: a PWA to convert raster images to SVG vector graphics
【JavaScript】免許証ジェネレータを作ってみた【SVG】 - Qiita
イラレからSVG形式で書き出す設定とパーツ別に書き出す方法
Which SVG technique performs best for way too many icons?
手書き英語フォントCalifornia Sunrise木曜まで無料！SVGフォント色の変更方法も（PS＆AI）
SVGのパスを作成、操作できるオープンソースのSVGパスエディター・「SvgPathEditor」
【Fusion360】PNG画像をSVGにして読み込む方法！3Dモデルにロゴを刻んでみた！
Apple Siliconに対応したSVG画像ビューア「Gapplin v2.0」がリリース。
SVGR - Transforms SVG into React Components. - SVGR
コードで描くSVG JavaScript編 | チルチルミチルブログ
メモ：SVG要素のその属性は本当に必要なのか - 水底の血
用意されたSVGのシンプルなアニメーションアイコンを編集してダウンロードできる・「Motion」
SVG Waves - Instantly generate waves
Google、すべてのリッチリザルトの構造化データでSVGとWebPをサポート
Vivus.jsで絵描き風のSVGアニメーションをする | 株式会社 エヴォワークス -EVOWORX-
SVGのカスタムシェイプを直感的に作れるシンプルなWebアプリ・「Shape Divider」
色や太さ、サイズなどを設定して利用できるシンプルなSVGアイコンセット・「iconhub」