Acceptヘッダで判別するサーバーサイドのSVGフォールバック - 聴く耳を持たない(片方しか)
前回の記事ではSVGに未対応な環境が現在どの程度残っているのか調査しました。 SVG未対応ブラウザのシェアって今どれくらいか？2015年10月版 ブラウザシェアの調査は難しく、Webサイトの利用者層によっても傾向は異なるのでしょうが、NetMarketShareによれば未対応な環境は2割以下ほどになってきています。 しかし少数だからと言って全く無視をしてSVGだけを使うというわけにはいきません、なぜなら未対応の環境では表示されませんから、必要な情報を得られず困りますから、なんらかの形でフォールバックが必要になります。 簡易目次 フォールバックとは SVG未対応の環境とは ダメなフォールバックの例 インラインSVGのimage要素を使ったフォールバック 逆にSVG未対応の環境で余計なリクエストが行われるフォールバック JavaScriptを使ったフォールバック srcset属性を使ったSVG
object 要素で配置した SVG ロゴをスクリーンリーダーに読ませる
object 要素で配置した SVG ロゴをスクリーンリーダーに読ませる 公開日: 2014年12月10日 タグ: memo, tips, html, accessibility, svg という訳で、Web Accessibility Advent Calender 2014 9日目の記事です。私も初日から公開される記事をずっと読んで勉強しておりますが、ここまで割と仕様とかガイドラインとか、あとは制作者としての気の持ちよう(?)とか、そういった話がずっと続いている気がしましたので、ここらでひとつ箸休めというか、実装に関する軽い話題をお送りしたいと思います。 さて、今ご覧のこのサイトですが、この数日ちょこちょことリニューアルを進めております。まだ制作途中で未完成な部分もありますが、概ねこんな感じにしようという部分はだいたい完了しましたので、見切り発車で公開しつつ直していこうかなという。まあ
SVGアイコンを実用するために知っておきたい、リンク周りの記述方法
2014年6月30日 SVG 以前書いた「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」という記事でSVGの基本や効率よく使用する方法を紹介しましたが、実際にWebサイト内で使うにはもう少し具体例が必要だなーと思ったのでリンク関連を中心に補足します。基本的な記述方法を覚えて実用化していきましょう！ ↑私が10年以上利用している会計ソフト！ SVGにリンクを貼る SVGにリンクを貼りたい場合、単純に a タグで svg を囲んでもうまくリンクを貼ることはできません。svg タグの中のオブジェクトを a タグで囲み、xlink:href 属性でURLを指定する必要があります。 <svg ... > <a xlink:href="http://google.com"> <path fill="#1E899D" ... > </a> </svg> See the Pen SVG
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
GIGAZINE - Illustratorのようにベクター画像を扱うフリーソフト「Inkscape」
いわゆるSVG形式のベクター形式画像ファイルを扱う時に便利なオープンソースのソフトウェア。開いたSVGファイルを任意の解像度のPNGファイルに変換できます。また、Illustratorのようにベクター形式で画像を作成することも可能。Linux、Windows 2000/2003/XP、Mac OS X、FreeBSDなどで動作します。 実際のインストールと利用方法は以下の通り。 Inkscape. Draw Freely http://www.inkscape.org/ ダウンロードはこちらから。 http://www.inkscape.org/download.php ダウンロードした本体をクリックしてインストール開始 「Next」をクリック 「Next」をクリック 「Next」をクリック 「Install」をクリック しばらく待つ 「Next」をクリック 「Finish」をクリックすれ
72 Free Vector Glass Buttons and Bars | BittBox
This set is a variety pack of free vector glass buttons and bars for your webpage or blog. Since they are in vector format, they can be easily manipulated and scaled to fit your layout without having to worry about pixelation. To customize, you will need a graphics editor, such as Adobe Illustrator. Customizing tip: use the direct select tool (white arrow) and select one of the gray background sha
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Evil Icons
http://blog.e-riverstyle.com/2014/12/svg.html
SVGのフォールバック画像を用意したときのブラウザのHTTPアクセス状況
http://dresscording.com/blog/svg/retina_svg.html