SVGで図形やアニメを描画してみよう
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう グループ化・リンク・変形 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。前回はSVGの基礎編として、SVGドキュメントの基本的な書式と基本図形の描画方法、各種スタイル指定の方法などを解説しました。 今回はその続きとして、変形やアニメーション、フィルター、JavaScriptによる制御といった機能を取り上げていきます。例によって多数のサンプルとともに解説していきますが、Webブラウザによっては一部が動作しません。確実にサンプルを見たい方は、FirefoxまたはOperaの最新版をご使用ください。 ■ 図形のグループ化 まずは前回取り上げられなかった重要な基本機能として、「図形のグループ化」を解説します。SVGのようなベクトルグ
10分でわかるSVG 基礎編
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■ XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）
SVGを使うときに知っておくといいことをまとめました - Qiita
アイコンやロゴ、見出しやイラストなど、写真以外の画像ではSVGを使うことが多くなりました。 PNGのように荒れたりしないし、使い方によってはCSSで変更することができるので便利です。 ただ、PNGと違ってSVGは汎用性が高い分、作り方や使い方で気をつけることがたくさんあります。正直まだ把握しきれていないところもあるんですが、社内への共有も含めてドキュメント化しています。 もし、「ここが間違ってるよ」とか「こうしたほうがいいよ」みたいなことがあれば、Qiitaのコメント欄やGitHubのIssueをいただけたらとても嬉しいです。 SVGの作成時に注意すること サイズ削減のためにすること 「オブジェクト」→「パス」→「単純化」でアンカーポイントの数を最小化する（見た目を損なわない程度に留めます） 非表示にしているレイヤーを削除する（非表示レイヤーも書き出されます） 1回しか使わないシンボル図形
vivus.js - svg animation
vivus, bringing your SVGs to life Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. View on GitHub Delayed Every path element is drawn at the same time with a small
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
UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【30秒で完成】簡単かつ一瞬でイラストをイイ感じに水玉柄に色塗りしてしまう方法 | Linustock(ライナストック)