appgiga.jp2024 著作権. 不許複製 プライバシーポリシー
SVGを描くJavaScriptライブラリ - yuw27b’s blog
この記事は、SVG Advent Calendar 2015 - Adventarの15日目の記事です。 チャートやグラフ用のJavaScriptライブラリはどれがいいんだろう？ 2015年は「Ajaxで取ってきたデータを、SVGのチャートやグラフにして表示する」という作業をわりとたくさんやりました。 実装方法もいろいろやっていて、 ピュアJavaScript＋テンプレートエンジン d3.js Snap.svg Raphaël などなど・・・。 小規模サイトだったり、公開範囲の限定されたサイトだったり、という事情に甘えて、色々なものに手を出した感じですね（笑）。 ピュアJavaScriptは、まさに13日のこちらの記事（気づいて築く: パイチャートのSVG仕立て 〜アニメーションを添えて〜）みたいなことを四苦八苦しながらやってました。 どれがベストかは、ケースバイケース、だとは思いますが、
ほんのちょっと高度なSVGスプライトの使い方
当ブログではちょくちょくSVGについて書いていました。 （といっても、ほぼ月一更新なので、前に書いたのは1年くらい前かもしれませんが……） みなさま使ってらっしゃいますでしょうか？ 今回は「ほんのちょっと高度なSVGスプライトの使い方」と銘打って、『グラフィックのモジュール化』を行うための基礎的な考え方と方法をお伝えします。 ロゴにこそ、使ってみようSVGスプライト このブログでもロゴ（というレベルのクオリティではありませんが…）をSVGで表示させています。 また、お気付きの方もいらっしゃるかと思いますが、このトピックス「Web Resource」とその他のトピックスでは使用しているロゴの形状が異なっています。 しかし、これらはすべて「一つのSVGスプライトファイル」の中の「同一データ」です。 アイコン等をひとまとめにして、httpリクエストをみだりに増やさず、かつ非常に軽量（これだけのグ
SVGの基本＆活用法。SVGのメリットと事例を基礎から学ぶ。
パソナテックさん主催コミュニティ「SHIBUYA☆LABU」のイベントの際のスライドです。 https://shibuya-labu-pt.doorkeeper.jp/events/30744 現在Web制作の現場において、コーダーとしてお仕事されているみなさん、今後のご自身のキャリアマップは描けていますでしょうか？ 専門的なフロント知識を活かして技術を極めていくのか、それともディレクターとしてキャリアを積んでいくのか悩まれている方も多いかと思います。 もしディレクターへのキャリアを考えているそんなあなたに！ ご自身の制作経験や強みを活かして、作れるディレクターとして活躍できるディレクション術をお伝えいたします！
Two.js
TIP Prior to v0.7.0-alpha.1 Two.js requires Underscore.js and Backbone.js Events. If you're already loading these files elsewhere then you can build the project yourself and get the file size even smaller. For more information on custom builds check out the source on github. # Overview Overview # Focus on Vector Shapes Two.js is deeply inspired by flat motion graphics (opens new window). As a resu
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
フロントエンドの実装から見る第四十七回衆議院選挙 開票速報ページまとめ - 暮らしの技術
700億円ほどのお金がかかっているといわれ，why-kaisan.comなんてサイトも作られ巷を賑わせた第四十七回衆議院選挙の投票日が今日でした．投票日と言うことはその後に来るのは開票で，開票と言うことは開票速報がはじまるわけです． 報道各社を見てみますと，各々工夫を凝らした開票速報ページを用意しておりまして，これがなかなかおもしろいということで，その比較でございます． まとめ 長いので先にまとめです． まずテレビと新聞で圧倒的に態度が違います．テレビはあくまで番組の補助だったり宣伝が目的．ウェブページではあまり情報を出したくない様子です．一方新聞各社は トップページ上段，ファーストビューのど真ん中を思いっきり使い，文字通り全面展開といったパターンが多い． フロントエンドの実装から見ると，基本的にグラフが必要な場面ではCSS，日本地図が必要な場面では「画像+mapで部分リンク」か「要素の絶
無料で商用利用できる161種類のSVG形式のアイコンパック「GlyphPack」
同じウェブサイトでもデバイスによってデザインが崩れていたりすると、複数のデバイスを使い回すマルチタスクユーザーにとっては地味ながらストレスに感じるもの。そんなマルチデバイス化が必要なウェブデザインのアイコンにおいて、どんなサイズにしても劣化させずに使えるSVG形式で、無料かつ商用利用も可能というベクターアイコンパックが「GlyphPack」です。 GlyphPack - The Most Indispensable Web Font Icon Pack http://glyphpack.com/ GlyphPackは無料で商用利用も可能、どんなデバイスでも劣化せずに簡単に使えるSVGアイコンパック。今後のアップデートで新しいアイコンが追加されることもあるとのこと。さまざまな用途に対応可能な「アプリケーション」「エラー」「メディア」「ファイルタイプ」「ナビゲーション」「SNS＆ブランド」のア
JavaScriptとCSSは不要！SVGの気持ちいいアニメーションで作られた超軽量のかわいいローディング -SVG Loaders
JavaScriptもCSSも画像も使用せず、SVGで実装された軽快で気持ちいいアニメーションで動くローディングのアイコンを紹介します。 ページに実装する時もJavaScript/CSSは必要ありません。簡単なHTMLでOK！ デモページ SVG Loadersの使い方 使い方は、簡単！ Step 1: SVGファイルをダウンロード 下記ページの右サイドの「Downlaod ZIP」から、SVGファイルをダウンロードします。 SVG Loaders -GitHub Step 2: HTML あとは、imgタグで配置するだけです。 <img src="svg-loaders/puff.svg" /> アイコンのカラーを変更したい時は、svg要素のfill属性を変更します。 <svg fill="#fff" width="140" height="64" viewBox="0 0 140 64
SVG Transformation
It is possible to transform the shapes created in an SVG image. For instance move, scale and rotate the shapes. This is a handy way of displaying vertical or diagonal text. Transformation Example Here is a simple example: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="50" y="50" height="110" width="110" style="stroke:#ff0000; fill: #ccccff" transform="
透過PNG/GIF画像を大幅に軽量化！SVG画像に変換する無料のオンラインサービス -ZorroSVG
透過PNGは素晴らしいフォーマットですが、そのファイルサイズもなかなかのものです。 透過PNGや透過GIF画像をSVG画像に変換し、JPEG圧縮・品質で軽量化するオンラインサービスを紹介します。
SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！
2014年10月8日 SVG Webクリエイターボックスでちょこちょこ取り上げてきたSVG。今回は第四弾！SVGを使ったクリッピングマスクを紹介します。今までは画像に透過PNGを重ねてマスクを表現できましたが、高解像度ディスプレイに対応させたり、マスク自体に効果をつけるならSVGが便利かなーと思います。サムネイル画像にフレームをつけたり、デザインのアクセントとして使えるので、ぜひマスターしてくださいね！ ↑私が10年以上利用している会計ソフト！ SVGのクリッピングマスク基礎 1. 画像を用意 それではさっそく試してみましょう！まずは切り抜かれる画像を用意し、img タグで表示します。この時画像に mask というクラスを与えておきます。 <img class="mask" src="images/rose.jpg" alt="Rose"> 2. マスクの型を用意 Illustratorで
SVG未対応ブラウザのシェアって今どれくらいか？2014年10月版 - 聴く耳を持たない(片方しか)
先日発売されたiPhone 6 Plusでは従来よりもさらに画面が大きくなったり、Retina iMacの噂があったり、様々な機器でディスプレイの高解像度化が進んでいます。 それらの環境に合わせてピクセルサイズを変えていくつも画像を作るより、いっそSVGのようなベクター形式に移行したい！……でも古い環境が残っててまだまだ使えないんでしょ？ と考えている人も多いのではないでしょうか。 じゃあ実際どれくらいの環境が残っているのだろう？というのを調べてみました。 Twitterや検索から来た人はどうせ最後まで読まないと思うので結論を先に書くと 簡略な結論 2014年10月現在、SVG未対応のInternet Explorer8以下は依然として大きな割合を占めてるものの、iOS・AndroidではそろそろSVGが使える環境が整ってきましたよ という感じです。 PC向けはSVG未対応の環境は26.9
数多くの無料アイコンから必要なものだけをセットにして、軽量化されたWebフォントやSVGを作成できるサービスのまとめ
セットになったアイコンはデザインが統一されており、それはそれで便利ですが、全部のアイコンを使うことはほとんどないと思います。 自分が必要なアイコンだけをセットにし、軽量化されたセットにして、WebフォントやSVGとして利用できるオンラインサービスを紹介します。 用意されたアイコンからセットを作ってもよし、自分のアイコンを加えてセットにすることもできます。 flat icon フォーマット：font(woff, eot, ttf, svg), png, svg, eps, psd 462種類のパック、55,000個のアイコンから使用するアイコンだけを選択し、セットにすることができます。チェックしたアイコンはクッキーで保存されているので、ログインしないでも利用できます。
SVGやアイコンフォントが揃ってる！太っ腹なライセンスで無料利用できる高品質なアイコン素材 -Themify Icons
再販売だけがNGで、個人でも商用でも無料で利用でき、バックリンクやクレジット表記も不要の太っ腹なライセンスで提供されているアイコン素材を紹介します。 ダウンロードできるアイコンはSVGとアイコンフォントで利用できます。 SVG 各アイコンが .svg で用意されています。 Fonts アイコンフォント用に .eot, .woff, .ttf, .svg が用意されています。 ライセンスはOFLで、個人でも商用でも無料で、さまざまなメディアに利用でき、改変や再配布も可です。唯一ダメなのは素材自体の販売だけです。 詳しくはダウンロードファイルの「readme.txt」をご覧ください。 アイコンは、こんな感じのが300種類以上揃っています。
アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう
2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト！ 2014年7月3日 追記：SVGスプライトの書き方について修正＆追記しました。 SVGってなに？ SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して
SVGを制作できるアプリ,お絵描きソフトを徹底的に調べました！ 114個 - 聴く耳を持たない(片方しか)
私はTwitterでよくSVG関連情報をチェックしているのですが、 SVGってどう作ったらいいの？ みたいな投稿をしばしば見かけます。 SVGは地味な存在ですが近年は徐々に注目を浴び、関連ツールも増えてきたのでそうした人向けにSVG制作ツールって結構たくさんあるよ！と、まとめてみた次第です。 でも114個って多過ぎ！ ……って思うかもしれない、いや正直オレもそう思う。 なので最後に114個の中から管理人のお薦めツール10選っていうのもまとめておいたので、さっくり読みたい人はそれだけチェックすれば良いかと。 そもそもSVGとは、なに？ そもそもSVGってなに？という人もいるでしょう、それについては以前記事にまとめました。 SVGとはなにか？とSVGの学習に役立つサイトや書籍の紹介 SVGの説明と、SVGの学習に役立つサイトや参考になる書籍の紹介をしています。 今回とりあげるSVG関連ツールと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
このクオリティはスゴイ！JPEG, GIF, PNG画像をベクターに変換する無料のオンラインサービス -PicSVG
GitHub - d3/d3: Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:
I want Make full svg website
