ここ数日ドット絵からsvgを生成するスクリプトを書いていたのですが，一点気になることがありました．生成するsvgの内容によって描画パフォーマンスに驚くほどの差が出たのです．となればその差はどこから生まれているのかに興味が湧いてきます．そこで今回はsvgの描画パフォーマンスについて検証してみましょう． ※検証コードへのリンクを追加しました． ドット絵をsvgに変換する意義 ドット絵と言えば，かつてファミリーコンピュータを代表とした家庭用ゲーム機におけるグラフィック表現として標準的なものでした．昨今では3dを主体としたグラフィックが主流となってしまいましたが，ドット絵のもつ独特な味わい深さから，今日でも一表現手法として様々な場面で利用されています． さて，本来ドット絵はラスタ画像として扱われることが多いのですが，これをsvgとする意味はあるのでしょうか？実は有るのです． ドット絵の特徴として，
1月が終わってしまいましたね～！春が待ち遠しい、seki です。 今回は、今まで画像として書き出して使っていたピクトグラムなどのパス画像を、フォント形式で吐き出してくれるサービス「icoMoon」のご紹介です。一度自分で作ってみたくてウズウズしてました。詳細は以下より。 作り方について 参考サイト→http://webamb.com/web_service/773.html はい！こちらの記事にとても分りやすく紹介されています！ とりあえずその通りにやってみましょうか。 1. Fireworksでまずは元となるアイコンを作る パスツールを使ってサクサク。よくメニュー周りなどで使えそうなものを作ってみました。 無心で作りすぎたせいであまり統一性がありませんが、参考までに。 塗りは黒ベタで。もし描くのが難しいという方は、フリー配布されているアイコンから持ってきても良いかと。 もちろんイラレで作
ヒント お手持ちのsvg画像からフォントとかパスを抽出してsvgフォント化することができます． フォント情報が見つからなかった場合，パスを抽出します．一つのパスを文字として解釈します． ファイル読み込み時にパスのリサイズや位置の調整を行うことができます．いろいろ試してみましょう． 文字をクリックすると内容を編集することができます．位置の微調整等を行う際にご利用下さい． 余りに複雑なsvgファイルを読み込んだ場合，スクリプトが応答しなくなる場合があります．（このような図形はそもそもフォントとして不適でしょう．） 本スクリプトで生成したsvgフォントファイルは全ての環境で正しく動作するとは限りません．webkit系/operaのブラウザで試すか，下のサービスを使って他の形式に変換して使いましょう． ここで生成したsvgフォントファイルはicomoonでeot,ttf,woff形式に変換できます
SVGを使って、毎回ランダムな色・大きさ・配置でボケ（bokeh）なサークルを作ってみます。 まあやってることは前回の「Kawaii Bubbles!」とあんまり変わりませんけど……。 前回はli要素を使ってやったのですが、背景として使うには適切ではないとかもなーと考えてました。で、SVGなら画像だから別にいいかと思って、今回のを作ってみました。 Random Bubbles Background with SVG デモファイルをダウンロード 始めはCSS BackgroundでSVG読み込ませようとしたりimgで置こうとしたんですが、それだとSVGのスクリプトは実行されないので、HTMLファイルで読み込んでいるJavaScriptでSVG要素を作ってインラインSVGとして追加することにしました。 今回の各ファイルは次のようになっています。 使ったテキストは与謝野晶子の「セエヌ川」です。
jQuery Vector MapsはSVGで描かれた地図です。JavaScriptとの親和性が高いです。 HTML5から標準に取り入れられた技術の一つにSVGがあります。IllustratorなどもSVGで出力できますが、まだまだ利用範囲は広くありません。そこでSVGを使ったデモとしてjQuery Vector Mapsを紹介します。 デモです。右側の地図がベクターで描かれています。 こちらは世界地図。 ドイツのマップ。 ヨーロッパのマップ。マウスオーバー、クリックで色が変わります。 jQuery Vector MapsはSVGデータをそのまま取り込んで表示している訳ではなく、JavaScriptでレンダリング内容を指定しています。その結果マウスオーバーにも対応しているようですが、マップの作成が大変なのは否めません。とは言えズームやパンしても乱れない奇麗な地図というのは使い勝手が良さそう
HighchartsはSVG/VMLを使って描画するJavaScript製のグラフライブラリです。 Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基本として多様なWebブラウザに対応したグラフライブラリになります。 折れ線グラフです。 Ajaxによるデータロード対応です。 グラデーションをかけることもできます。 滑らかな曲線です。 アイコンを貼付ける例です。 プロットのみで。半透明なドットを使っています。 エリアグラフです。 マイナスの値にも対応しています。 積み上げグラフです。 棒グラフです。 左右比較型の棒グラフです。 複数のデータを並べられます。 棒グラフもマイナス値を出せます。 こんな感じの棒グラフも。 さらにドリルダウン対応です。 HTMLのテーブルからデータを
svgplotlibはSVGで各種グラフを描画するPythonライブラリです。 Webシステムを作っていて悩みどころになりやすいのがグラフ表示です。もし利用言語がPythonで、スマートフォンへの対応も考えないといけない時にはSVGでグラフを描画するsvgplotlibが良い選択肢になるかも知れません。 グラフの例です。上にコードが書いてある通り、30度ごとに中心から70の線を引いています。 TeXを組み込んで数式を表示することもできます。 棒グラフです。 ガントチャートです。 折れ線グラフです。二つのデータを表示しています。 円グラフです。タイトルやラベルも表示できます。 対応しているのはTeXシンタックス、円グラフ、棒グラフ、ガントチャート、XYグラフとなっています。SVGなのでインラインに出力して表示できるのが魅力かもしれません。 svgplotlibはPython製のオープンソース
乗り換え以外で初めてアメリカ行きました。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経由で操作すること
あいつ仕事してないで女の子のイラストばっかりいじってるぞと陰ながら言われていた喜納です。 HTML5で動くSVGアニメーション「SVG女子」がラスベガスでのマイクロソフト基調講演MIX11で公開され、 世界を（いろんな意味で）驚かしてきましたが、 ついに本日、日本でも公開されました！ しかも日本版に合わせてアニメーションも長くなっています！ こっそりブラウザを英語にして見ていた人も必見です！ （神風動画さんによる予告編動画！） 神風動画さんによるハイクオリティアニメーションをSVGで再現すると言う試み、 プログラムについては SVG Girlの公開と内部実装（プログラマーブログ） で担当プログラマーの吾郷が説明していますが、とにかく いかにSVGをきれいに軽くするかが最重要！ SVGといえば拡大しても荒れる事の無いベクター形式で、pngよりも軽くつくれたりすることで使われていますが、 今回
Js Vector EditorはWebベースのSVGエディター。保存はできないがXMLを出力する。 Js Vector EditorはJavaScript製のオープンソース・ソフトウェア。HTML5の登場によってようやく普及しそうなのがSVGだ。XMLのベクターフォーマットだ。テキストベースなのでシステムとの相性も良く、自動生成も行えるだろう。 自由に描ける 今後SVGを描くためのライブラリも多数登場してくるはずだ。とは言え流行るか否かはやはり一般ユーザが扱えるかどうかにかかっている。ドロー系ソフトウェアを購入し、インストールしてまでSVGを使いたいと思うだろうか。否、Js Vector Editorを使えば良いのだ。 Js Vector Editorは何とWebブラウザ上でドローを描けるソフトウェアだ。IE6はさすがに無理だったが、対応ブラウザはIE/Firefox/Google Ch
Linux, Open Source, Gadgets, and all things Digital - TechSource ビッグスクリーンで動作するブラウザ、ノートPCで動作するブラウザ、ネットブックで動作するブラウザ、iPad、iPhone 4、iPhone 3GS、そのほかのスマートフォンやタブレットタイプのデバイスなど、Webコンテンツにアクセスするデバイスと条件は多様化し続けている。こうしたすべての環境に対して適切なデザインを実現するのは簡単なことではない。 特に問題となるもののひとつがビットマップ画像。iPhone 4のレティナディスプレイのように高い密度を実現したスクリーンで美しい表示を実現するには、ビットマップ画像は問題が多い。はじめから大きなサイズのビットマップ画像を用意すれば美しさは確保できるが、帯域の無駄が発生する。ここでの解決策のひとつはSVGを採用することに
前回の続きです 横書きに表示されている文字をタテに表示するというのを挑戦してます。 今回は SVG を利用しているので、ほぼ全てが座標で表現されます。 こんな感じ↓ ブラウザで座標を考える場合 (0, 0) が左上になり、それよりも外側はブラウザの表示の外になります。 そこで、「美しい日本語」という文字列を (0, 0) からレンダリングするとこんな感じになります。 単純に考えれば、この文字列を 90° 垂直に回転 させれば、タテに表示されそうですがそうもいきません。 文字列を (0, 0) にレンダリングしてしまったので、そのまま回転させてしまうと、画面の外に出てしまいます。 ちなみに、SVG の回転は transform(rotate) を使うんですが、rotateの引数に rotate(rangle, cx, cy) と X座標(cx) と Y座標(cy) の回転位置を
運営元のロゴ Copyright © 2007-2025 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
gihyo.jpにて、SVGについての全4回の集中連載を始めました。 特集：スタートアップ SVG｜gihyo.jp … 技術評論社 第1回はSVGの基礎知識について。最初なのであまりSVG自体は出てこないですが、そもそもSVGってどうやって扱えばいいのかって話をメインに書きました。 SVGについて勉強初めてから日は浅いのですが、入門的な紹介(特にJavaScriptと絡む部分について)があまり見当たらなかったので自分で書いてみることにしました。 ややネタばらしにはなりますが、参考にしているのはAn SVG Primer for Today's Browsersとid:polynityさんの(PDF)SVG実習マニュアルがメインです。 他には Pike's SVG Tutorial 良くまとまってる。どうでもいいけど、作者は日本に留学中(ただ4,5年前の話なので今は違うと思われる)のカナダ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く