タグ

ブックマーク / rikuo.hatenablog.jp (5)

  • Acceptヘッダで判別するサーバーサイドのSVGフォールバック - 聴く耳を持たない(片方しか)

    前回の記事ではSVGに未対応な環境が現在どの程度残っているのか調査しました。 SVG未対応ブラウザのシェアって今どれくらいか?2015年10月版 ブラウザシェアの調査は難しく、Webサイトの利用者層によっても傾向は異なるのでしょうが、NetMarketShareによれば未対応な環境は2割以下ほどになってきています。 しかし少数だからと言って全く無視をしてSVGだけを使うというわけにはいきません、なぜなら未対応の環境では表示されませんから、必要な情報を得られず困りますから、なんらかの形でフォールバックが必要になります。 簡易目次 フォールバックとは SVG未対応の環境とは ダメなフォールバックの例 インラインSVGのimage要素を使ったフォールバック 逆にSVG未対応の環境で余計なリクエストが行われるフォールバック JavaScriptを使ったフォールバック srcset属性を使ったSVG

    Acceptヘッダで判別するサーバーサイドのSVGフォールバック - 聴く耳を持たない(片方しか)
    monyurin
    monyurin 2015/10/17
  • SVGを制作できるアプリ,お絵描きソフトを徹底的に調べました! 114個 - 聴く耳を持たない(片方しか)

    私はTwitterでよくSVG関連情報をチェックしているのですが、 SVGってどう作ったらいいの? みたいな投稿をしばしば見かけます。 SVGは地味な存在ですが近年は徐々に注目を浴び、関連ツールも増えてきたのでそうした人向けにSVG制作ツールって結構たくさんあるよ!と、まとめてみた次第です。 でも114個って多過ぎ! ……って思うかもしれない、いや正直オレもそう思う。 なので最後に114個の中から管理人のお薦めツール10選っていうのもまとめておいたので、さっくり読みたい人はそれだけチェックすれば良いかと。 そもそもSVGとは、なに? そもそもSVGってなに?という人もいるでしょう、それについては以前記事にまとめました。 SVGとはなにか?とSVGの学習に役立つサイトや書籍の紹介 SVGの説明と、SVGの学習に役立つサイトや参考になる書籍の紹介をしています。 今回とりあげるSVG関連ツールと

    SVGを制作できるアプリ,お絵描きソフトを徹底的に調べました! 114個 - 聴く耳を持たない(片方しか)
    monyurin
    monyurin 2014/05/28
  • Advent Calendar 3日目:SVG画像を1バイトでも削るためのコードゴルフ - 聴く耳を持たない(片方しか)

    このエントリーはGraphical Web Advent Calendar 2013 への参加記事です。 今日は12月3日、ということで Advent Calendar の3日目は私id:rikuoが担当します。今回はSVG画像ファイルを1バイトでも削るためのコードゴルフのTipsを紹介していきます。 コードゴルフって? まずコードゴルフとはなにか?の説明から。 コードゴルフとは任意のソースコードを出来るだけ短く書くことを目的にしたものです。そのコードの動作を損なわなず、かつ可能な限り短縮して記述する手法を試行錯誤していく様子が、ゴルフのように少ない打法で競うところに似ていることからこのように呼ばれています。 またそれを競技としたコンテストも催されていますね。 画像のファイルサイズ低減策 JPEG、GIF、PNGといったビットマップ画像であればファイルサイズを低減する方法やソフトウェア・ツ

    Advent Calendar 3日目:SVG画像を1バイトでも削るためのコードゴルフ - 聴く耳を持たない(片方しか)
    monyurin
    monyurin 2013/12/04
  • 今年こそついにSVG元年?まだ間に合う!SVGの学習に役立つサイト紹介 - 聴く耳を持たない(片方しか)

    先日AdobeからこのようなJavaScriptライブラリが公開されました Snap.svg http://plus.adobe-adc.jp/post-4817/ 以前から人気の高かった、IE6でもSVGを表示できるJavaScriptライブラリRaphaelの作者 Dmitry Baranovskiy氏による新たなライブラリで、Raphaelとの違いはSnap.svgではIEなら9以上対応とモダンブラウザを対象にしたこと。さらに自由度と表現力の高いことができるようになっているのが大きな特徴です。 こうしたJavaScriptライブラリがオープンソースで、そしてAdobeから公開されたのは大きなことでこれからSVGもどんどん普及していくのではないでしょうか。 まさに2013年こそついにSVG元年と言えるかもしれません*1。 ……とは言え、そもそもSVGってなに?という人もまだまだ少なくな

    今年こそついにSVG元年?まだ間に合う!SVGの学習に役立つサイト紹介 - 聴く耳を持たない(片方しか)
    monyurin
    monyurin 2013/10/29
  • Advent Calendar 3日目:SVG画像を1キロバイトでも削るダイエット術! - 聴く耳を持たない(片方しか)

    これは GraphicalWeb (CSS, SVG, WebGL etc) Advent Calendar 2012 - Adventar への参加の記事です。 3日目の今日は私 id:rikuo がSVG画像ファイルの軽量化テクニックを取り上げてみます。 ちょっと長くなってしまったので、ご注意ください。 はじめに、SVGとは? まず始めに、SVGとは何か?の簡単な説明です。 SVGとはScalable Vector Graphics(スケーラブルベクターグラフィックス)の略で、XMLを基盤に書かれた画像記述言語、またはベクター画像ファイルのことです。画像ファイルというと、JPEG、GIF、PNGまたBMPなどはよく知られていますね。それらの画像はピクセル(ドット)ごとに色を表現したもので、総じてラスター(ビットマップ)画像と呼ばれています。 対してSVGは座標や図形で扱うため、拡大・縮

    Advent Calendar 3日目:SVG画像を1キロバイトでも削るダイエット術! - 聴く耳を持たない(片方しか)
    monyurin
    monyurin 2012/12/03
    svg
  • 1