SVGによる背景パターンを解説します。まだ広まっていませんが、優れたデザインが多く、選択肢が増えます。SVGパターンの仕組みを解説し、活かすための6つのツールを紹介します。 ツールが持つ機能と、パターンを知識と組み合わせれば、新しいデザインの扉が開けるはずです。 SVGパターンの仕組みとは 時代を問わず、Webデザインではパターン（模様）を使ってきました。CSSの知識が少なくても、背景に好みの画像をタイル状で並べる方法を知っていると思います。 div { background-image: url("sitepoint-tile.svg"); } 背景にはJPGやPNGなどWeb用の画像フォーマットが使えますが、SVGは効率が良く鮮明で、劣化せずに拡縮できるため、CSSの背景画像にも適しています。 SVG本来のやり方（SVGパターン）で、同じ画像を繰り返し並べて背景画像に設定する方法を詳し
I am using d3.js for graph. at some point i have to show data with some special part of graph for example if the values is cross some boundary then show that part with filling pattern. for more clear is there in and image. i get the rect part that cross the boundary but how can i fill it with this pattern? any css or canvas tricks? Note : this image is just an example not the real one
html5がsvgをサポートすることとなってから数年が経ちました．このような状況ですからさぞsvgが世の中に広まったのか…というと別にそんなこともなくて，むしろ解像度に依存しない特徴のみが強調され，ラスタ画像の置き換え程度にとどまっている印象があります．毎年svg元年と叫ばれている中，なぜこのような状況なのでしょうか？ その答えとして筆者はwebkit系ブラウザのsvgにおける機能の貧弱さが一因として挙げられると考えています．chromeやsafariは実に先進的なwebブラウザと言った印象があるのですが，svgに限って言えばむしろ他のブラウザに大きく劣っているなど，実は非常に偏った癖のある環境なのです． 本記事では筆者がこれまでsvgを調査してきた上で気になったwebkit（主にchrome）の問題点についてまとめてみます．将来的に改善されることを期待しつつも，現状svgをクロスブラウザ
SVG が魅せる Web の未来 Firefox Developers Conference 2012, Osaka Brian Birtles 皆さま、こんにちは。Mozilla Japanのブライアンと申します。 今日は「才色兼備なグラフィックス」というテーマで話させていただきたいですが 最初に短い自己紹介をさせていただきます。 今日のテーマと打って変わって、私は才色兼備ではもちろんなくて、 グラフィックスについて話すくせに、デザイナーでもありません。 実は高校のとき、デザイナーになりたかったんですが、センスがなくてあきらめました。 それから、ウェブ開発もあちこちやりましたが、それも以外に難しかったです。 でも、私が悪いと思わなくて、ウェブが悪いと思いましたので、 ウェブを改善するため、2004年にボランティアとしてFirefoxの開発に参加し始めました。 今はMozilla J
SVG MAP Lab ユビキタスWeb時代の地図サービス基盤を探究するラボサイト ～標準地図ブラウザ "SVG Map Toolkit" ベータ版公開中～ 【標準地図ブラウザ "SVG Map Toolkit" ベータ版 配布開始について】 SVG MAPコンソーシアムは、本日2007年09月06日より、Internet Explorer対応SVGビューアであり、また標準地図ブラウザでもある "SVG Map Toolkit" のベータ版を配布開始致します。今回のベータ版配布は、SVG Open 2007 / gコンテンツ・ワールド2007 開催に合わせて実施されるものであり、この "SVG Map Toolkit" によりユーザ及び開発者は Internet Explorer に対してSVGの閲覧及びマッシュアップ等の各種機能拡張が可能になり、「標準地図ブラウザ」 として必要な各種機
このページは以下に移動しました このページはhttp://sie.sourceforge.jp/に移動しました。 SIE - IEにSVGを表示するツール SIEとは SIEとは、JavaScript言語で設計されたベクター画像ブラウザです。例えば、インターネットエクスプローラー（Internet Explorer、以下、IE)やその他のブラウザで、SVGを表示できます。 特徴 クロスブラウザ（IEとFirefoxとOperaとSafari） プラグインが必要ない SVG画像を表示できる ライセンス フリーソフト(オープンソース）として公開しているので、どうぞご自由にお使いください。 Mozilla Public Licence（MPL1.1）です。 課題 バージョンや、問題等につきましては、ブログで公開しています。「dhrnameのウェブ日誌」をご覧ください。 © Copyright
主流ブラウザのバージョンの入れ替わりは、Web開発者やシステム開発者にとって大きな意味を持つだろう。それにしても記者が残念に思うのは、IE6がIE7に置き換わっても、Webブラウザ上でベクターグラフィックを扱う方法が相変わらず限られているということだ。現在一般に普及しているWebブラウザの中で、「SVG」（Scalable Vector Graphics）をまったくサポートしていないのはIEだけと言っても過言ではないからだ。 ＠IT読者には釈迦に説法だろうが、コンピュータで画像・グラフィックスを扱う上でラスターグラフィックとベクターグラフィックの双方は相補的関係にある。画像の個々のピクセルを扱うラスターグラフィックに対して、ベクターグラフィックは直線・曲線などの幾何図形を扱える。地図やグラフ、ロゴ、説明図、ページデザインなど、ベクターグラフィックで扱うべきデータは多い。表示サイズに合わせて
いわゆるSVG形式のベクター形式画像ファイルを扱う時に便利なオープンソースのソフトウェア。開いたSVGファイルを任意の解像度のPNGファイルに変換できます。また、Illustratorのようにベクター形式で画像を作成することも可能。Linux、Windows 2000/2003/XP、Mac OS X、FreeBSDなどで動作します。 実際のインストールと利用方法は以下の通り。 Inkscape. Draw Freely http://www.inkscape.org/ ダウンロードはこちらから。 http://www.inkscape.org/download.php ダウンロードした本体をクリックしてインストール開始 「Next」をクリック 「Next」をクリック 「Next」をクリック 「Install」をクリック しばらく待つ 「Next」をクリック 「Finish」をクリックすれ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く