Publicons — publishing platform logosa growing collection of finely tuned publishing & platform icons
svgフォント編集スクリプト
ヒント お手持ちのsvg画像からフォントとかパスを抽出してsvgフォント化することができます． フォント情報が見つからなかった場合，パスを抽出します．一つのパスを文字として解釈します． ファイル読み込み時にパスのリサイズや位置の調整を行うことができます．いろいろ試してみましょう． 文字をクリックすると内容を編集することができます．位置の微調整等を行う際にご利用下さい． 余りに複雑なsvgファイルを読み込んだ場合，スクリプトが応答しなくなる場合があります．（このような図形はそもそもフォントとして不適でしょう．） 本スクリプトで生成したsvgフォントファイルは全ての環境で正しく動作するとは限りません．webkit系/operaのブラウザで試すか，下のサービスを使って他の形式に変換して使いましょう． ここで生成したsvgフォントファイルはicomoonでeot,ttf,woff形式に変換できます
SVGの話
SitePointでCanvasじゃなくてSVGを考慮すべき7つの理由という記事が公開されていた(8つあるけど)。SVGオシみたいなことではなくて、場合によってはSVGの方が向いていることがある的な記事なので、間違ってはないと思うんだけどタイトルはあんまり良くない。 記事ではソフトウェアとしてInkscapeとかOOo Drawとか挙げているけど、正気を疑う。そりゃちょっと丸書いて線曲げて色塗ってグラデーション付けてとか他のフォーマットからのコンバートとかは十分こなせるけど、それ以上のことをするためには気の遠くなるような修練を積む必要がある。他は大体同じような事を別の言い方で言ってる感じで、「SVG言いたいだけか」みたいな記事だった。 記事の第6項でさらっと流されているCSSでゴニョゴニョできるとかそこら辺がSVGの普及への鍵だと思っている。現在はWebサイトのビジュアル・デザインの多くの
Clickable Maps in JavaScript | Interactive Maps | JQVMap
<!-- Example Map Above --> <script src="js/jquery.vmap.js"></script> <script src="js/jquery.vmap.world.js"></script> <script src="js/jquery.vmap.sampledata.js"></script> <script> jQuery('#vmap').vectorMap({ map: 'world_en', backgroundColor: #fff, color: '#ffffff', hoverOpacity: 0.7, selectedColor: '#666666', enableZoom: False, showTooltip: true, values: sample_data, scaleColors: ['#C8EEFF', '#0064
display: table-cellとcontent: ""による画像置換
display: table-cellした要素の中で疑似要素を使った画像置換をcontent: ""(空文字指定)でやると、Internet Explorer 9以外の現行ブラウザーでは謎の空白が出来てしまう現象に遭遇した。説明難しい。IE9以外で同じ挙動なので多分仕様に従ったものなんじゃないかなーとは想像できるんだけど、どうしてこうなるのかよくわからないのでメモがてら書いておく。直す方法だけは一応発見した。 Demo: display: table-cell and content: "" for image replacement デモではdisplay: table-cellとしたdiv要素の中で、疑似要素を使ってテキストを追い出す形の画像置換を行なっている。contentプロパティーで空文字を指定している場合画像置換で表示した画像の下に空白が(一行分？)できている。.irというクラ
引用符を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のフィード・アイコン
背景を完全に透明にして白い丸と円弧の部分だけのフィード・アイコンを作ってみました(上の画像は背景がオレンジ色になっていますが、CSSで背景色を指定しているだけです)。Wikimedia CommonsにあるSVGアイコンをエディタでいじっただけですけどね。SVGファイルのソースにコメントとして書いてあるように元ファイルと同じくMPL/GPL/LGPLのトリプル・ライセンスです。 Demo: SVG Feed Icon SVGファイルのソースはデモ・ページの最後に載せてあるのでそれをHTMLファイルにコピペしても良いですし、普通にドラッグ・アンド・ドロップや右クリックで保存してimg要素で参照しても良いでしょう。このページやデモ・ページではData URIスキーム化したものを直接使っています。500バイト強の小さなものなのでData URIスキーム化して使うのが良いと思います。 アイコンの丸
こんにちは！ SVGグラデーション！
複雑でないCSSグラデーションの代わりにSVGグラデーション(をData URIスキーム化したもの)を利用するようにしました。懸念していたFirefoxのバグも直る(直った？)みたいだし、ちょっとやってみたかったので。 SVGの作成はエディタでやってます。 <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.0"> <defs> <linearGradient x1="0" y1="0" x2="0" y2="100%" id="gradient"> <stop offset="0%" style="stop-color: ${from:rgb()}; stop-opacity: 1;"/> <stop offset="100%" style="stop-color: ${to:rgb()}; s
CSSグラデーションとSVGグラデーションのサイズの比較
単純なものならあまり変わらないような気がしたので実際に比較してみます。 比較するグラデーションはCSSグラデーションで書くと linear-gradient(top, rgba(255, 0, 0, 0.5) 0, rgba(0, 0, 255, 0.5) 100%) という縦方向に半透明の赤から半透明の青に変化するものです。 CSSグラデーションでは、各ベンダー拡張プリフィックスを並べることになります。 background-image: -moz-linear-gradient(top, rgba(255, 0, 0, 0.5) 0, rgba(0, 0, 255, 0.5) 100%); background-image: -webkit-linear-gradient(top, rgba(255, 0, 0, 0.5) 0, rgba(0, 0, 255, 0.5) 100%);
HTML5で注目！インラインSVGの使い方 (1/5)
HTML5ではビットマップ画像を手軽に扱える「Canvas」が話題ですが、「SVG」も画像関連で注目したい新技術です。HTML5ではInline SVG（インラインSVG）がサポートされ、HTML内にSVGを直接記述できるようになるのです。 今回のJavaScriptラボは、Firefox 4、Google Chrome 7、Internet Explorer 9を対象に、インラインSVGの使い方とJavaScriptによる制御方法について解説します。全部で3回に分けて、最終的には簡単なシューティングゲームを作成します。 SVGとは？ SVG（Scalable Vector Graphics）は、名前のとおりベクター形式の画像フォーマットです。ベクター形式とは、点と点で結ばれた線で図形を表す方法で、アプリケーションでいえばIllustratorがベクター形式を採用しています（Photosh
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
— Marco Rosella, Interactive Designer.
はてなまとめ（仮）