カンタンにSVGでグラフを実装出来るプラグイン「CHARTIST.JS」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、はやちですよ₍₍ (ง ˘ω˘ )ว ⁾⁾ 今回もSVGネタなのですが、グラフをカンタンに描画できるライブラリをご紹介いたします( ˘ω˘)☞三☞ｼｭｯｼｭｯ 導入方法 タスクランナーでのインストールはこちら。 npm install chartist –save 実装方法 実装方法ご紹介します٩( ᐛ )و ↓表示する場所は、ささっとdivで用意します( ˇωˇ)☝ <div class="wrapper"> <div class="chart"></div> <div class="chart2"></div> </div> ↓基本的な実装はこんな感じ。 //ドーナツ型のグラフ let chartBig = new Chartist.Pie('.chart', { series: [91, 3, 6], //数値の設定 labels: ['BigChart',' ','
SVGのキャラクターを parallax.js で動かしてみる ｜ Tips Note by TAM
先日弊社TAMサイトをリニューアルしましたが、ご覧いただけましたでしょうか？ サイトリニューアルにあたり404ページでTAMくんの顔をマウスの動きに合わせて動かすというものを作ったので、今回はそれを紹介したいと思います。 デモを見る Parallax.js 使用したのはjQueryプラグインでもある「parallax.js」。 パララックスというと少し古い感じもしますが、これはカーソルを動かす（スマホだと傾ける）ことで要素に奥行き感を出すことができるので、ちょっとしたアクセントとして使うのもオススメです。 公式サイト http://matthew.wagerfield.com/parallax/ github https://github.com/wagerfield/parallax/ 実装 キャラクターをSVGで用意し、ソースを見て動かしたいパーツの位置（今回は目、鼻、口）を確認します
JavaScript不使用！ SVGを使ってCSSでチェックボックスを作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、はやちですよ₍₍ (ง ˘ω˘ )ว ⁾⁾ 今回は、以前SVGのアニメーションでご紹介させていただきましたこちらのアニメーション（↓）を使ったチェックボックスの作り方を、ご紹介いたします( ˇωˇ)☝ 実装方法 まずは実装方法を紹介します( ˇωˇ)☝ マークアップ SVG をインラインで label 内に入れます( ˇωˇ)☝ <ul> <li> <input type="checkbox" id="check-00" /> <label for="check-00">Drawing a check box <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-ba
外部SVGファイルを非同期で読み込み、インラインのSVGスプライトとして利用する | UNORTHODOX WORKBOOK | Blog
SVGスプライトを外部ファイルとして読み込みたくて、色々と調べたり試してみたりしていたのですが、外部SVGをAjaxで非同期読み込みするという方法が一番しっくりきたので、その方法を紹介します。 SVGスプライトといっても、CSSで背景画像として表示させるものではなく、HTMLにインラインで表示させるためのSVGスプライトになります。 何もしなくてもuseタグのxlink属性で外部SVGファイルを参照できることは知っていたのですが、IE9+でサポートされてなく、またEdgeでも怪しいとのことだったので、その方法は利用してきませんでした。ポリフィルを使ったフォールバックもあるようですが、そのためだけのフォールバックも何だか気持ちが悪かったので。。 今までやっていた方法 これまではbodyの開始タグすぐ下にsvgタグを置き、その中へ画像ごとにsymbolタグで囲み直したsvgをずらーっと並べus
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
[HTML5]Raphael.jsを使用してIE上でもSVGを使う
前回の記事でもお伝えしましたが、IE8上ではSVGが動きません。IE9上でもanimateがうまく動きません。そこでRaphael.jsというjavascriptのSVGフレームワークを使うことにしました。このフレームワークは、SVG対応しているブラウザにはSVGで表示させ、SVG対応していないブラウザにはVMLという旧ベクター表示形式で表示してくれるスグレモノです。 これでIEでもベクターアニメーションが利用できるんです。早速利用してみましょう。 使ってみる Raphaël—JavaScript Library こちらからjsはダウンロードできます。使い方は簡単で、javascriptを読み込んだ後、ページ内の要素に関数を使用してオブジェクトを埋め込むだけです。 今回はpath関数を使用してIllustratorから出力した少し複雑なSVGを読み込ませてみました。 いかがですか？きち
かっこいい黒のリアルなカーテンっぽい背景画像をSVG描画できる「waterpipe.js」:phpspot開発日誌
Smoky Backgrounds Generator - waterpipe.js かっこいい黒のリアルなカーテンっぽい背景画像をSVG描画できる「waterpipe.js」。 次のような超カッコいい背景画像をパラメータをカスタマイズしてリアルに描画できます。 なんかCMっぽいですが、これをjsでやっちゃってるのがいいですね。 関連エントリ フラットデザインがクールな円グラフ描画jQueryプラグイン「Pie Chart」 水量・温度・メーター等、産業用のグラフを描画できるjQueryプラグイン「Industrial.js」 ベクターでレスポンシブな地図を描画できる「jQuery-Mapael」 フライトインジケータ表示用jQueryプラグイン「Flight Indicators」
見た目のクオリティはそのままで、SVGファイルを大幅に軽量化する便利ツール -SVGO GUI
当ブログでも最近、SVGの素材を紹介することが多くなりました。そんなSVGファイルから不要なデータを取り除いて軽量化するアプリを紹介します。 ↓は、今日紹介したアイコンのSVGを軽量化したものです。 ほとんどのファイルが50%以上軽量化されました。 SVGO GUI SVGO GUIは、Node.jsベースのSVG軽量化ツール「SVGO」をGUIで操作できるようにしたもので、Windows用とMac用が揃っています。 使い方は非常に簡単で、Mac用で説明します。 ダウンロードしたSVGO GUIをダブルクリックして、起動します。 SVGO GUIの起動画面 あとは、このパネルにSVGファイルをドラッグするだけでOK！ ※軽量化は元ファイルに上書きするため、元ファイルが必要な時はファイルをコピーしてから利用してください。 SVGファイルの軽量化、完了！ 軽量化しても、グラフィックのクオリティ
Trianglify
About My name is Quinn Rohlf, and I'm a roaming engineer/designer based in the western United States. Trianglify is an open-source library I wrote to generate low-poly style patterns by combining a Delaunay triangulation with some nice colors. It was originally released in April of 2014. It has a sibling project, Trianglify.io, that provides a user-friendly GUI for the library and helps fund libra
次のプロジェクトで使いたい、CSS3からSVGまでアニメーションを実装するスクリプトのまとめ
最近のウェブやスマフォのページで使われている効果的で面白いさまざまなアニメーションを実装できるスクリプトを紹介します。 スクロールに連動してさまざまな要素がアニメーションで表示されたり、ページを表示する時にふわっとさせたり、画像にSVGでブラーをかけてテキストを載せたり、物理演算エンジンで慣性を楽しんだりなど、デモを見るだけでもかなりいい刺激がもらえるスクリプトばかりです。 Agile Agile -GitHub SVGやWebGLを使用せず、JavaScriptでCSS3アニメーションを生成するライブラリ。デスクトップの各ブラウザ対応だけでなく、スマフォやタブレットにもパフォーマンスが最適化されています。キーフレームやトゥイーンを使ったアニメーションが得意です。
seen.js
source map | unminified javascript | full coffeescript seen.js has no dependencies. Licensed under Apache 2.0 To see what is new in this version, read the release notes. Demos Hello, World! Materials gallery Noisy Wave Patch Noisy Sphere Same Scene, Canvas vs. SVG Same Scene, Multiple Angles SVG Masks and Effects Text Depth of Field Audio Equalizer N-Body Gravity Simulation Mocap-Driven Skeleton 2
SVG と背景色を使ってサイズやカラーが自在な汎用性のあるアイコンボタンを作る
SVG によるアイコンデータと CSS による背景色の指定を組み合わせてサイズやカラーを自在に変更可能なアイコンボタンを作るお話。あわせて主要 Web サービスのロゴデータを SVG で用意する方法や注意点なども。 透過 GIF や PNG 画像に背景色を組み合わせることでアイコンボタンのカラーバリエーションを簡単に作るっていうやり方は昔からありますが、これを SVG （Scalable Vector Graphics） でやることでサイズ変更にも対応しやすいやつを作るっていうお話。 手法的には目新しいことは何もありませんが、この前この Blog のデザインをリニューアルしたときに視覚的に左側サイドメニュー上部 （スマートフォン表示だと隠れてると思いますが） にある 「Follow」 メニュー部分で使ったので紹介。 やってることは簡単です。白抜きにしたい部分をそのまま白色、背景は透過するよ
SVGMagic
div要素の背景画像としてSVGを使用します。 SVGMagicの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="SVGMagic.min.js"></script> </head> SVG画像をPNG画像に変換するのには、PHPを使用しています。 converter.php（ダウンロードファイル一式に含まれています） SVGMagic.min.js内では、配布元のサーバーのファイルを参照してい
SVG Filter & CSS3 を使いグレースケールやぼかしを利用する方法 | Stronghold Archive
こんにちは Honma です。今回はデザインする際に役立ちそうな SVG (Webkit は CSS3) を使った、Grayscale Effect と Blur Effect (ぼかし) の利用方法です。記述はすごく簡単！ HTML <!– Grayscale Effect –> <img id=”grayscale-effect” src=”URL” alt=”” /> <!– Blur Effect –> <img id=”blur-effect” src=”URL” alt=”” /> /* Grayscale Effect */ #grayscale-effect { -webkit-filter: grayscale(100%); filter: url(“data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/sv
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
このクオリティはスゴイ！JPEG, GIF, PNG画像をベクターに変換する無料のオンラインサービス -PicSVG
イラレ作成からWeb書き出しまで