JS+SVGで液晶画面風の表示をつくる | tech - 氾濫原
液晶風の画面は決まった形をオン・オフするだけなので、canvas にコードで描くのは大変なだけで無駄が多い。かといってセグメントを1つ1つ画像にわけて座標指定で配置していくのも面倒くさい。 と考えていくと SVG を埋めこんで、SVG の要素を JS で操作するのが効率が良い。ワークフローとしては SVG の作成と JS の実装で綺麗に境界を作ることができる。 Inkscape Inkscape の良いところは以下の点 XML エディタが UI と連動している レイヤーやオブジェクトを選択すると該当箇所にエディタ上で跳べる 構造をコントロールしやすい 画像を編集するというより SVG の XML を編集するUIというイメージ Inkscape でオブジェクトに名前をつけると、svg 上では inkscape:label 属性に入る。これを利用して JS から操作すれば Inkscape で
SVGをdata URI schemeに変換するとき文字化けしないように必要なこと - 聴く耳を持たない(片方しか)
現在、パソコン、スマートフォン、タブレットと様々な画面サイズの情報機器が世の中に溢れています。そうした端末に適切に対応するには画像も色々なサイズのものをいくつも用意する必要があるわけですが、SVGのようなベクター画像であればそうした手間も少なくて済むのがメリットです。 例えば、AppleのサイトではロゴにSVGを使っています。 https://www.apple.com/jp/iphone/ そしてそのロゴを調べてみるとSVGをdata URI schemeで指定しているのが分かりますね。 data URI schemeはHTML文書内に記述できるため、画像ファイルのリクエストを減らして素早く画面表示が行えるという利点がありますから、世界中から多くのアクセスを集めるAppleのサイトで採用されているのでしょう。 こうした使われ方も多いことから、data URI schemeを簡単に作成でき
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
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Scalable Vector Graphics (SVG) 1.1 (Second Edition) W3C Recommendation 16 August 2011 This version:http://www.w3.org/TR/2011/REC-SVG11-20110816/Latest version:http://www.w3.org/TR/SVG11/Previous version:http://www.w3.org/TR/2011/PR-SVG11-20110609/Public comments:www-svg@w3.org (archive)Editors:Erik Dahlström, Opera Software <ed@opera.com>Patrick Dengler, Microsoft Corporation <patd@microsoft.com>A
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
