美しいアイコンを簡単に作れる！SVG形式のアイコンフォントシステムを作成する方法
ホームページを作成するときに、最もやっかいなパーツの一つが*「アイコン」*です。 昔はアイコンをとても小さな画像スライスにして、imgタグを使って貼り付けていました。 若干のマージンのズレでレイアウトが崩れたりして、数多くのWebデザイナーたちを困らせたものです。 そこで救世主のように現れたのが、Font AwesomeなどのWebフォントを利用したWebサイト用のアイコンシステムでした。 Webフォントは多くのブラウザでサポートされており、アイコンを、色をつけたり大きさを変えたり影をつけたりと、フォントと同じように扱うことができたので、非常に役立っていました。 そして、近年改めて注目されているのが、SVGを使ったアイコンシステムです。 ブラウザのサポートが改善されているおかげで、SVGもほとんどのブラウザで表示することができるので、インラインSVGは世界中のWebデザイナーの中でも非常に
シンプルなオンラインSVGエディタ・「Method Draw」
任意のWebサイトのJavaScriptの構文をチェックし、最新の構文に書き換えた場合のサイズやパフォーマンスなどを計算してくれるOSSのチェックツール・「ES timator」
もう使ってる？ たった3行で美しいSVGアニメが作れる「Vivus」がスゴい
まるで「見えないペン」で描いているような手描き風のSVGアニメーション。CSSとJavaScriptの知識があれば実装できる、定番アニメーション表現ですが、Vivusならもっと手軽に実装できちゃいます。 90年代初期のBLINKタグから、最新のCSS3トランジションやアニメーションに至るまで、Webページやアプリケーションの要素を移動する機能は、いつも魅力的な目標であり続けています。 今日では、SVGなどのテクノロジーを使えば、「見えないペン」と呼ぶエフェクトを比較的容易に実現できます。閲覧者は、まるで見えないペンで描かれたかのように、1ラインずつ表示される絵を目にします。 そのアイデアは新しいものではありません。よく知られているように、1953年の「Duck Amuck（カモにされたカモ）」にまでさかのぼると、のちにバッグス・バニーだと判明した見えざる手は、周りの世界を何度も消しては描き
Free SVG Converter
This area has been made to save SVG images for later. It's really helpful when you need to compare filters result, or to make a backup. Only you can see them (it's a local save) What is a SVG file ? Svg (Scalable Vector Graphics) is an XML-based vector image format for two-dimensional graphics. The advantage is that you can modify image size without losing quality and detail. This vector format de
SVGを使ったヌルヌル動くアニメーションがすごすぎる 『Full SVG Animation (first Test)』 | 9ineBB
SVGだけで作られています、CSSもjavascriptも使われていません SVGアニメーションだけでこんなことまで出来てしまうとは驚き もちろんSVGということは、これをいくら拡大しようが画質が下がることはありません、もしSVGの様なベクター画像でアニメを作るようになったら、HDでもFullHDでも4Kで一つのソースで全てで映像が荒くならいないようなシステムできたるするのかな？と思ったりしました こういうSVGアニメーションは、なにか作成を手助けするツールの有るのでしょうかね？ 同じように感じた人が結構このPENにコメントをしていて、作者のコメントがありInkscapeを使ってSVGを作成してエディタでアニメーション化したようです 色を変えたものを作った人も居ます 色を簡単に変えれるのもSVGの強みですね
velocity.jsでぐにゃぐにゃSVGを描く - Qiita
<!-- SVGファイルの読み込み --> <object id="logo" data="./logo.svg" type="image/svg+xml"> $(function() { $(window).load(function() { var doc = document.getElementById('logo').contentDocument; var $path = $(doc).find("path"); // pathの長さをcssにセットする関数 function setPathLengthToStyle($obj) { var len; var arr = []; Array.prototype.slice.call($obj).forEach(function(path, i) { arr.push(path); len = arr[i].getTotalLen
外部ファイルSVGをjQueryで操作する方法｜Gimmick log
インラインで書かれたSVGなら通常通りjQueryで操作可能だったのですが、大量のコードが書かれていた場合などはSVGを外部ファイル化して読み込む方が何かと便利です。 その場合はjQueryの記述方法を少しアレンジする必要があります。 デモページのパンダの白い部分、黒い部分をマウスオーバーしてみてください。 白い部分は白のエリア全体の色が変わり、黒はマウスオーバーした部分のみが変わります。 デモページ 今回はIllustratorでSVGに書きだしたものを使用しています。 以下のように、動作を分けるレイヤーごとにまとめて半角英数でレイヤー名をつけておくと、id名としてSVGファイルに継承されます。 デモではパンダの黒い部分にblack、白い部分にwhiteとつけています。 サンプルSVGファイル SVGに書き出す [ファイル]＞[スクリプト]＞[ドキュメントをSVGとして保存]を選択すると
SVGアニメーションの現状 | POSTD
SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL（Syn
滑らかで美しい表現ができる！SVGアニメーションを使ってみよう
更新日: 2020年9月27日公開日: 2015年10月8日滑らかで美しい表現ができる！SVGアニメーションを使ってみよう Airbnb の模写（写経）で登場してくる SVG 形式の画像。Webデザイナー志望の方や単価をあげたいWebデザイナーの方にとっては、「SVG」必須ですよね。 今回は SVG 画像だからできる SVG アニメーション・・・・・・・についてご紹介させて頂きます。 参考: CSS-TRICKS SVG アニメーションは、SVG画像をベースに CSS や JavaScript で動きや装飾を加える表現手法の一つになります。 メリットとしては、軽量でスケーラブルな SVG 画像に好みのアニメーションを加えられるという点。普段 Web を見ている限りではどれがSVGアニメーションで、どれがSVGアニメでないのか区別はつきにくいですが、SEOや美しさ、滑らかさを求めるとSVGア
SVGとjQueryで絵を描いているようなアニメーションを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘
【SVG】raphael.jsを使ったらすんごい色々捗った | ユガラボ
こんにちは、ユーリです！ 少し前、SVGでアニメーションを行う記事を書きましたが、 その後の開発でブラウザ間の挙動の違いや、古いブラウザでうまく動かなかったりと色々と苦労いたしました。 うおー、やはり一定数の古い環境は切り捨てるしかないのかッ…！対応コードを書けば書くほど煩雑になってゆく！ そこに現れた救世主！！ SVG制御用ライブラリ… Raphael.js っ！！ ↓さんぷる 自前のコードだけでの対応に限界を感じ、ライブラリを使用してめんどくさいところは全部吸収してもらうことにしました。 まさにうってつけのライブラリが見つかりました！ それがraphael.jsでございます。 raphael.jsのココがスゴイ！ ■IEやsafqriの古いバージョンでも動作 特に何も意識せずとも、raphael.jsからの処理を使ってSVGを操作すれば、古いブラウザでもしっかり表示され、animate
【備忘録】SVGのpathをJavaScriptでぬるぬる動かしたかった | ユガラボ
こちらは、最近流行りのSVG！gif画像ではありません。 クリックして色を変えるなどの処理がリアルタイムで行えます。 IEやsafariなど一部のブラウザではうまく動作しないかもしれません。ゴメンナサイ。 これをjavascriptで制御しようとしたところ、いろいろ大変だった話。 ※この記事は、SVGが動作する環境の方へ向けて書いています。動かない方はゴメンナサイ。 SVGは、ドットの集まりではなく、パス(点と線)の集まりである為、解像度は無限大です！ また、パスの値は数値で書かれていて、ページが表示されてからでも、パスの値を調節すれば、見た目をぐにぐに変えちゃったりもできます！ ただし、現時点ではブラウザによって対応していない環境があったり、大きさの指定がややこしかったりと、いろいろ課題もございます。 今回は、どうしてもSVGをぬるぬる動かしたい！という案件がございまして、工数はかかりま
css3とjQueryで柔軟に実装できるSVG線画アニメーション
アジケでフロントエンドエンジニアを始めて10か月の小松です。 今回はSVGを用いた線画アニメーションの簡単な実装方法をお伝えします。 実はこの技術は最近リニューアルした弊社ホームページでも利用しました(こちらです)。 画像がリアルタイムで描かれているような表現が可能になり、まさにSVGならではの表現方法と言えます。 目次 ・SVGとは？ ・線画アニメーションを実装するために必要な技術 ・サンプル実装 1. SVGとは？ 「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、SVG）は、XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。」(wikipediaより引用) なんだかよくわかりませんが凄くざっくり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVG-edit
SVG Icon Libraries and Custom Icon Font Organizer ❍ IcoMoon
https://www.scalablegfx.com/
SVGアニメーション - code snippets
SVGのパスをアニメーションにする為のシンプルなスクリプト・「jQuery DrawSVG」
SVG animation tool | SVG Circus
GitHub - merri-ment/lazy-line-painter: Lazy Line Painter - A Modern JS library for SVG path animation
