便利なツールが登場！ハンバーガーをXに変形させるのも簡単、SVGアイコンをアニメーション化できる無料ツールSVGアイコンは美しく軽量で、非常に便利です。Webサイトでもスマホアプリでも、SVGアイコンを使用している人は多いと思います。 SVGアイコンをアニメーションさせるには、どうしていますか？ 例えば、ハンバーガーメニューを閉じるアイコンに変化させるなど、2つのSVGアイコンをアニメーションで変化させるオンラインツールを紹介します。 使い方は超簡単で、2つのSVGアイコンをぽいっとするだけです。
Rough.js
Create graphics with a hand-drawn, sketchy, appearance Rough.js is a small (<9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. Rough.js works with both Canvas and SVG. Install Install from npm: npm install --save roughjs And use it in
SVGモーフィングアニメーションを自動補完してくれるjsライブラリ『flubber』 | CriativeTips
通常SVGのモーフィングアニメーションといえばCSSで動かすにしろ、jsで動かすにしろ、元のSVGの頂点の数を次のSVGの頂点の数に合わせなければ、スムーズなアニメーションにはならないです。 flubberは簡潔な記述で、その問題を解決し、スムーズなSVGモーフィングアニメーションを実行できます。 flubberのライセンスは、MIT LicenseなのでSVGモーフィングアニメーションを使いたい時は、こちらを使った方がお得そう。 flubberの使い方 flubber 上記Githubページからzipファイルをダウンロードするかnpm installする。 使用したいページに以下を記述(D3.jsを使うのが一番簡潔な書き方になりそうなので、同時にD3.jsも読み込む。topojsonは地図データを使いたい時に任意で読み込めばいい。) また、D3.jsだけでなく様々なライブラリとの互換性も
SVGファイルを自由に編集できる「Boxy SVG Editor」がすごい！しかも無料。
Illustratorなどのベクターファイル編集ソフトを持っていなくても、SVGファイルを自由に編集することができる便利なツールを紹介します。 Boxy SVG Editor 最近では、アイコンやイラストなどにSVGを使用することが標準になりつつあります。フリー素材なども、SVGファイルのみで配布されているケースをよく見かけるようになりました。 SVGは拡大・縮小が自由なベクターファイルであること、表現の幅の広さ、Webとの相性の良さなどメリットがたくさんあります。 SVGの特徴はこちらのスライドの解説が分かりやすいです。 そんな便利なSVGですが、ちょっとSVG画像を編集したい！というときに、IllustratorなどのSVGを編集できるソフトを持っていないと困ってしまいます。 今回は、非デザイナーの方や、普段Illustratorなどのベクターファイル編集ソフトを使わずにデザインをして
SVGの各アプリケーション書き出しをあれこれを調べてみた - デザイナーのイラストノート
このブログのロゴにも使用していますが、最近よく目にするようになったSVG。イラストにはうれしい画像形式なので、とても注目しています。しかし、制作するグラフィックツールによって書き出しの設定が本当にまちまち・・・ということでいろいろ試してみた結果です。 SVGとは Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）で「SVG」。拡大縮小しても荒れない画像形式ということで、ロゴやアイコンなどに使用されるシーンも増えてきました。テキストエディタで編集できたり、CSSで色を変えたり、グラフィックツールがなくても画像を編集することができるのが特徴です。タイムリーにも、先日MicrosoftのOfficeでも、SVG形式が利用できるようになるというニュースもありました。 SVGの利点として、変更の差分が取りやすくGitなどで管理しやすい、ということがあります。例
東京の鉄道路線図SVGを作りました＆パブリックドメインで配布します
東京の鉄道路線図SVGを作りました＆パブリックドメインで配布します ロンドン地下鉄路線図での作図方法に基づいた東京の鉄道路線図を作ったので公開・配布します time2014/12/20 hatenabookmark- Illustratorを使って、東京圏の交通路線図を作りました。 現在、これを書きだしたSVGファイルを以下に置いて、ウェブ上から見られるようにしています。まだマップとして大した処理はしていないので、PCとかだとスクロールが面倒ですが、スマートフォンなどタッチ端末だとそこそこ見られると思います。 なお、AIファイル・SVGファイルはパブリックドメイン(CC0)としますので、配布・改変・販売含め、煮るなり焼くなり好きに使っていただいてかまいません。 railmaps - github どうして描いたの？ 昔からハリーベック氏のロンドン地下鉄路線図がとても好きで、自分もこういうも
透過PNG/GIF画像を大幅に軽量化！SVG画像に変換する無料のオンラインサービス -ZorroSVG
透過PNGは素晴らしいフォーマットですが、そのファイルサイズもなかなかのものです。 透過PNGや透過GIF画像をSVG画像に変換し、JPEG圧縮・品質で軽量化するオンラインサービスを紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。