ChromeでSVGが表示されない現象 - Qiita
特定のSVGファイルがChrome（少なくともv51.0.2704.84 から、2017年12月26日現在の最新バージョンである v63.0.3239.108まで）で表示されない現象があるようです。 特定のSVGファイルとは、image要素のxlink：href 属性が xlink：href = "data：img/png; と記述されているものです。 IE, Edge, FireFox, Safariのそれぞれ最新版ではこの現象は確認できませんでした。 解決法 テキストエディタでSVGファイルを開き、xlink：href = "data：img/png; (画像赤罫線で囲った箇所) をxlink：href = "data：image/png;と書き換えてやると正しく表示されます。 Photoshop, Illustratorの現行バージョンで書き出しを行うと、Chromeで表示されないx
SCSSでbackgroundにsvgを指定するときに便利なbase64エンコード関数を作る | ITハット
SCSSでbackgroundにsvgを指定するときに便利なbase64エンコード関数を作る IE9で linear-gradient を使いたいとき、IE独自の filter では実現不可能なものがあります。color stop がないため、他のブラウザと比べて表現できる範囲がせまいのです。そこで、IE9のみSVGで代用するためにSVGコードからbase64エンコードして埋め込むmixinを作ったので紹介します。 アルゴリズム アルゴリズムはこちらを参考にさせていただきました。非常に分かりやすかったです。 base64ってなんぞ？？理解のために実装してみた base64Encode関数 @function base64Encode($string) { // 文字から2進数に変換するテーブル $character_to_binary_number_table: ( ' ': '00100
はてなブログ スマートフォン表示のカスタマイズのコツ - すなばいじり
そのうち書きます。と思いながら、しばらく経ってしまったので何だか申し訳ない感があるのですが、 【はてなブログデザイン】JUDEのテーマでスマートフォンのカスタマイズが出来なかった話 - Season スマートフォン向けのCSSはヘッダに挿入すると良いでしょう(コツがあります) 2016/04/09 18:21 スマートフォン向けのCSSはヘッダに挿入すると良いでしょう(コツがあります) - psne のコメント / はてなブックマーク では、そのコツは何ですか？と聞かれると、設定によって若干違うので、どう説明しましょうか。と頭の片隅に置いてあったやつです。 レスポンシブデザインに対応しているテーマ 基本的にPC版と同じHTMLが出力されるため、デザイン設定の記述が利用できるようです。 PCを利用して、必要な要素と画面幅に対する設定を確認して設定を追加していきます。 デベロッパーツールを利用
ラスタ画像を配置したSVGファイルを作成する際に気をつけること
最近、案件でも使用することの増えてきたSVGですが、ラスタ画像が混在したSVGファイルを作成する際には注意が必要です。それらの注意点をまとめました。 この記事はSVG Advent Calendar 2015の2日目の記事です。1日目は（id:rikuo）さんが「SVG未対応ブラウザにおけるインラインSVGの挙動を細かく検証しました」という記事を書かれています。 サポートしているブラウザも増えてきたため実案件でもSVGを使用することが多くなってきました。とくに図版の場合は拡大してもぼやけずに表示できるため、積極的に使用しています。 ただ図版でも全てベクターで完結せずに、写真やスクリーンキャプチャなどのラスタ画像を配置する場合があります。そのようなラスタ画像を配置したSVGファイルを作成するときに苦労した点がありましたのでまとめてみました。 SVGにはHTMLのimg要素と似たimage要素
Optimizing SVGs in data URIs by Taylor Hunt on CodePen
Awhile back, CSS-Tricks posted “Probably Don't Base64 SVG”, which concluded that SVGs in data: URIs are smaller used as-is instead of base64-encoded. It’s got the right idea, but there are a few complications and further optimizations. Better browser support In the provided code, we have: (Assume the ... are replaced with real SVG data) .bg { background: url('data:image/svg+xml;utf8,<svg ...> ...
DataURI Maximum length - latest log
DataURI サポート状況: http://caniuse.com/datauri Wikipedia: http://en.wikipedia.org/wiki/Data_URI_scheme Browser Max length Source IE 7 0 IE 8 32KB - 1 http://msdn.microsoft.com/en-us/library/cc848897%28VS.85%29.aspx IE 9 4GB http://msdn.microsoft.com/ja-jp/ie/ff468705.aspx#_DataURI MobileSafari 3.x 128KB ? http://blog.clawpaws.net/post/2007/07/16/Storing-iPhone-apps-locally-with-data-URLs#c1989348 Chro
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
