SVGファイルにbackground-sizeが反映されない場合の対処 – 広告のフジプロ
背景画像にsvgを使用して、幅いっぱいに表示させようとしたら破綻した。 あるいは言う事をきかない。 「Chromeだと背景サイズ指定がうまく動かねぇよ！」 参考：background-size:100% 100%; doesn’t work properly in Chrome https://stackoverflow.com/questions/9334095/background-size100-100-doesnt-work-properly-in-chrome という記事は発見できたがfirefoxでも破綻する報告は見つけられなかった 検証の結果、svgがもつ「アスペクト比を保つプロパティ」を指定されていない場合の動作がブラウザによって違う事が判明。 背景画像にsvgを使用して、かつ、アスペクト比を無視したい場合などには注意が必要。 解決策：png画像に変換する。svgに「pre
Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方
SVGスプライトって、なんか複雑なイメージがありませんか？ 僕はそうでした。なんか、面倒くさそう。。。どこから始めて良いかわからない。。。といった感じでずっと手をつけられずにいました。 でも、今回やってみて思ったんですが、一度ワークフローを確立してしまえばアイコン管理がかなり便利になります。CSSスプライトの時よりも管理が楽になりますし、表示サイズや今後の高解像度対応を気にしなくて良くなるのも嬉しいですね。 SVGスプライトについての英語のリソースはあるのですが、説明が多く、とっつきにくいものも多い印象なので、ここではできるだけシンプルに必要なことだけをまとめてみたいと思います。 では、SVGスプライト・アイコンシステムのGulpを使ったワークフローの構築、始めましょう！ 目次 達成したいこと デモページ SVGスプライトの仕組み ブラウザサポート 用意するもの 導入ステップ 最後に 達成
gulp でサクッとアイコンフォントをSVGで * prasm
シェフの気まぐれサラダ〜ジェノバ風ソースで〜 みたいなタイトルになったけども。 もういいかげんというか、Font Awesomeがあまりにも便利すぎてアイコンフォントはどれもこれもかぶりに被っている！みたいな状況がどうなん？ と思えるようになったので、gulp+SVGで自サイト用のアイコンフォントをさくっとやろうかと。 実装するには svgファイル css吐き出すときのテンプレート が別途必要かなと。 処理の流れとしては svgからフォント作成 svgのファイル名からメインのCSSに組み込むフォント用のCSSを吐きだし という流れで、1と２がちゃんと終わらないとSVGからフォントが出来ても使うのが難しいですね。 吐き出すCSSのテンプレートはfontawesome-style.cssを使わせてもらいました。 gulp fileは以下。 var iconfont = require('gul
SVGを使いこなすための便利ツールいろいろ
2015年1月28日 SVG, 便利ツール SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術。高解像度ディスプレイでもくっきりはっきり表示できるので、近年海外サイトを中心に見かける機会が増えてきました。SVGについてはWebクリエイターボックスでも何度か取り上げてきたので、耳にしたことのある方も多いかと思います。今回はそんなSVGを使いこなすための便利なオンラインツールやJavaScriptなどを紹介します。SVGってなんぞや？という方は、過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」をご覧ください！ ↑私が10年以上利用している会計ソフト！ ラスター画像をSVGに変換 Vector Magic Vector MagicはJPEG、GIF、PNG形式の画像をベクター画像に変換し、EPS
Retina対応にSVGは本当に使えるのか？
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - cognitom/symbols-for-sketch: Symbol font templates for Sketch.app
[Gulp][SketchTool][Sketch 3]これからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化
HTML5 と SVG で考える、これからの画像アクセシビリティ