線や塗りなど描画が美しいSVGアニメーションの作り方
線や塗りなど描画が美しいSVGアニメーションの作り方ロゴやアイコンなどをWebサイトで拡大・縮小しても劣化させたくない場合に使用されるSVG画像。SVGには、gifのように画像をアニメーションさせることができ、gifに比べて滑らかな動きを表現できます。今回はXML形式とCSS3でアニメーションをつけて、ロゴやアイコン、図形などをリッチに見せる方法をサンプル解説とともにご紹介します。 SVGについての詳しい説明や作り方に関しては、こちらの記事をごらんください。 TIPS Vol.34 SVGの作り方 TIPS vol.64 SVGのデータ作成で気をつけるポイント SVGはベクター形式の画像。 jpgやpngなどの形式の画像と違いパスデータで構成されており、そのパスの情報をXML形式で持っているためコード上での編集が可能です。 そのため、XML形式のアニメーションタグを使ってアニメーションをつ
Vivus Instant - inline SVG animation with CSS
Make stroke drawing animation without JavaScript. Simply drag and drop your stroke based SVG and set your options. The result will be animated by CSS and ready to export, and used inline or in a <object> tag. More information If you want to play with, here is the un-animated logo. This is a beta, expect crashes, bananas and explosions (especially on IE/Edge). Also use the amazing SVGOMG to clean y
WEBデザイナーのはじめての「SVG」 | 株式会社WEB企画
皆さん、師走をいかがお過ごしですか？ 今回は前々から試してみたかったSVGについての記事です。 基本予備知識0から色々触ってみて、SVGはどんなことができるのかとSVGの面白いなーと思った点等をまとめてみました！「これからSVG試してみようかな？」と思ってる方(特にWEBデザイナーさん)の参考になれば幸いです。 それではどうぞー！！ SVGとは その前にSVGについて簡単な説明しておきます。 SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、JPEGやPNGのような画像(ビットマップデータ)ではなくイラストレーターで扱うベクターデータです。 その始まりは1998年と意外に古いのですが、ブラウザ対応が追いついておらず、長い間陽の目を見ることがなかったかわいそうなやつです。 SVGのいいとこ SVGがJPEG等の画像と比べていいなーと思
SVGの書き出しおよび表示方法
Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 拡大縮小しても汚くならないベクター画像をサイト上に表示できるSVGを解説します。イラレを使った書き出し方法や、サイト上に表示する方法を超具体的に紹介します。 まえがき この記事を書いてるちょっと前に、このKOTORI Blogをリニューアルしました。 どうせリニューアルするならと、サイト内のイラストは基本全てSVGで書き出そうと思い立ち無事に実現できたので、SVGをブラウザに表示するためにKoToRiが実際に行った事をまとめて記事にしたいと思います。 それから、この記事ではSVGを作成するためにAdobeのIllustratorを使用します。 IllustratorのバージョンがいくつからSVGを書き出せるようになっ
SVGアイコンを実用するために知っておきたい、リンク周りの記述方法
2014年6月30日 SVG 以前書いた「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」という記事でSVGの基本や効率よく使用する方法を紹介しましたが、実際にWebサイト内で使うにはもう少し具体例が必要だなーと思ったのでリンク関連を中心に補足します。基本的な記述方法を覚えて実用化していきましょう！ ↑私が10年以上利用している会計ソフト！ SVGにリンクを貼る SVGにリンクを貼りたい場合、単純に a タグで svg を囲んでもうまくリンクを貼ることはできません。svg タグの中のオブジェクトを a タグで囲み、xlink:href 属性でURLを指定する必要があります。 <svg ... > <a xlink:href="http://google.com"> <path fill="#1E899D" ... > </a> </svg> See the Pen SVG
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
