使えば爽快！ SVG Spriteの改訂版。 SVGのsymbolとuseを使ってSVGスプライトを利用する方法を、再度、考えてみた。 SVG#fragmentを利用したSVGスプライトのテストケース Safari用のバグ対策を施したテストケース 今回のSVGのサンプルソース。 ターゲットになっていないuse要素はCSSで非表示にしてしまうことがコツといえばコツ。 あと、ルートのsvg要素には、widthもheightもつけず、viewBoxのみ。 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128"> <style> use:not(:target) { display: none; } </style> <symbol id="re
改訂版を出しましたので、そちらをご参照ください。 Safari8でSVG Fragment Identifiers（以下、svg#fragment）に対応してきた。 Firefox、Chrome、IEはすでに対応済みなので、これで主要ブラウザの足並みが揃った。 注：ところが、Safariの実装にはバグがあった…orz。 WebKit Bugzilla上では既に修正済みとなっているが、Safari9.xまでは依然としてバグが残っている。 これまで、PNGなどの画像を利用したCSSスプライトやアイコンフォントを使う気になれなかったが、svg#fragmentを使ったSVGスプライトならいけるな、と思い、折を見てテストを繰り返し、ようやくその方法が固まった。 そもそもCSSスプライトやアイコンフォントに対する個人的な不満は CSSスプライト 切り出す画像の領域を逐一CSSで指定しなければならない
この記事はSVG Advent Calendar 2014 - Adventarの11日目の参加記事です。 実は、この記事のきっかけとなったのも、SVG Advent Calendarに投稿されていた@_tanshioさんの「IEにも対応したレスポンシブSVGの作り方」という記事でした。 記事を読んだとき、直感的に「IEの問題というよりもSVGやCSSの記述方法に問題がありそう」という印象を持ち、簡単にテストしてみてツイッターでつぶやいたら、ご本人からリプライがあっていろいろやりとりをしていました。 この記事は、その一連のやりとりをまとめなおしたものです。 ただ、自分の思い込みなどから見当違いなツイートがアレやコレやとあったりもしたので、この記事は、その一連のやりとりにおける自分の発言に対する訂正の意味合いも兼ねていますw インラインSVGでIEがFirefoxやChromeと表示が異なる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く