タグ

svgに関するzerihik0のブックマーク (9)

  • 日記 | ヨモツネット

    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 意味なかったです多分。いまは HTMLSVG 混在でき

  • iPhoneでWebフォントを使ってみた - 強火で進め

    数日前に有ったこちらのイベントでiPhoneiPadでもSVGフォントであればWebフォントが使えると聴きました。 WDE ex -Vol10 『Webフォントの未来』 : ATND http://atnd.org/events/4396 スライド https://docs.google.com/viewer?url=http:%2F%2Fpeople.mozilla.org%2F~jdaggett%2Fwebfontsfuture.pdf ずっと試したかったのですがやっと試せました。こちらで試せます(※アルファベット小文字と数字、一部の記号しか表示されません)。iPhoneまたはiPadのSafariでアクセスしてみて下さい。 以前もiPhoneでWebフォントを試してみた事は有ったのですがTrueTypeフォント、OpenTypeフォントでテストしてダメだったのでその2つに対応してな

    iPhoneでWebフォントを使ってみた - 強火で進め
  • 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とは? SVGScalable Vector Graphics)は、名前のとおりベクター形式の画像フォーマットです。ベクター形式とは、点と点で結ばれた線で図形を表す方法で、アプリケーションでいえばIllustratorがベクター形式を採用しています(Photosh

    HTML5で注目!インラインSVGの使い方 (1/5)
    zerihik0
    zerihik0 2011/05/24
  • SVGを高速化させるためのルール - プラグインレスでSVGを表示する「SIE」開発ブログ

    SVGを高速に表示させるためには SVGを速く、さくさくと表示させるには、いろんな方法があるのですが、ここで、まとめてみましょう。以下のルールに従えば、性能の向上ができると思います。 use要素とsymbol要素は必ず避けること use要素とsymbol要素は、Flashで使われる「シンボル化」と違って、内部でかなり複雑な変換をしています。 動的な変更があるたびに、この複雑な変換をしますので、描画処理の性能が落ちてしまいます。 重たくなりますので、必ず、この二つの要素は避けましょう。 アニメーションの期間は短く設定すること dur="5s"などの設定をよく見かけますが、これはとても遅く感じられます。setInterval(f, 200)も同様です。 目の「まばたき」が125ミリ秒ぐらいなのですから、下手をすれば、まばたきをしても絵が動かない、「もっさりとした」アニメーションができあがります

    SVGを高速化させるためのルール - プラグインレスでSVGを表示する「SIE」開発ブログ
    zerihik0
    zerihik0 2011/05/24
  • SVG女子を90%軽くしたSVG軽量化テク+α #svggirl

    あいつ仕事してないで女の子のイラストばっかりいじってるぞと陰ながら言われていた喜納です。 HTML5で動くSVGアニメーション「SVG女子」がラスベガスでのマイクロソフト基調講演MIX11で公開され、 世界を(いろんな意味で)驚かしてきましたが、 ついに日、日でも公開されました! しかも日版に合わせてアニメーションも長くなっています! こっそりブラウザを英語にして見ていた人も必見です! (神風動画さんによる予告編動画!) 神風動画さんによるハイクオリティアニメーションをSVGで再現すると言う試み、 プログラムについては SVG Girlの公開と内部実装(プログラマーブログ) で担当プログラマーの吾郷が説明していますが、とにかく いかにSVGをきれいに軽くするかが最重要! SVGといえば拡大しても荒れる事の無いベクター形式で、pngよりも軽くつくれたりすることで使われていますが、 今回

    zerihik0
    zerihik0 2011/05/24
  • SVGヤバイ - 最速チュパカブラ研究会

    canvas を苛めていたら気づいたことがあったので書きます。(この記事は2011年5月現在の情報です。あなたがこの記事を読んでいる時点で、より新しくて良い方法が無いか確認して下さい) 基的な話 canvas には、図形を描画する機能だけでなく、描かれている内容を読み取る機能があります。getImageData を使うと、canvas の内容をピクセル単位で読み取って画像処理をかけたりできます。また、toDataURL を使うと canvas の内容を Data URI として出力でき、サーバに送信したりできます。 しかし、この機能にはリスクがあります。例えば、悪意のあるページを開いただけで、社内SNSにしか公開していないあなたの顔写真を canvas 経由で抜き取られるかもしれません。そういう事が起きないように、他のサイトから読み込んだ画像が canvas に描画されている場合(以下、

    SVGヤバイ - 最速チュパカブラ研究会
  • 2011年はSVG元年に。デザイナー大注目の画像フォーマット「SVG」の特徴を一気におさらい。

    MIX11で「SVG女子」が紹介されました! 弊社が制作をさせていただいた「SVG女子」が先日ローンチし、MIX11で大きく取り上げられました。 こちらがその様子です。 日上陸は4/26!「SVG女子」をより楽しむために、まずはSVGについて知っておきましょう。 それでは続きからどうぞ! SVGの気になる疑問に答えます! SVGって何? SVGScalable Vector Graphics)は、XMLによって記述されたベクターグラフィック言語のこと、あるいは、SVGで記述された画像フォーマットのこと。W3Cでオープン標準として勧告されている。 Scalable Vector Graphics - Wikipedia 簡単に言うと、ブラウザで表示できるベクター画像のフォーマットです。 SVGって何がすごいの?どういうところが便利なの? ベクターデータなので拡大しても荒れません。 例えば

    zerihik0
    zerihik0 2011/04/21
  • 【ハウツー】フルブラウザ対応SVGアプリケーション『SVG-edit』の使い方 (1) SVGに普及のきざし | エンタープライズ | マイコミジャーナル

    SVGに普及のきざし A complete vector graphics editor in the browser ブラウザにおける2Dベクターグラフィックの利用にSVGが普及する気配を見せている。SVGは登場してからだいぶ経つが、Webコンテンツにおける主要なデータフォーマットのひとつとはいえない状況にある。 しかしHTML5でHTMLページに組み込むことが可能になること、IE9でサポートされる可能性が出ていること、IE以外の主要ブラウザですでに利用できること、グラフィックアプリケーションでの対応が進んでいること、といった状況があり、今後普及を見せる可能性がある。 SVGがWebに適している9つの理由 IE9のSVGサポート、固い路線 SVGとCanvasのどちらを使うべきか考える SVGを扱うことができるグラフィックアプリケーションは多い。中でも最近注目されはじめているアプリケーシ

    zerihik0
    zerihik0 2010/12/26
  • IE Teamのプログラムマネージャが語るIE9とSVG | Web標準Blog | ミツエーリンクス

    SVG WGのBlogにて、Team ContactのDoug Schepersと、IE TeamでSenior Program Managerに就くPatrick Denglerの対談が公開されていました。MicrosoftSVGについて考えていることや、SVG仕様で改善したいところ、検討中のSVG 2.0など面白いトピックが多いので、すこし紹介します。 Interview with Internet Explorer's Patrick Dengler SVG対応の理由 まずは、DougがPatrickにIE9でのSVG対応について、その理由を尋ねています。 Patrick曰く、MicrosoftはWebの現在とこれからのトレンドについて情報を集めており、製品のプランニングに活かすそうです。IE9のプランニングにおいて、これからのトレンドはグラフィックスと判断し、グラフィックス機能の

  • 1