SVGOMG - SVGO's Missing GUI
Global settings Show original Compare gzipped Prettify markup Multipass Number precision Transform 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
svgを圧縮するgulpプラグイン「gulp-svgmin」
2016年 2月3日 23時30分 7年前 gulpやgrunt等のタスクランナーは 今やWeb開発にとって 切っても切れない重要なツールの1つとなりました。 babel, type-script, coffee-scriptのコンパイル、cssやjavascriptの圧縮。 上記のassetファイル以外にも jpegやpng,SVGファイルのロスレス圧縮もよく耳にするようになりましたね。 特にSVGはファイルサイズがとても小さいので重宝しています。 ( * 画像と言っても、実態はxmlファイルです ) その上、画像編集ソフトを使って編集する時も レイヤー毎にパーツがちゃんと分けられている状態なので凄く使いやすいです。 今回は そのSVGに集点を置いてgulpでSVGファイルの圧縮を出来るプラグイン 「gulp-svgmin」の紹介をしていきます。 gulp-svgminのインストールはコ
[70-5] 複数のSVGを1つにまとめて個別に呼び出す SVGスプライト
[70-5] 複数のSVGを1つにまとめて個別に呼び出す SVGスプライト 最終更新日：2017年11月15日 （初回投稿日：2017年05月08日） 複数のSVG画像のコードを1つにまとめておいて、HTML上で個別に呼び出すことを、 SVGスプライト（SVG Sprite）というと言うんだそうで、今回はこれを使ってみます。 SVGはコードが長くなりがちなので、同じ図形を何度も使う場合、使用する箇所ごとにいちいち同じコードを書くのは面倒。 そこで、SVGをまとめて書いておき、図形を貼りたい箇所で呼び出すようにすれば、何度も同じコードを書かなくて済み、編集もラクになるというわけです。 アイコンなどページ内で同じものを何度も使うなら、SVGスプラウトにしたほうが便利です。 SVGスプライトは、<body>直下にジカに書く方法と、SVGを外部ファイルにして呼び出す方法があるそうなんですが、今回は
![[70-5] 複数のSVGを1つにまとめて個別に呼び出す SVGスプライト](https://cdn-ak-scissors.b.st-hatena.com/image/square/48a45b92a5daf2c800043a4df61a4d43950ee256/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-110.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2F170428-1.gif)
SVGを使うときに知っておくといいことをまとめました - Qiita
アイコンやロゴ、見出しやイラストなど、写真以外の画像ではSVGを使うことが多くなりました。 PNGのように荒れたりしないし、使い方によってはCSSで変更することができるので便利です。 ただ、PNGと違ってSVGは汎用性が高い分、作り方や使い方で気をつけることがたくさんあります。正直まだ把握しきれていないところもあるんですが、社内への共有も含めてドキュメント化しています。 もし、「ここが間違ってるよ」とか「こうしたほうがいいよ」みたいなことがあれば、Qiitaのコメント欄やGitHubのIssueをいただけたらとても嬉しいです。 SVGの作成時に注意すること サイズ削減のためにすること 「オブジェクト」→「パス」→「単純化」でアンカーポイントの数を最小化する（見た目を損なわない程度に留めます） 非表示にしているレイヤーを削除する（非表示レイヤーも書き出されます） 1回しか使わないシンボル図形
SVG 画像を CSS で文字色と同じ色に塗る - Qiita
TL;DR currentColor で「現在の文字色」が取れました。 なにをやったか ウェブページに SVG 画像を置くとき、 CSS で色を制御したくなることがあると思います。 SVG 専用のプロパティ fill を使って塗る記事はたくさんでてくるのですが、 CSS animation, transition に対応していない（ブラウザによる？） テキストの一部として SVG アイコンを使う場合に、不便 という問題がありました。 上は単純に、アニメーションする部品の中に SVG 画像を組み込むときに困ります。下はたとえば、 UI 部品をそれぞれコンポーネントとして実装していて: .button { color: $ButtonFg; background-color: $ButtonBg; padding: $ButtonPadding; } .button:hover { color
すごい簡単！UIデザイン用のさまざまなSVGアイコンをカスタマイズして利用できるJavaScriptライブラリ -vivid.js
WebサイトやスマホアプリにぴったりなSVGアイコンを簡単に使用できるよう構築されたJavaScriptの軽量ライブラリを紹介します。 カスタマイズも非常に簡単で、HTMLのdata属性を使用して、SVGアイコンのサイズやカラーを個別に設定できます。 90種類以上のSVGアイコンが全部商用利用無料 vivid.jsでは現在90種類以上のアイコンが利用できます。 手作業で追加するのも可能で、リクエストも受け付けています。 超軽量ライブラリ オリジナルのSVGアイコンのちょうど半分のサイズで実装された超軽量ライブラリ。他のCSSやJavaScriptなどの依存は無しです。 SVGアイコンは使用もカスタマイズも簡単 アイコンはHTMLで簡単に使用でき、サイズやカラーはdata属性でカスタマイズできます。 MITライセンス 個人でも商用でも無料で利用できます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
