Icons - Material DesignMaterial Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
How to Create an Interactive Animated SVG Drum Kit
A tutorial on how to create an animated and interactive SVG drum kit with GSAP and jQuery. Today we’re going to create an animated SVG drum kit that can be played by clicking, tapping or using your keyboard, and that can also be programmed to play by itself! We’ll be making use of GreenSock’s TweenMax animation library, jQuery and the <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element
面倒なSVGのパスを簡単に作成できてしまう便利ツール -SVG Path Builder
面倒で複雑なSVGのパスでも簡単に作成できてしまう便利ツールを紹介します。 オンラインでもローカルでもどちらでも利用できます。
SVGアニメーションの現状 | POSTD
SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL（Syn
こんなやり方があったとは！IllustratorやSketchでWebデザインをはじめる前に必ず読んでおきたい -ベクターデータの教科書
最近のWebデザインに、ベクターデータの存在は欠かせないものになってきました。 アイコンやロゴなどをSVGで使用したり、Webページやアプリのデザイン・UI設計といった制作のワークフローをベクターで作業している人も増えてきました。 今までPhotoshopでデザインをしていた人には、IllustratorやSketchを使うとそんな事もできるのか！ と目からウロコかもしれません。 IllustratorのWebデザインならではの使い方、Sketchの詳しい使い方を知りたい、SVGの効果的な使い方をマスターしたい、そんなWeb制作者に絶対オススメの一冊を紹介します。 IllustratorやSketchで扱うベクターデータには、マルチデバイス対応のWebデザイン・実装にとって大きなメリットがたくさんあります。
SVGを使用してる企業・団体のサイトを22ヶ国、160件以上調べてみた - 聴く耳を持たない(片方しか)
このダイアリーでは過去に何度かSVGの記事を書いているのですが、それに対する反響で SVGって未だに使ってるところを見たことが無い とか いつになったら使えるようになるのか 永遠に普及しなさそう みたいな意見をよく見かけます。 そうした反応にカチンときた……というほどではないのですが、納得してもらうには実例を挙げて反論するのが分かりやすいだろうな、と考えてSVGの利用状況を調査してみました。 かといって個人サイトの利用例を挙げるだけでは説得力がないでしょうから、著名な企業や団体でのSVG採用事例をリストアップしてみた次第です。 そしてもう一つの動機として、Webサイトの制作現場でSVGの導入を検討する際に、同僚や上司、またクライアントからの同意を得る・説得する手段としても、既に実際に利用している企業や団体を提示できれば話を進めやすいだろうな、……といった狙いもあります。 例えば あの有名な
Schooのデザイナーに聞いた、Webサイト制作に使えるフリーアイコン5選 - 2015/02/06 [Schoo]
Webサイトやアプリの制作の際に欠かせないものの１つに”アイコン”があります。しかし、 「自分で作るのは大変…。」 「お金をかけたくない！」 「プロは、どうしてるのかな…？」 こんな悩みを抱えている人も多いはず。そこで今回はSchooのデザインを手がけているデザイナーが実際に使っているおすすめのフリーアイコンサイトを5つご紹介します♪ ■目次 1.Font Awesome 2.ICON FINDER 3.flaticon 4.ヒューマンピクトグラム2.0 5.IcoMoon 1.Font Awesome スクーのサイト内のいたるところで使用している、Webフォントのアイコンサイト。 こちらのサイトのWebフォントのアイコンを使えば、画像を作らなくてもサイトにワンポイントで配置できます。 又フォントとして利用できるため、サイズや色をCSSで変更することが可能です。 2.ICON FINDER
![Schooのデザイナーに聞いた、Webサイト制作に使えるフリーアイコン5選 - 2015/02/06 [Schoo]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7e5e78173c1b358f770e033408afa8394bd779f/height=288;version=1;width=512/https%3A%2F%2Fs3-ap-northeast-1.amazonaws.com%2Fi.schoo%2Fimages%2Farticle%2Fdesign%2Fwdkj25_7.png)
SVGを使いこなすための便利ツールいろいろ
2015年1月28日 SVG, 便利ツール SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術。高解像度ディスプレイでもくっきりはっきり表示できるので、近年海外サイトを中心に見かける機会が増えてきました。SVGについてはWebクリエイターボックスでも何度か取り上げてきたので、耳にしたことのある方も多いかと思います。今回はそんなSVGを使いこなすための便利なオンラインツールやJavaScriptなどを紹介します。SVGってなんぞや？という方は、過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」をご覧ください！ ↑私が10年以上利用している会計ソフト！ ラスター画像をSVGに変換 Vector Magic Vector MagicはJPEG、GIF、PNG形式の画像をベクター画像に変換し、EPS
Evil Icons – すっきりしたデザインのSVGアイコン集
Web Fontが人気です。フォントを読み込めばかなり昔のブラウザであってもカスタムフォントが利用できます（IEにおいてはIE4から使えます）。難点としては作り手のスキルが必要ということでしょうか。 もう少し手軽に画像ではないアイコンを使いたければSVGを使ってみるのはいかがでしょう。今回はその一つEvil Iconsを紹介します。 Evil Iconsの使い方 Evil IconsはRails/Sinatraそしてnodeと組み合わせて使えるようになっています。その他、Gruntで使うこともできます。Gulpはまもなくのサポートとのことです。SVGはベクターなのでサイズも色も自由に変更できるのが利点ですね。 Evil IconsはSVG製、MIT Licenseのオープンソース・ソフトウェアです。 Evil Icons outpunk/evil-icons
WEBデザイナーのはじめての「SVG」 | 株式会社WEB企画
皆さん、師走をいかがお過ごしですか？ 今回は前々から試してみたかったSVGについての記事です。 基本予備知識0から色々触ってみて、SVGはどんなことができるのかとSVGの面白いなーと思った点等をまとめてみました！「これからSVG試してみようかな？」と思ってる方(特にWEBデザイナーさん)の参考になれば幸いです。 それではどうぞー！！ SVGとは その前にSVGについて簡単な説明しておきます。 SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、JPEGやPNGのような画像(ビットマップデータ)ではなくイラストレーターで扱うベクターデータです。 その始まりは1998年と意外に古いのですが、ブラウザ対応が追いついておらず、長い間陽の目を見ることがなかったかわいそうなやつです。 SVGのいいとこ SVGがJPEG等の画像と比べていいなーと思
SVGとjQueryで絵を描いているようなアニメーションを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Get Waves – Create SVG waves for your next design
Animated SVG Drum Kit | Codrops
SVG、Canvasを使った次世代のテキストホバーエフェクト集:phpspot開発日誌
HTML5 と SVG で考える、これからの画像アクセシビリティ
テキストをCSSやSVG等でアニメーションさせるやばいサンプル集:phpspot開発日誌
よくあるWebデザインにSVGで一手間加え、さまざまな要素がアニメーションで楽しくなる -Elastic SVG Elements
IDEA * IDEA
SVGを使ってウェブページにかっこいいエフェクトを与えるチュートリアルのまとめ