[B! svg] chlonoのブックマーク

chlono id:chlono

svgに関するchlonoのブックマーク (30)

SVGを使うときに知っておくといいことをまとめました - Qiita
アイコンやロゴ、見出しやイラストなど、写真以外の画像ではSVGを使うことが多くなりました。 PNGのように荒れたりしないし、使い方によってはCSSで変更することができるので便利です。ただ、PNGと違ってSVGは汎用性が高い分、作り方や使い方で気をつけることがたくさんあります。正直まだ把握しきれていないところもあるんですが、社内への共有も含めてドキュメント化しています。もし、﹁ここが間違ってるよ﹂とか﹁こうしたほうがいいよ﹂みたいなことがあれば、Qiitaのコメント欄やGitHubのIssueをいただけたらとても嬉しいです。 SVGの作成時に注意することサイズ削減のためにすること﹁オブジェクト﹂→﹁パス﹂→﹁単純化﹂でアンカーポイントの数を最小化する︵見た目を損なわない程度に留めます︶非表示にしているレイヤーを削除する︵非表示レイヤーも書き出されます︶1回しか使わないシンボル図形
chlono 2022/07/22
svg

web制作
リンク
SVGOMG - SVGO's Missing GUI
Global settings Show original Compare gzipped Prettify markup Multipass Number precision Transf orm precision Features Remove doctype Remove XML instructions Remove comments Remove <metadata> Remove xmlns Remove editor data Clean up attribute whitespace Merge styles Inline styles Minify styles Style to attributes Clean up IDs Remove raster images Remove unused defs Round/rewrite numbers Round/rewri
chlono 2022/07/22
SVGの最適化ツール

svg

ツール

webツール
リンク
創作にぴったり！異世界の魔法、武器、防具、道具、生き物をテーマにした無料のピクトグラムがなんと495種類も！ | コリス
異世界の魔法、武器、防具、クリーチャー・生き物、植物、食べ物、道具、ポーションなど、495種類のアイテムがデザインされたピクトグラムを紹介します。 RPG-Awesome ダウンロードできる素材のフォーマットは、4種類。 .svg .eot .woff .ttf SVGアイコン、Webフォントとして利用できます。ピクトグラムには異世界に出てくるさまざまなアイテムが揃っています。その中の一部をご紹介。
chlono 2020/02/07
アイコン

素材

創作

svg
リンク
無料でウェブデザインに便利な流体シェイプを楽々作れるネットサービス「blobmaker」レビュー
ウェブサイトを作ってみるとどうしても四角形ばかりのカクカクとしたデザインになりがち。﹁blobmaker﹂ではロゴなどに最適なピッタリの柔らかくて優しい印象を持つ、スライムのような見た目の流体シェイプをSVG形式で楽々作れるので、実際に使ってみました。 Blobmaker https://www.blobmaker.app/ Blobmakerにアクセスするとこんな感じ。中央に表示されているスライムのようなものが﹁Blob﹂という流体シェイプ。左下の﹁COLOR﹂アイコンをクリックすると…… こんな感じでカラーパレットが表示されます。パレットにない色を選びたい場合は、空欄に16進数のカラーコードを入力すると任意の色を選択可能。Blobは選択した色になります。﹁COMPLEXITY﹂のスライダーを動かすと、Blobの円周上のうねりの数が変化します。﹁COMPLEXITY﹂を右に動かせば、
chlono 2019/01/20
svg

webツール
リンク
これはすごく便利！85,000個のアイコンから選んで、自分好みにカスタマイズしてダウンロードできる -Icons8 | コリス
当ブログでもたくさんの無料アイコンを紹介してきましたが、自分にぴったりのアイコンを探すのはかなり大変だと思います。85,000個以上の高品質なアイコン素材を自由にカスタマイズしてダウンロードできる新しいIcons8を紹介します。下記のようにカラー変更は当たり前、要素を加えたり、文字入れしたり、さまざまなカスタマイズに対応しています。SVGも完備されているので、重宝しますね。 Icons8 beta Icons8の使い方無料で利用できるアイコンはなんと、85,000個以上 Icons8の使い方 Icons8の使い方は、簡単です。さまざまな機能が用意されていますが、直観的にすべてを利用できると思います。アイコンの選択から、カスタマイズ、ダウンロードまでざっと説明します。
chlono 2018/11/08
svg

アイコン
リンク
オープンソースで公開されている汎用的でミニマルなアイコンのセット・「Eva Icons」 | かちびと.net
Eva Iconsはオープンソースのミニマルなアイコンのセットです。アイコンはどれもWebアプリやWebサイトでよく利用されるような、汎用的に使えるものがほとんどで、様々なシーンやコンテンツに使えるようにデザインされています。アイコンはSVGやPNG、SkechやWebフォント等が同梱されており、線画/塗りつぶし、CSSアニメーションなどもサポートされているなど至れり尽くせりという印象です。現在240種ほど、線画/塗りつぶし合わせて480ほどの数となっているようです。ライセンスはMIT。 Eva IconsOn Github
chlono 2018/11/04
svg

アイコン

フォント
リンク
もうアイコン素材に困らない！CC0でSVG完備、420種類のシンプルにデザインされたアイコン素材 -Evericons | コリス
シンプルなアイコン素材は、重宝しますよね。 Webサイトやブログ、スマホアプリなどにぴったりな、シンプルにデザインされた無料で利用できるSVG完備のアイコン素材を紹介します。 CC0なので、商用利用時のクレジット表記は不要、複製、改変、配布などもOKで、使い勝手がかなりよいと思います。
chlono 2018/10/26
svg

アイコン
リンク
フリーで使えるシンプルな線画アイコンのセット・「Evericons」 | かちびと.net
EvericonsはCC0で使えるシンプルな線画アイコンのセットです。上図のようにシンプルな線画のみのSVG/PNGアイコンの他、Skechファイルなども同梱されていました。Webサイトに表記はありませんがダウンロードするとReadmeテキストがありますのでそちらにCC0のライセンス表記があります。ただし、変更される場合もあるので利用前にご確認下さい。 Webサイトにアクセスすると、メールアドレスの登録を促されますが、ダウンロードするだけなら不要なのでフォーム下部の「click here to download」をクリックすればすぐにDL出来ます。 Evericons
chlono 2018/10/23
アイコン

svg
リンク
[CSS]テキストリンクのホバー時に、波線をうにょうにょとアニメーションさせるスタイルシートのテクニック | コリス
a { background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 3px 3px; color: #000; text-decoration: none; } a:hover { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.
chlono 2018/10/16
css

webデザイン

svg
リンク
CSSスニペット：テキストリンクの下線をマウスホバーで波のようにアニメーションさせる | かちびと.net
Result リンクにマウスホバーすると波のようにアニメーションする、というもの背景に波打つSVGが使われています。ちょっと面白いなと思ったので備忘録 css:root { --mainColor: #ff9800; } a { background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 3px 3px; color: #000; text-decoration: none; } a:hover {/*背景に波打つアニメーションをSVGで描く*/ background-image: url("data:image/svg+xml;ch
chlono 2018/10/01
css

svg

webデザイン
リンク
Matter.jsを使ってスクロール時に背景をアニメーションさせる・「Floaty Bubbles」
物理エンジンのMatter.jsを使って、背景をスクロールに応じてアニメーションさせるサンプルです。物理エンジンに沿った動きをするのでランダム性があります。なんとなく目にも優しい印象ですね。Matter.jsの存在を知らなかったので備忘録として。 Floaty Bubbles
chlono 2018/09/23
svg

webデザイン
リンク
便利なツールが登場！ハンバーガーをXに変形させるのも簡単、SVGアイコンをアニメーション化できる無料ツール
SVGアイコンは美しく軽量で、非常に便利です。Webサイトでもスマホアプリでも、SVGアイコンを使用している人は多いと思います。 SVGアイコンをアニメーションさせるには、どうしていますか？例えば、ハンバーガーメニューを閉じるアイコンに変化させるなど、2つのSVGアイコンをアニメーションで変化させるオンラインツールを紹介します。使い方は超簡単で、2つのSVGアイコンをぽいっとするだけです。
chlono 2018/09/23
svg

ツール

アイコン
リンク
無料アイコン素材｜ICON BOX｜商用フリーアイコンがダウンロードできます
商用利用OKのフリーアイコンダウンロードサイト。テイストを揃えているので様々な案件で使いやすい！パスデータが生きているから簡単にカスタマイズもOK!
chlono 2018/09/23
アイコン

画像

svg
リンク
SVGのフィルターを、結果を見ながら学べる・「SVG Filters」
SVG Filtersは<filter>を、操作しながら学べるソフトウェアです。用意された画像やテキストを対象に、SVGフィルターを直感的な操作で付与、結果を確認しながらコードを学ぶことができます。また、英語ではありますがドキュメント付きの選択も可能です。本ツールはGithubにてソースコードも公開されています。SVGのFilterは複雑な設定が必要とされるのでチートシート代わりに覚えておくのも良いかもしれませんね。 SVG Filters
chlono 2018/09/23
svg

webツール
リンク
Ikonate – fully customisable & accessible vector icons
Customise, adjust and download free vector icons. Ikonate is an adapta ble set of optimised, accessible SVG icons that use can easily use in both development and design apps such as Sketch and Photoshop. Ready to use as images, inline SVGs or SVG sprites.
chlono 2018/09/23
アイコン

画像

svg
リンク
svgスプライトの作成と表示 - CSS note
SVGスプライトは、一つのSVGファイル内に、色などの設定を複数記述して必要なものを呼び出すテクニックですが、具体的な使い方については、あまり紹介されていません。一例をメモに残します。 SVG <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"> <defs> <symbol id="heart"> <path d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.
chlono 2018/08/31
svg
リンク
pointer events ,外部SVGを使ったbefore background , imgでの表示等々 - CSS note
chlono 2018/08/31
svg
リンク
【Swift, Firebase】究極の瞑想アプリを作った話 - Qiita
- json - github “SwiftyJSON/SwiftyJSON” - reactive - github “Swift Bond/Bond” - setting - github “nickoneill/PermissionScope” ~> 1.0 - ui - github “ninjaprox/NVActivityIndicatorView” - github “SVProgressHUD/SVProgressHUD” - github “airbnb/lottie-ios” - github “xmartlabs/Eureka” ~> 4.0 - github “danielgindi/Charts” ~> 3.0.5 - github “kaandedeoglu/KDCircularProgress” - github “ChiliLabs/CHIPageContro
chlono 2018/08/28
muon

svg

swift
リンク
SVGだから快適！スマホアプリやWebサイトでよく見かけるアイコンをアニメーションで変形させるテクニック
<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>
chlono 2018/08/21
svg

webデザイン

web制作
リンク
SVGとCSSでアニメーションする円状プログレスバー
Result SVGとCSSで作れるサークルプログレスバーです css@keyframes load {/*アニメーション*/ 0% { stroke-dashoffset: 0; } } .progress {/*親要素*/ position: relative; display: inline-block; padding: 0; text-align: center; } .progress > li {/*プログレスバーを包括する子要素*/ display: inline-block; position: relative; text-align: center; color: #93A2AC; font-weight: 100; margin: 2rem; } .progress > li:before {/*カスタムデータ属性に設定したデータ名のテキストを表示*/ conten
chlono 2018/08/06
webデザイン

svg

css
リンク
1 2 次のページ