グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
SVGでプログラマブルな書体を作る話｜dwango creators' blog（ドワンゴクリエイターズブログ）
こんにちは、2016年度にデザイナー職で新卒入社しました@Ln_northです。新卒研修も終わり、現在はOJTのもとで生放送チームにジョインしています。 さて、Googleのロゴが変わっていくらか経ちますが、このロゴはSVGを使うと少ないデータ量で表現できるというニュースが話題になりました。 この記事を見た際に、厳密には視覚調整が入るはずなので、正確に幾何的図形とは一致しないだろうという感想も抱きました。しかし、SVGで文字を生成するということには非常に興味を持ちました。今までにも、文字のアウトラインを使ったアニメーションや表現はありましたが、文字自体を生成するというものは見たことがなく、そしてSVGはJavaScriptで操作することができるため、書体の印象が動的なフォントを作ることができると考えたからです。 どういうことかというと、例えば であるとか、 といったことができるかもしれない
svg.jsとsvg.draggable.jsを使って、SVGタグ内のオブジェクトをドラッグ＆ドロップさせてみる - Qiita
svg.jsとsvg.draggable.jsを使って、SVGタグ内のオブジェクトをドラッグ＆ドロップさせてみるSVG この記事は「SVG Advent Calendar 2014」の7日目の記事です。前日の記事は_tanshioさんの「IEにも対応したレスポンシブSVGの作り方」でした。 以前、「HTML5のcanvas内の複数の画像をドラッグ＆ドロップさせてみる」で書いた内容と同じことをSVGで試してみたくなったのでまとめました。 SVGを操作するためのライブラリはRaphaëlやSnap.svgが有名ですが、今回はsvg.jsとそのプラグインであるsvg.draggable.jsを利用しました。 svg.jsは、minifyされたものだと11.8KB 程度と非常に軽量で、ドキュメントも見やすく、今回触ってみてとても扱いやすいライブラリだと感じました。 実際のコードはこんな感じで、オブ
モダンWeb
誕生から四半世紀を経てWebはその姿を大きく変えています。かつてのWebは単に科学技術文書を公開するためだけの仕組みでしたが、現在ではマルチメディア、ショッピング、アプリケーション、ひいてはオペレーティングシステムさえも包含する技術へと成長しています。このようなWebの最新技術動向を鋭く切り取り、わかりやすく解説したのが本書です。近年脚光を浴びているレスポンシブWebのためのCSSをはじめ、位置情報やバッテリーの状態を取得するためのAPI、プラグインに頼らないマルチメディア再生などを紹介します。さらに、近い将来に普及するであろう注目のWebコンポーネント技術についてもいち早く解説します。 目次 賞賛の声 まえがき 1章 Webプラットフォーム 1.1 用語について 1.2 想定される読者と、読者が知っておくべきこと 1.3 用語の再確認 1.4 HTML5とは 1.4.1 HTML5のひな
SIE - ハイパーテキスト形式の画像用ライブラリ
Download SIE 33 sie33.zip (ZIP 357.3 KB) Requirements Edge, Internet Explorer11+, Mozilla Firefox44.0+, Opera33.0+, Safari3.0+ or Google Chrome3.0+ A HTTP Server Soft What's SIE The 'SIE' is an Open Source rendring engine written in JavaScript to display a W3C standard Scalable Vector Graphics (i.e. SVG). SVG is a language for drawing a vector graphics like HTML. It's used in Inkscape, Illustlator
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
W3C チュートリアル
