Akar Icons
A perfectly rounded icon library made for designers, developers, and pretty much everyone.
カスタムなSF SymbolsをSVGから自動生成する - クックパッド開発者ブログ
(English version here) 明けましておめでとうございます。モバイル基盤部のヴァンサン(@vincentisambart)です。 最近Appleがアプリの画面で使えるシンボルSF Symbolsに力を入れています。SF SymbolsはAppleの用意してくれたシンボルだけではなく、自分の作ったカスタムシンボルも使えます。Appleの紹介しているカスタムシンボルを作るワークフローに従うと手間がかかるので、既存のSVGからカスタムシンボルを自動生成できないか挑戦してみました。 経緯 だいぶ前からiOSクックパッドアプリで色んな画面で使われている単色アイコンはCookpadSymbolsというシンボルのみのフォントが使われていましたが、数ヶ月前デザイナーからシンボルの運用をフォントファイルからSVGに変えたいという要望が挙がりました。 アイコンは元々SVGで作成されていました
拡大しても奇麗！SVGで作られたアイコン集·Drawic MOONGIFT
DrawicはSVGで作られたソーシャルサービス系アイコン集です。 新しいMacBook ProやiPad、iPhoneなどから導入が進んでいるRetina Display。これまでにないほど、奇麗な描画が特徴ですが、それによって画像などの粗さが目立つようになってしまいました。それを回避するには画像ではなくベクターを使うことです。今回はそんなチャレンジを行うアイコン集Drawicを紹介します。 アイコンは全部で15種類。全てSVGで作られています。 SVGだから拡大しても奇麗！ ファイル構成。全て真っ白なSVGなので注意。 Drawicは有名なソーシャル系サービスのアイコンをSVGで提供しています。Twitterのアイコンも新しいものになっているのが嬉しいです。16種類なので全てのパターンで使うには不足を感じるかも知れませんが、徐々に増えてくれることを期待したいですね。 DrawicはSV
Mozilla製。みんなで作るイラストアニメーション·Parapara Animation MOONGIFT
Parapara Animationはタブレットなどで描いたイラストをアニメーションを作成するMozilla製のソフトウェアです。 Mozillaが作り出すソフトウェアはオープンなWebを実感させるものが多数あります。今回はParapara Animationを紹介します。ベースになる大きなキャンバスの上にみんなが作ったアニメーションを重ねて時間軸で刻々と変化させる、SVGを使った面白いソフトウェアです。 作品例です。 コマ送り的にゆっくりと進んでいきます。 こちらは作成画面です。 実際の作品の一つです。ユーザが描いた顔や棒人間が描かれています。 Parapara Animationは描かれた作品を表示するビューワーと、アニメーションを作成するためのエディタがあります。作成はスマートフォンやタブレットでもできるようになっています。みんなが思い思いのイラストを描いてそれが動き出す、そんな面白
SVGを用いたリサイズ対応の地図·jQuery Vector Maps MOONGIFT
jQuery Vector MapsはSVGで描かれた地図です。JavaScriptとの親和性が高いです。 HTML5から標準に取り入れられた技術の一つにSVGがあります。IllustratorなどもSVGで出力できますが、まだまだ利用範囲は広くありません。そこでSVGを使ったデモとしてjQuery Vector Mapsを紹介します。 デモです。右側の地図がベクターで描かれています。 こちらは世界地図。 ドイツのマップ。 ヨーロッパのマップ。マウスオーバー、クリックで色が変わります。 jQuery Vector MapsはSVGデータをそのまま取り込んで表示している訳ではなく、JavaScriptでレンダリング内容を指定しています。その結果マウスオーバーにも対応しているようですが、マップの作成が大変なのは否めません。とは言えズームやパンしても乱れない奇麗な地図というのは使い勝手が良さそう
引用符をSVGに
blockquote要素に付けている飾りの引用符をSVGでやることにした。フォントだとサイズ(特に横幅)を合わせるのが難しいので。アイコンみたいなコンテナー要素のサイズに合わせてぴったりサイズを縮小拡大したい場合はSVGが最適解だと思う。もののついでにhr要素もSVGで書き直した。 Demo: Quote SVG デモでは黒の不透明にした。path要素のstyle属性でfillとopacityプロパティーを使って色は調整できる。あとはこれをData URIスキームを使ってCSSに埋め込めば良い。 blockquote::before { margin-right: 1em; display: block; position: absolute; right: 100%; width: 2em; height: 2em; background-image: url("data:image/s
選んだ文字だけをSVG Fontsにまとめる·Fontomas MOONGIFT
FontomasはWebブラウザ上で任意のアイコンだけのSVG Fontsを作成できるソフトウェアです。 Web Fontsを使うと画像を使わずに素敵なフォントをオンライン上で使えます。しかしフォントを読み込むために転送量が大きくなってしまうのが欠点です。そこで使ってみたいのがFontomasです。SVG Fontsを使って自分で選んだアイコンだけをWeb Fonts化できます。 様々なアイコンフォントが並んでいます。自由に選んでいきます。 さらに色々なアイコンがあるので適当に選びます。 アイコンサイズを変更することもできます。 選んだものだけが抽出されます。 SVGが出力されました。これを使えばWebフォントとして使えます。 保存ダイアログです。 Fontomasを使えばフォント全てを読み込まずに選んだものだけを使えるようになります。そのためサイズが小さくなるのが利点です。また、複数のソ
IE6から使えるSVG/VMLを使った高機能JavaScriptグラフライブラリ·Highcharts MOONGIFT
HighchartsはSVG/VMLを使って描画するJavaScript製のグラフライブラリです。 Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基本として多様なWebブラウザに対応したグラフライブラリになります。 折れ線グラフです。 Ajaxによるデータロード対応です。 グラデーションをかけることもできます。 滑らかな曲線です。 アイコンを貼付ける例です。 プロットのみで。半透明なドットを使っています。 エリアグラフです。 マイナスの値にも対応しています。 積み上げグラフです。 棒グラフです。 左右比較型の棒グラフです。 複数のデータを並べられます。 棒グラフもマイナス値を出せます。 こんな感じの棒グラフも。 さらにドリルダウン対応です。 HTMLのテーブルからデータを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - vercel/satori: Enlightened library to convert HTML and CSS to SVG
GitHub - maxwellito/vivus: JavaScript library to make drawing animation on SVG
GitHub - tomkwok/svgasm: SVG animation from multiple SVGs or single GIF using tracer
svg/svgo: Nodejs-based tool for optimizing SVG vector graphics files.
Free svg background generator
Heroicons
Google Code Archive - Long-term storage for Google Code Project Hosting.
SVG-edit