画像置換について
画像置換には疑似要素を使う派ですこんにちは。font: 0/0 aを使う画像置換はあんまり使いたくないというか、em単位をその要素で使えなくなるのはかなり致命的な気がする。こういうテクニックは他のプロパティーに影響を与えないということが最も重要だと思う。 疑似要素を使う方法には、contentプロパティーで直接画像を指定する方法と、background-imageプロパティーで画像を指定する方法がある。SVGだとリサイズがうまくいかなかったり位置がずれることがあるので後者の方が良い感じ。スプライトを使う場合にもその仕組上後者を使う。それじゃcontentプロパティーを使う方法いつ使うの……みたいな感じだけど、こっちを使うとCSSが有効だけど画像が無効というシナリオに対応できるので、スプライトではないPNGやJPEGならこっちを使うと良い。 SCSS Partialsに三種類だけ画像置換のミ
【第22回 HTML5とか勉強会レポート】 Processing.js、SVG、WebGL。HTML5周辺のグラフィック関連技術
HTML5による最新Webアプリ 2011年10月26日、品川グランドセントラルタワーのマイクロソフト品川本社にて、「第22回 HTML5とか勉強会」が開催された。HTML5とか勉強会は、HTML5に関心のあるエンジニアやコーダー、デザイナー向けの勉強会だ。今回のテーマは「グラフィック関連API」。当日の様子をお伝えしよう。 Processing.jsってなんだ？ まず、ゼロベースの田中氏（@dotimpact）からプレゼンがスタートした。田中氏は美術大学で非常勤講師をしたり、Processingの入門書執筆なども手掛けている。 Processingとは 田中氏のプレゼンは、Processingの紹介から始まった。 田中氏の＠ITでのProcessingの記事「Processingの対話式スケッチプログラミングで遊ぼう」も参照いただきたい。 Processingは2001年、MITメディア
SVGを使用してる企業・団体のサイトを22ヶ国、160件以上調べてみた - 聴く耳を持たない(片方しか)
このダイアリーでは過去に何度かSVGの記事を書いているのですが、それに対する反響で SVGって未だに使ってるところを見たことが無い とか いつになったら使えるようになるのか 永遠に普及しなさそう みたいな意見をよく見かけます。 そうした反応にカチンときた……というほどではないのですが、納得してもらうには実例を挙げて反論するのが分かりやすいだろうな、と考えてSVGの利用状況を調査してみました。 かといって個人サイトの利用例を挙げるだけでは説得力がないでしょうから、著名な企業や団体でのSVG採用事例をリストアップしてみた次第です。 そしてもう一つの動機として、Webサイトの制作現場でSVGの導入を検討する際に、同僚や上司、またクライアントからの同意を得る・説得する手段としても、既に実際に利用している企業や団体を提示できれば話を進めやすいだろうな、……といった狙いもあります。 例えば あの有名な
HTML5 と SVG で考える、これからの画像アクセシビリティ
This document discusses Yarn and its advantages over npm. It notes that Yarn uses yarn.lock files instead of npm-shrinkwrap.json files to lock down dependency versions. Yarn is also described as being faster, able to work offline by caching dependencies, and potentially more secure than npm with features like flat mode and module folders. The document suggests Yarn may handle dependencies and devD
SVGのanimateTransform要素
SVGのanimateTransform要素は、その親要素をアニメーションさせながら変形したり動かしたりするためのもの。fromとto要素だけでもちょっとしたことならできるけど、複雑なことをやるにはvaluesとkeyTimes属性とを組み合わせるようだ。 Move 300px in 2s, Sleep 2s, Move -300px in 2s, Sleep 2s 均等にシーンを割り当てる場合はvalues属性を書くだけで良い。 <animateTransform attributeName="transform" attributeType="XML" begin="0s" dur="8s" repeatCount="indefinite" values="0; 300; 300; 0; 0" type="translate"/> values属性に指定した値の個数から1を引いた数でd
img要素でのSVG画像とCSS Transform
SVGは常にスケーラブルなのかというとそうではないこともある。ブラウザーがラスタライズするタイミング次第。例えばimg要素でSVG画像を参照してCSS Transformでいじった場合、Google Chrome 20やOpera 12ではラスタライズされた状態でいじられるようで、結果ぼやけることが多かった。 Demo: SVG and CSS Transform デモのページの最後に載せてあるようにFirefox 13やInternet Explorer 10、そしてSafari 5ではスムーズに拡大される。多くの人が望む挙動はこっちのはず。Chrome 20とOpera 12は速度重視の結果なのかなーとかいろいろ想像できるけど、実際どうなのかはわからない。Chrome 20については縮小方向に限ってはスムーズに行われるような感じがするけど検証しづらいので忘れることにした。 Chrome
10分でわかるSVG 基礎編
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■ XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.e-riverstyle.com/2014/12/svg.html
http://dresscording.com/blog/svg/retina_svg.html
IBM Developer