SVGでプロトタイプを作って学んだこと
会話のような勉強会 5月20日 SVG 勉強会 という小さな集まりに参加しました。株式会社まぼろしのデザイナーで、ポッドキャストにも出演していただいたこともある松田直樹さん（@readymadegogo）主催のイベント。勉強会という名だけあって、参加者全員が SVG のネタを持ち寄って、実装から可能性の模索まで様々な話題が挙がりました。 講師/生徒のような関係が生まれやすいセミナーのような場だと、どうしてもコミュニケーションが一方通行になりがちですし、参加側も受け身姿勢になってしまいます。 SVG に関する質問でもいいから、とにかく発表するという条件を設けることで、発表内容を聞きに行くという考えが薄れ、個々の積極性が増したと思います。発表者が話している最中もお構いなしに参加者が質問をするなど、会話をしているような発表時間はとても良いと思いました。 データを操作できる魅力を体感 勉強会では、
フロントエンドの実装から見る第四十七回衆議院選挙 開票速報ページまとめ - 暮らしの技術
700億円ほどのお金がかかっているといわれ，why-kaisan.comなんてサイトも作られ巷を賑わせた第四十七回衆議院選挙の投票日が今日でした．投票日と言うことはその後に来るのは開票で，開票と言うことは開票速報がはじまるわけです． 報道各社を見てみますと，各々工夫を凝らした開票速報ページを用意しておりまして，これがなかなかおもしろいということで，その比較でございます． まとめ 長いので先にまとめです． まずテレビと新聞で圧倒的に態度が違います．テレビはあくまで番組の補助だったり宣伝が目的．ウェブページではあまり情報を出したくない様子です．一方新聞各社は トップページ上段，ファーストビューのど真ん中を思いっきり使い，文字通り全面展開といったパターンが多い． フロントエンドの実装から見ると，基本的にグラフが必要な場面ではCSS，日本地図が必要な場面では「画像+mapで部分リンク」か「要素の絶
見た目のクオリティはそのままで、SVGファイルを大幅に軽量化する便利ツール -SVGO GUI
当ブログでも最近、SVGの素材を紹介することが多くなりました。そんなSVGファイルから不要なデータを取り除いて軽量化するアプリを紹介します。 ↓は、今日紹介したアイコンのSVGを軽量化したものです。 ほとんどのファイルが50%以上軽量化されました。 SVGO GUI SVGO GUIは、Node.jsベースのSVG軽量化ツール「SVGO」をGUIで操作できるようにしたもので、Windows用とMac用が揃っています。 使い方は非常に簡単で、Mac用で説明します。 ダウンロードしたSVGO GUIをダブルクリックして、起動します。 SVGO GUIの起動画面 あとは、このパネルにSVGファイルをドラッグするだけでOK！ ※軽量化は元ファイルに上書きするため、元ファイルが必要な時はファイルをコピーしてから利用してください。 SVGファイルの軽量化、完了！ 軽量化しても、グラフィックのクオリティ
Retina対応にSVGは本当に使えるのか？
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
svgを使う上でwebkitを嫌いになる理由
html5がsvgをサポートすることとなってから数年が経ちました．このような状況ですからさぞsvgが世の中に広まったのか…というと別にそんなこともなくて，むしろ解像度に依存しない特徴のみが強調され，ラスタ画像の置き換え程度にとどまっている印象があります．毎年svg元年と叫ばれている中，なぜこのような状況なのでしょうか？ その答えとして筆者はwebkit系ブラウザのsvgにおける機能の貧弱さが一因として挙げられると考えています．chromeやsafariは実に先進的なwebブラウザと言った印象があるのですが，svgに限って言えばむしろ他のブラウザに大きく劣っているなど，実は非常に偏った癖のある環境なのです． 本記事では筆者がこれまでsvgを調査してきた上で気になったwebkit（主にchrome）の問題点についてまとめてみます．将来的に改善されることを期待しつつも，現状svgをクロスブラウザ
Graphical Webの拡がり；HTML5とその周辺技術で実現する | gihyo.jp
もちろん、すべてHTML5を中心とする標準技術であるため、JavaScriptを通じてそれぞれを組み合わせて利用できます。 注目されるGraphicalWeb こうした新しいWebのグラフィックス技術の拡大もあり、2012年にはThe Graphical Webというカンファレンスがスイス開催されました。 The Graphical Web2012のWebサイト 実はこのカンファレンス、2002年から10年以上も続いているカンファレンスで、2011年まではSVG Openという名前で開催されていました（ちなみに、2007年には日本で開催されました）。しかし、2012年からカンファレンス内で扱う技術はSVGのみにとどまらず、HTML5 media、CSS3 Animations、2D Canvas、WebGLなどの技術も取り上げることとなり、こうした技術の総称としてカンファレンスのタイト
2011年6月のW3C | Web標準Blog | ミツエーリンクス
パフォーマンス関連3仕様 Web Performance WGから、6月2日付で2つの新しい仕様が公開されました。また、Navigation Timingの勧告候補も更新されています。 Page Visibility Timing control for script-based animations Navigation Timing Page Visibilityはページが表示されているかどうかを検出する仕組みを提供します。CPU消費などを考慮したWebアプリケーションの開発を目的としているようです。 定義されるdocument.hiddenやvisibilitychangeイベントは接頭辞付きでChromeと先日公開されたInternet Explorer 10 PP2で実装されています。 Timing control～は、ブラウザにフレームを更新するよう伝えるrequestAnim
HTML5 SVGで作るシューティングゲーム (1/6)
HTML5で手軽に扱えるようになったSVG（Scalable Vector Graphics）。前回は、HTML5文書内に埋め込まれたインラインSVGをJavaScriptで制御する方法を紹介しました。今回はJavaScriptとSVGを使ってシューティングゲームを作成します。 SVGアニメーション ゲームの作成に入る前に、SVG図形をアニメーションさせる方法を説明します。SVGには図形の位置やサイズをアニメーションさせる<anime>タグが用意されています。<anime>を使うとアニメーションが簡単に実現できます。 SVGアニメーションはアニメーションさせたい図形の子ノードに<anime>タグを記述し、変化させる属性値を指定します。指定できる主な属性名を以下の表に示します。
SVGを高速化させるためのルール - プラグインレスでSVGを表示する「SIE」開発ブログ
SVGを高速に表示させるためには SVGを速く、さくさくと表示させるには、いろんな方法があるのですが、ここで、まとめてみましょう。以下のルールに従えば、性能の向上ができると思います。 use要素とsymbol要素は必ず避けること use要素とsymbol要素は、Flashで使われる「シンボル化」と違って、内部でかなり複雑な変換をしています。 動的な変更があるたびに、この複雑な変換をしますので、描画処理の性能が落ちてしまいます。 重たくなりますので、必ず、この二つの要素は避けましょう。 アニメーションの期間は短く設定すること dur="5s"などの設定をよく見かけますが、これはとても遅く感じられます。setInterval(f, 200)も同様です。 目の「まばたき」が125ミリ秒ぐらいなのですから、下手をすれば、まばたきをしても絵が動かない、「もっさりとした」アニメーションができあがります
【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】
iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした！ 待ってる間に、iPhone4も対象としたWEBアプリ（ネイティブアプリのweb view を含む） のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね！ という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ？ はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね！ 拡大しなくても小さな文字が読めるなんてサイコー！ ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・？！ こういうイメージです。 そう、
HTML5で注目！インラインSVGの使い方 (1/5)
HTML5ではビットマップ画像を手軽に扱える「Canvas」が話題ですが、「SVG」も画像関連で注目したい新技術です。HTML5ではInline SVG（インラインSVG）がサポートされ、HTML内にSVGを直接記述できるようになるのです。 今回のJavaScriptラボは、Firefox 4、Google Chrome 7、Internet Explorer 9を対象に、インラインSVGの使い方とJavaScriptによる制御方法について解説します。全部で3回に分けて、最終的には簡単なシューティングゲームを作成します。 SVGとは？ SVG（Scalable Vector Graphics）は、名前のとおりベクター形式の画像フォーマットです。ベクター形式とは、点と点で結ばれた線で図形を表す方法で、アプリケーションでいえばIllustratorがベクター形式を採用しています（Photosh
デベロッパーズコーナー：実践！SVG（1） - XML Square
１．イントロダクション SVGはXMLベースのベクタ・グラフィック記述言語で、ベクタ・グラフィック、イメージ、テキストの３種類のグラフィック・オブジェクトを記述することができます。「Scalable Vector Graphics (SVG) 1.0 Specification」は、2001年9月4日W3C勧告になり、新たなWebグラフィック標準になることが期待されています。 本連載では、SVGの基本的な書き方を紹介してSVG機能を概説するとともに、XSLTやDOMと連係させて使用する方法を解説します。なお、第１回では、Adobe社のSVG ViewerをIEにプラグインして使います。Adobe社のSVG ViewerをAdobe社のダウンロードサイトからダウンロードしてください。指定されたインストール手順に従うと、IEにプラグインされます。 ２．SVGの書き方 2-1. SVG文書のフレ
SVG学習辞典
SVG(スケーラブルベクターグラフィックス)言語を学習しやすい辞典。ブラウザ対応別に並べてある。 お知らせ 2007/02/20 辞典の優先度の基準をブラウザ（とプラグイン）の対応別に変えた。 過去の履歴はこちら 目次 1，この辞典を読む前に 「要素」と「属性」という言葉については、SVGの基礎知識をご覧下さい。 「SVG学習辞典」は、SVG言語を学習するために作られた辞典。ブラウザ対応別に分けて、要素を解説する。上から順に読むと、学びやすいだろう。 辞典をひとまとめにダウンロードしたい>>ZIP形式の圧縮版（svg20050121.zip) この辞典はW3Cの勧告仕様「SVG1.1」と「SVG1.0」に従う。SVG1.1の邦訳板（http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/index.html）を主に参考にしている。 2，索引 初心者は
Scalable Vector Graphics (SVG) 1.1 Specification
SVG 1.1 勧告 日本語版について： この文書は、W3Cが作成し、W3C勧告として公開された "Scalable Vector Graphics 1.1" を日本語に翻訳したものです。 この文書の原文はW3CのSVGサイトにある SVG 1.1 仕様書の 2003年 1月 14日 勧告（ http://www.w3.org/TR/2003/REC-SVG11-20030114/ ）であり、著作権は W3C にあります。 SVG 1.1 仕様書の正式な文書は英語版であり、この日本語版は正式なものではありません。 この翻訳には翻訳上の誤りがあるかもしれませんし、正確性は保証されません。 ただし、この翻訳の二次著作権は翻訳者「広瀬行夫」 （連絡先） が有します。この翻訳のこのページ自身は別サイトなどに存在する複製の可能性がありますが、この翻訳のオリジナルの URL は、冒頭に記した翻
SVG 1.1 仕様 （第２版） 日本語訳
SVG 1.1 仕様 （第２版） 日本語訳 この文書は、W3C が作成し、勧告として公開された "Scalable Vector Graphics (SVG) 1.1 (Second Edition)" を日本語に翻訳したものです。 この翻訳には翻訳上の誤りがあるかもしれませんし、正確性は保証されません。 SVG 1.1 仕様書の公式な文書は英語版であり、この日本語版は公式のものではありません。 この翻訳の原文 URL は： http://www.w3.org/TR/2010/WD-SVG11-20100622/ この翻訳は二次著作物にあたり、原著作権は原著作物に帰するものです。 用語の対訳表や語法その他、この日本語訳に特有の事情に関してはこの翻訳の読み方をご覧下さい。 SVG 1.1 仕様（第１版）の日本語訳, SVG Tiny と SVG Basic の日本語訳, SVG Tiny 1
基本図形
矩形 SVG 文書で実際に図形を描画するには svg 要素の中に基本図形となるデータを記述しなければなりません。 基本図形は、複数の図形をまとめるコンテナとなる要素の子要素として指定されなければなりません。 代表的な基本図形のコンテナ（親要素）は svg 要素となるでしょう。 単純な矩形を描画するには rect 要素を指定します。 rect 要素では x、y、width、height 属性を指定することができます。 x、y 属性では矩形の左上隅の座標を、width と height 属性では矩形の幅と高さをそれぞれしています。 x と y 属性を省略した場合は値 0 を指定したものとみなされます。 SVG が描画する手順は、単純に要素が現れた順番と考えてください。 しかし、基本図形に関連した要素を指定しても、コンテナによっては描画されない場合もあります。 例えば、一連の図形をテンプレートと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress › Error
はてなまとめ（仮）
SVG入門
HTML5で実現できるマルチメディア系機能 ここが違う！サンプルで見るHTML5（4）
