[B! SVG] pirosikickのブックマーク

SVGアニメーションの現状 | POSTD

SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。同期マルチメディア統合言語、またの名をSMIL（Syn

pirosikick 2015/07/10

SVG

リンク

A Guide to SVG Animations (SMIL) | CSS-Tricks

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Update December 2015: At the time of this update, SMIL seems to be kinda dying. Sarah Drasner has a guide on how you can replace some of it’s features. The following is a guest post by Sara Soueidan. Sara has a knack for digging deep into web features and explaining the heck

pirosikick 2014/10/23

SVG

リンク

https://www.oxxostudio.tw/img/articles/201410/20141010_1_demo.svg

pirosikick 2014/10/23

SVGで波紋

SVG

リンク

SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！

2014年10月8日 SVG Webクリエイターボックスでちょこちょこ取り上げてきたSVG。今回は第四弾！SVGを使ったクリッピングマスクを紹介します。今までは画像に透過PNGを重ねてマスクを表現できましたが、高解像度ディスプレイに対応させたり、マスク自体に効果をつけるならSVGが便利かなーと思います。サムネイル画像にフレームをつけたり、デザインのアクセントとして使えるので、ぜひマスターしてくださいね！ ↑私が10年以上利用している会計ソフト！ SVGのクリッピングマスク基礎 1. 画像を用意それではさっそく試してみましょう！まずは切り抜かれる画像を用意し、img タグで表示します。この時画像に mask というクラスを与えておきます。 <img class="mask" src="images/rose.jpg" alt="Rose"> 2. マスクの型を用意 Illustratorで

pirosikick 2014/10/08

HTML5
SVG

リンク

Glitch Effect on Text / Images / SVG | CSS-Tricks

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Lucas Bebber’s Glitch is a super cool effect. It’s like you’re looking at some text displayed on a progressive scan monitor that has been dropped on the ground one too many times and so the alignment of the pixels is off in weirdly un-even amounts time and space. It’s bonafi

pirosikick 2014/09/16

かっこいい！！

css
svg

リンク

JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT

昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;

pirosikick 2014/05/09

ほうほう

リンク

Inline SVG vs Icon Fonts [CAGEMATCH] | CSS-Tricks

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. If you’re building an icon system for a site, you have some options. If you know the icons need to be raster images, then you’ll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options are usi

pirosikick 2014/04/23

ブラウザサポート以外、SVGの勝ちとのこと

SVG
icon

リンク

SVG MANIAX - CSS Nite After dark7

「文書としてのSVG」の特徴、ブラウザでの挙動の違い、Webページヘの埋め込み方、フォールバックの方法などを紹介します。このスライドを見たあと、Illustrator で書き出した SVG のコードをぜひ眺めてみてください。

pirosikick 2014/04/12

すごくよくまとってる！ありがてえ！

SVG
html5

リンク

SVGラボ

SVG(=Scala ble Vector Graphics) は、Web標準の技術で、多くのブラウザで対応していますが、オーサリング環境があまり普及していないのか、いまいち流行っていません。ビットマップの画像ではなく、ベクタグラフィクスでWebやEPUBの図などを描くのは、セマンティックweb的にも好ましいものです。ここでは、SVGを手軽に取り入れるための実験ツールを作っています。以下のWebツールは、Chrome,Safariでしか動作確認してません、あしからず。簡易SVGライブエディタ SVGを手軽に試してみるための、簡易エディタ。SVGのソースとCSSを書いてその場でプレビューすることができます。基本図形は、Wyswygで入力することができます。基本ソースは手で書くんだけど、座標を拾うのは面倒なのでwyswygがいい、という折衷コンセプトです。入力したデータは、ブラウザごとに

pirosikick 2014/01/27

svg

リンク

アイコン素材。CSS

With different speeds & easings Different size & animation on hover If you enjoyed these effects you might also like:

pirosikick 2013/11/13

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

pirosikick 2013/10/24

svg

リンク

Inline SVG - トラブルとその対策

モックアップやプロトタイプづくりを加速させる。それが SVG。@DIST.4 「Life is Short」Naoki Matsuda

pirosikick 2013/10/16

SVG

リンク

Animated line drawing in SVG

There's a demo you're missing here because JavaScript or inline SVG isn't available. I like using diagrams as a way of showing information flow or browser behaviour, but large diagrams can be daunting at first glance. When I gave talks about the Application Cache and rendering performance I started with a blank screen and made the diagrams appear to draw themselves bit by bit as I described the pr