I want Make full svg websiteHTML5NAGOYA#14のテーマ「フロントエンド入門」でSVGについて発表した内容です。 スライドでは、SVGのいいところをご紹介しながら、使う前に気をつけたいところをご紹介しています。 SVGでつまずいてしまう人の役に立てたらいいなと思います。
Snap.svg - The JavaScript SVG library for the modern web.
Why SVG (and Snap)? SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM. Modern features for modern browsers Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking
[JS]手書き風のシーケンス図をウェブページに簡単に設置できるスクリプト -JS Sequence Diagrams | コリス
Demo 3 JS Sequence Diagramsの使い方 Step 1: 外部ファイル JS Sequence Diagramsの実装には、「Underscore.js」と「Raphaël」が必要です。 <script src="raphael-min.js"></script> <script src="underscore-min.js"></script> <script src="sequence-diagram-min.js"></script> Step 2: HTML シーケンス図を描画するエリアを確保します。 <div id="diagram"></div> Step 3: JavaScript スクリプトでテキストを書き、実行します。 <script> var diagram = Diagram.parse("A->B: Message"); diagram.dra
円や多角形をランダムに配置する背景をSVGで作る その2
「円や多角形をランダムに配置する背景をSVGで作る」の続きです。 もうちょっと使いやすくなるように練習を兼ねてやってみました。 GPBG.js サンプル 1 GPBG.js サンプル 2 GPBG.js サンプル 3 GPBG.jsのJavaScriptファイル 前のはインラインSVGを作ってbodyの最後に入れていましたが、今回はstyle要素を作り、指定したセレクタの背景画像としてData URIにしたSVGを指定するようにしました。 一番簡単に使うと、こんな感じになります。 <script type="text/javascript" src="gpbg.js"></script> <script type="text/javascript" src="script.js"></script> </body>// script.js の中身 (function () { if (wi
SVG関連の操作・アニメーション処理をシンプルにかける「SVG.JS」:phpspot開発日誌
svg.js - A lightweight JavaScript library for manipulating and animating svg SVG関連の操作・アニメーション処理をシンプルにかける「SVG.JS」 ちょっと、SVG苦手だわ、と思った方はこうしたライブラリでトライしてみるのもいいかもしれません。 次のような分かりやすいコードでSVGを操ることが可能になります ライブラリも5KB程度なので、簡単な画像を描画するのならこちらでブラウザ上で描いちゃったほうが軽そうですね。 デモページ 関連エントリ SVGグラフィックを手書き風アニメーションさせられる「Lazy Line Painter」 SVGを使った高度なアニメーションを実現できるライブラリ「BonsaiJS」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」
Learn all about the Latest SEO News - 2 Step Media
SEO is a very difficult and constantly changing task and so learning all about the latest methods that actually work is a very wise move and that is where this site comes in as we have blog posts on all of the latest SEO developments. SEO has changed a huge amount in the last few years, it used to be so easy to rank a web site with low quality links and crappy content but now you need quality all
Swiffy | Google Developers
As part of our transition of display ads to HTML5, the Swiffy Flash conversion tool is no longer available. We will continue to serve the Swiffy runtimes, so any files you have already converted will continue to play. Today more consumers are using the web in HTML5 compatible environments than Flash-compatible environments. In order to reach as large an audience as possible, we encourage everyone
はじめてのRaphael (1) : お絵かき編 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） SVGが少しずつ市民権を獲得し始めている昨今のWWWですが、 Raphaelとは、そのSVGをコントロールするのに非常に便利なライブラリです。 公式によさげなチュートリアルがなかったのもあり、 今回はその使い方をまとめてみようという試み。 Raphaelとは RaphaelはSVGで図を描画するためのフレームワークです。 正しくは「Raphaël」と書きますが、 毎度めんどくさいのでRaphaelでいきます。 なにをしてくれるのか SVGが動かないクラシックなIE環境の為に、VMLでも出力してくれます。 イベントやアニメーションまわりも簡単に実装できるようになっています。 特に助かるのがVML対応。 旧ブラウザをサポートしなければならないケースには、 ぜひとも導入したいライブラリですね。 極めてシンプルな例 Rraphaelで図
HTML5のInline SVGをJavaScriptで操作 (1/5)
HTML5で手軽に扱えるようになったSVG（Scalable Vector Graphics）。前回は、Inline SVG（インラインSVG）で基本的な図形を描く方法を解説しました。今回は、HTML5文書内に埋め込まれたインラインSVGをJavaScriptで制御します。 JavaScriptでSVG要素にアクセスする 最初に、制御対象となるSVGデータを作成しましょう。JavaScriptで制御したいSVG要素にはid属性を記述し、ID名を付けておきます。通常のHTMLタグ（要素）にID名を指定する場合とまったく同じです。たとえば<rect>（四角形）を制御したい場合は以下のように記述します（ID名は任意）。 <svg> <rect id="myBox" x="0" y="0" fill="red" width="100" height="80" /> </svg> ID名を指定してお
SVG + VMLのJavaScriptグラフィックスライブラリ·Raphaël MOONGIFT
SVGは技術的に注目を集めていても実際に利用されている場面はそう見かけない。ブラウザ上でドローを描くだけであれば、画像で十分という話であるし、アニメーションを必要とするならFlashがあるからだ。かつIE6をはじめとするレガシーなブラウザで動作しないという最大の問題がある。 だがFlashに比べれば扱いやすく、テキストベースなのでシステムとの親和性も高い。また画像とは違いインタラクティブな動作ができる。そんなSVGの利用を推進するのがRaphaëlだ。 今回紹介するオープンソース・ソフトウェアはRaphaël、JavaScriptのグラフィックスライブラリだ。 RaphaëlはSVG、VML、JavaScriptを使ったグラフィックスライブラリだ。グラフやSVG、様々なオブジェクトを描き出すことができる。もちろんJavaScriptによって刻々と変化するアニメーションやマウスの動きによって
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
真面目なアニメーション (html5j 2013, Web Animations)