[JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js
demo: pie menu アイコンをクリック（タップ）すると、バウンドしながらパイ状に広がります。省スペース用のシェアボタンとかにしてもよさそうです。 wheelnav.jsの使い方 Step 1: 外部ファイル 当スクリプトとRaphaël.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="js/required/raphael.min.js"></script> <script type="text/javascript" src="js/required/raphael.icons.js"></script> <script type="text/javascript" src="js/dist/wheelnav.js"></script> </head> Step 2: HTML ナビゲーションを
![[JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/302021738966caaf051fa35a7a6c058cd7935a66/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015022401.png)
[JS]幅広いブラウザをサポート！表示サイズに最適な画像・背景画像を表示するレスポンシブ対応の軽量スクリプト -Rimg
ページが読み込まれた時にDOMを調査してimg要素を自動で探し、設定したブレイクポイントに応じて最適な画像ファイルを表示するスクリプトを紹介します。 SVGとPNGが混在しているページでも無問題、SVGはベクターなのでそのまま拡大、PNGはそのサイズ用の画像ファイルを表示する賢い仕様になっています。 Rimg -GitHub Rimgの特徴 Rimgのデモ Rimgの使い方 Rimgの特徴 100%フロントエンドのコード（バックエンドは一切無し）。 単独で利用できるスクリプト、jQueryなどは必要ありません。 しかも、超軽量（6.0KB）。 UA判定やクッキーなど、環境に依存して判定するものは使用していません。 画像や背景画像をレスポンシブ対応にし、最適な画像を表示します（Retinaディスプレイ、リサイズ対応）。 スクロールして画像が表示されたらロードするLazy Loadに対応。 ス
![[JS]幅広いブラウザをサポート！表示サイズに最適な画像・背景画像を表示するレスポンシブ対応の軽量スクリプト -Rimg](https://cdn-ak-scissors.b.st-hatena.com/image/square/7216083dac49099812cea7a817f39a5b9988bd38/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015021301.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
まさかのパブリックドメインで配布！ 電気回路図をヒントにした美しすぎる「鉄道路線図」完成
美しすぎる鉄道路線図のSVG（Scalable Vector Graphics）ファイルがパブリックドメインで配布され、称賛の嵐に包まれています。 全体図 拡大図 この鉄道路線図は、デザイナーHashimoto Naoki（＠hashcc）さんが作成したもの。1931年にハリー・ベックさんによってデザインされた「ロンドン地下鉄路線図」が好きで、その作図方法に基づきこの路線図を作ったのだそうです。ハリー・ベックさんは技術者で、電気回路図をヒントにロンドンの地下鉄路線図描いたことで有名な人物。その美しさに多くのファンがいます。 実はこの鉄道路線図、12月1日から24日（クリスマス）までをカウントダウンするアドベントカレンダー（「SVG Advent Celarnder 2014」）という企画の記事で公開・紹介されたもの。Hashimotoさんは「図形として“プログラマブル”でないといけなかった
透過PNG/GIF画像を大幅に軽量化！SVG画像に変換する無料のオンラインサービス -ZorroSVG
透過PNGは素晴らしいフォーマットですが、そのファイルサイズもなかなかのものです。 透過PNGや透過GIF画像をSVG画像に変換し、JPEG圧縮・品質で軽量化するオンラインサービスを紹介します。
第1回 SVGの基礎知識 | gihyo.jp
SVGは比較的古くからある仕様の1つですが、2010年3月にマイクロソフトがInternet Explorer 9でのサポートを表明してから一気に注目が高まりました。そんな古くて新しいSVGを今から使える情報と、将来の展望を全4回の集中連載で解説します。 SVGとは SVG（Scalable Vector Graphics）は、XMLベースのベクターグラフィック言語もしくは画像フォーマットです。W3Cによってその仕様が定義されており、画像フォーマットとして用いる場合は拡張子.svgが使用され、MIME形式はimage/svg+xmlが用いられます。 SVGの現状 Firefox、Safari、Google Chrome、Operaなどのブラウザが既にサポートしており、Internet Explorerもそのバージョン9、具体的にはInternet Explorer 9: Platform
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
プログラミングやスクリプトやフレームワークなど、さまざまなアイテムが揃ったWeb開発者のための無料アイコン素材 -Devicons
Web制作や開発で使用するさまざまなプログラミング言語やスクリプト言語、フレームワーク、データベース、ウェブサービスなど、制作者・開発者なら目にしたことのあるアイコンが揃ったフリー素材を紹介します。 アイコン全145種 ダウンロードできるアイコンはWebページですぐに利用できるよう2種類が用意されています。 Webフォント（.eot, .woff, .ttf, .svg） スプライト用（.png, .svg） Webフォント用のCSS、スプライト用のCSSなども用意されているので、簡単に利用できると思います。使う時は、こんな感じに。 <link href='//cdn.jsdelivr.net/devicons/1.4.0/css/devicons.min.css' rel='stylesheet'> <span class="devicons devicons-bing_small">
SVGやアイコンフォントが揃ってる！太っ腹なライセンスで無料利用できる高品質なアイコン素材 -Themify Icons
再販売だけがNGで、個人でも商用でも無料で利用でき、バックリンクやクレジット表記も不要の太っ腹なライセンスで提供されているアイコン素材を紹介します。 ダウンロードできるアイコンはSVGとアイコンフォントで利用できます。 SVG 各アイコンが .svg で用意されています。 Fonts アイコンフォント用に .eot, .woff, .ttf, .svg が用意されています。 ライセンスはOFLで、個人でも商用でも無料で、さまざまなメディアに利用でき、改変や再配布も可です。唯一ダメなのは素材自体の販売だけです。 詳しくはダウンロードファイルの「readme.txt」をご覧ください。 アイコンは、こんな感じのが300種類以上揃っています。
全600種類以上！ビジネスからホビーまで、ソリッドなラインでデザインされた美しい無料のアイコン素材 -Linea
ビジネスからホビーまでさまざまなアイテムが揃った、ソリッドなラインが美しいアウトラインでデザインされたアイコン素材を紹介します。 アイコンは個人でも商用でも無料で利用できます！ Linea ダウンロードできるアイコンはウェブ制作でよく使うフォーマットが揃っています。 ベクター（.svg） アイコンフォント（.eot, .ttf, .woff, .svg） ビットマップ（.png） アイコンのライセンスはCC BY 4.0で、個人でも商用でも無料で利用でき、ウェブでも紙でも動画でもさまざまなフォーマットで利用できます。 ダウンロードは「Pay with a Tweet」ボタンがありますが、これは作者がユーザーに何かを強制することをボイコットするもので、隣の「Download」ボタンからダウンロードできます。 アイコンはBasic, Music, Ecommerce, Software, Ba
アイコンフォントから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がレティナディスプレイを発表して
JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
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内では、配布元のサーバーのファイルを参照してい
PSDもベクターもWebフォントも揃った、使用上制限無しのかわいいアイコン素材 -Dripicons
Dripicons アイコンのアイテムは全部で95種類、ブログや企業サイト、アプリケーションなどに利用できるアイテムが揃っています。 アイコンの全95種類 フォーマットはさまざまなものが用意されており、まとめてダウンロードできます。 .psd (Photoshop) .ai (Illustrator) .eps .svg .pdf .ttf (Webフォント) .eot (Webフォント) .woff (Webフォント) アイコンのライセンスはCC BY 3.0で、個人でも商用でも無料で利用できます。 また、使用上の制限は完全になし、とのことです。 アイコンのダウンロードは、下記ページからです。
JavaScriptも使わず元画像も変更せずに画像をグレースケール表示させる
ちょっと調べ物をしたのでメモ。 画像1枚だけで、グレースケール、 マウスホバーでカラー画像に、 みたいなのを実装したい、出来れ ばJavaScriptも使用せず、みたい な内容です。 2枚用意しろよと言われたら実も蓋もないんですけど、画像1枚だけでグレースケール⇔カラー画像を実装したい。画像の数は半分で済むし、加工の時間も不要になるのは大きなメリットです。 1年前に同じ事をunformedbuilding（アップデート版もありました）さんがやってますので合わせてどうぞ。 Sample マウス乗せるとカラーになる、という良くあるホバーエフェクトですが、極力無駄を省きたい。画像が1枚で済めば、20枚必要なところが10枚で済むし、画像が追加されても加工したり、マークアップしなおしたりファイルをアップロードする必要がなくなります。 IE IEはfilterプロパティ使えばいいですね。 img{ f
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
よくあるWebデザインにSVGで一手間加え、さまざまな要素がアニメーションで楽しくなる -Elastic SVG Elements
DeNA Engineering - DeNAエンジニアのポータルサイト
このクオリティはスゴイ！JPEG, GIF, PNG画像をベクターに変換する無料のオンラインサービス -PicSVG
SVGを使ってウェブページにかっこいいエフェクトを与えるチュートリアルのまとめ