SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL（Syn
先日発売されたiPhone 6 Plusでは従来よりもさらに画面が大きくなったり、Retina iMacの噂があったり、様々な機器でディスプレイの高解像度化が進んでいます。 それらの環境に合わせてピクセルサイズを変えていくつも画像を作るより、いっそSVGのようなベクター形式に移行したい！……でも古い環境が残っててまだまだ使えないんでしょ？ と考えている人も多いのではないでしょうか。 じゃあ実際どれくらいの環境が残っているのだろう？というのを調べてみました。 Twitterや検索から来た人はどうせ最後まで読まないと思うので結論を先に書くと 簡略な結論 2014年10月現在、SVG未対応のInternet Explorer8以下は依然として大きな割合を占めてるものの、iOS・AndroidではそろそろSVGが使える環境が整ってきましたよ という感じです。 PC向けはSVG未対応の環境は26.9
Internet Explorer 11以下でSVGをmax-width: 100% (max-height: 100%)を使って親要素の幅(高さ)に合わせてリサイズしようとすると、SVGのアスペクト比が考慮されないバグがあった。width: 100% (height: 100%)や、SVGではなくPNGやJPEGなら大丈夫。max-*とSVGの組み合わせの時のみなぜか起こるバグ。 Demo: SVG Resizing Bug on ~IE11 デモのSVG画像とPNG画像は共に256x256。IE11以下のみ縦にびよ～んと伸びて(64x256で)表示される。併記したPNG画像ではIE11以下でもちゃんとアスペクト比が維持され真ん丸(64x64)で表示される。ChromeやFirefoxではSVGであろうとPNGであろうとちゃんと維持される。 img[src$=".svg"], img[s
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
m 150 50 c 0 50 35 65 70 30 c -35 35 -20 70 30 70 c -50 0 -65 35 -30 70 c -35 -35 -70 -20 -70 30 c 0 -50 -35 -65 -70 -30 c 35 -35 20 -70 -30 -70 c 50 0 65 -35 30 -70 c 35 35 70 20 70 -30 l 0 50 a 50 50 0 0 1 0 100 a 50 50 0 0 1 0 -100 l 0 -50 /* Apply the animation to the target element. */ /* Hardware acceleration requires a nested element for each axis. */ #target { -webkit-animation: myPathX 13
乗り換え以外で初めてアメリカ行きました。ago（@kyo_ago）です。 すでに先週のこととなってしまいましたが、jsdo.it上でSVG Girlというコンテンツを発表したのでご紹介させていただきます。 （現在IE9のリリースに合わせて英語版のみ公開しています。日本語版は26日の日本語版IE9リリースにあわせて公開を予定しています） SVG Girlって？ SVG GirlはSVGを使ったアニメーション作品で、動画コンテンツの中身をすべてSVGのみで表現しています。 先週開催されたMicrosoft主催のMIX11のキーノートでも発表され（00:08:40ぐらいからご覧いただけます）、大画面に表示されたアニメーションで会場をわかせました。 SVGって？ SVGはテキストで表現されたベクターデータで、XMLで線画情報を保持しています。 ブラウザ上からは通常のDOM API経由で操作すること
Firefox 4 の新機能 HTML の中に直接 SVG を書けるように これまでは XML (XHTML) の中のみ <img> や CSS の背景画像などに使えるように（なる予定） 現在パッチがレビュー中 Beta 6 (次の次) に入る? SVG/SMIL Animation その他 title 要素をツールチップで表示 text 要素の各文字を回転できるように (rotate 属性) HTML への SVG の埋め込み これまで: XML (XHTML) のみ DOCTYPE 宣言が XHTML 1.0/1.1 になっているだけではダメ Firefox が XML (XHTML) として認識できる必要 名前空間の宣言が必要 Firefox 4: HTMLのなかにも埋め込める HTML にも SVG を直接書ける 名前空間接頭辞があると認識されない Firefox 3.6 は ab
Scalable Vector Graphics Scalable 拡大/縮小できる 様々なもの/ことに対して適用できる Vector 絵をオブジェクト（円、四角、テキスト...）の集合として表現 ⇔ビットマップ画像 (画素の集まり) Graphics 図形/画像のための仕様 つまり、XML で 2次元図形を表現するための仕様 SVG の仕様 SVG W3C が標準化 SVG 1.1 (2003年1月) デスクトップ向け (Full) とモバイル向け (Basic/Tiny) SVG Tiny 1.2 (2008年12月) SVG 1.1 Full にない機能も (video/audio、折り返しできるテキストなど) 主要ブラウザのサポート Firefox, Opera, Chrome, Safari, Internet Explorer 9 既存技術との親和性 <svg xmlns="h
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
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 混在でき
英語版 IEBlog の翻訳記事と、日本の Internet Explorer 関連の話題をお届けする、マイクロソフトの公式ブログです。 本ブログの運用終了のお知らせ Internet Explorer ブログ (日本語版) をご覧いただきありがとうございます。 2015年10月1日の「Microsoft Edge Japan... Date: 10/08/2015 IE11でドキュメントモードが使用されるときのフローチャート MSDNライブラリで公開されている「IE11でドキュメントモードが使用されるときのフローチャート」を日本語化したドキュメントを公開いたします。ドキュメントモードを指定する際の参考にしてください。... Date: 05/24/2015 「新しい Internet Explorer への移行セミナー」説明資料 2015年4月16日、弊社品川オフィスで開催した「新しい
The most popular coding language for the web is javascript; so much so that since the advent of HTML5, it has now been officially accepted as the default standard. Javascript has moved beyond a smaller client-side browser-based language to become integrated not just for front-end design, but also for back-end server-side development. As a result there are has been a huge growth of Javascript libra
A Brief Introduction in English JSplash is a conversion tool, that converts SWF movies to javascript. Converted script renders shapes with SVG and rewrites ActionScript dynamically to run on browser's JS Engine. You can see a demonstration at http://www.libspark.org/svn/ruby/jsplash/trunk/client2/demo_20081001.xml Left one is a screenshot of the movie running on JSplash. And right one is running o
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
