SVG Sprite Workflow That Works
Update (08 Sep 2017): I found that sometimes SVG icons don’t appear on IE11 even if the SVG code looks good. One of the examples is: The solution on IE11 is to remove the .st# classes in the <path> 😮 and define the color with CSS explained below. So the above SVG code may should look like: Update (23 Sep 2016): One of my colleagues (Michal Prazuch) noted me that xlink:href is not working on Safar
Introducing spritesh
We at Edenspiekermann are big fans of Gulp. We use it in most of our projects, even Rails ones to replace or rather connect to the assets pipeline. Gulp is usually responsible for most of our build process in basically any project. But on small projects, like single page websites or tiny websites, we don’t really need Gulp. However, we still need to be able to build our SVG sprites. Our usual proc
Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方
SVGスプライトって、なんか複雑なイメージがありませんか？ 僕はそうでした。なんか、面倒くさそう。。。どこから始めて良いかわからない。。。といった感じでずっと手をつけられずにいました。 でも、今回やってみて思ったんですが、一度ワークフローを確立してしまえばアイコン管理がかなり便利になります。CSSスプライトの時よりも管理が楽になりますし、表示サイズや今後の高解像度対応を気にしなくて良くなるのも嬉しいですね。 SVGスプライトについての英語のリソースはあるのですが、説明が多く、とっつきにくいものも多い印象なので、ここではできるだけシンプルに必要なことだけをまとめてみたいと思います。 では、SVGスプライト・アイコンシステムのGulpを使ったワークフローの構築、始めましょう！ 目次 達成したいこと デモページ SVGスプライトの仕組み ブラウザサポート 用意するもの 導入ステップ 最後に 達成
Creating SVG Sprites using Gulp and Sass
Written by Mike Street on 11th November 2014 (Last updated 21st March 2022) Following on from our recent blog post about SVG Sprites which gave an introduction and overview to using SVGs in a sprite, this post will outline the processes and tools we use for creating and using an SVG Sprite at Liquid Light. Creating and maintaining large SVG sprites can be cumbersome and time consuming, so we decid
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How I build my SVG sprites
svg-spriteで無駄の無いSVGスプライトを生成する - DeNA Design
GitHub - svg-sprite/gulp-svg-sprite: SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours
