スマートフォン向けのWebサイトやWebアプリを中心に、「SVG」がいま再注目されています。単なる画像フォーマットを超えて、最近ではさまざまな表現に広く活用されるようになりました。 SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説。CSSによる装飾やJavaScriptとの連携など、すでに使っている人がもっと使いこなすためのテクニックも紹介します。
スマートフォン向けのWebサイトやWebアプリを中心に、「SVG」がいま再注目されています。単なる画像フォーマットを超えて、最近ではさまざまな表現に広く活用されるようになりました。 本連載では、SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説。CSSによる装飾やJavaScriptとの連携など、すでに使っている人がもっと使いこなすためのテクニックも紹介します。（編集部） Webの表現を広げるSVGの魅力 SVGと聞くと、「単なるベクターの画像でしょ」と思う方も多いでしょう。確かにSVGは「Scalable Vector Graphics」の略なので、ベクター形式の画像フォーマットであることには間違いありません。 一方で、SVGには、PNGやJPEGといった、他の画像フォーマットとは異なる魅力があります。SVGをWebページに使うことで、これまでのHTMLやCSSだけ
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■ XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）
同じウェブサイトでもデバイスによってデザインが崩れていたりすると、複数のデバイスを使い回すマルチタスクユーザーにとっては地味ながらストレスに感じるもの。そんなマルチデバイス化が必要なウェブデザインのアイコンにおいて、どんなサイズにしても劣化させずに使えるSVG形式で、無料かつ商用利用も可能というベクターアイコンパックが「GlyphPack」です。 GlyphPack - The Most Indispensable Web Font Icon Pack http://glyphpack.com/ GlyphPackは無料で商用利用も可能、どんなデバイスでも劣化せずに簡単に使えるSVGアイコンパック。今後のアップデートで新しいアイコンが追加されることもあるとのこと。さまざまな用途に対応可能な「アプリケーション」「エラー」「メディア」「ファイルタイプ」「ナビゲーション」「SNS＆ブランド」のア
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クリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！Webクリエイターボックスでちょこちょこ取り上げてきたSVG。今回は第四弾！SVGを使ったクリッピングマスクを紹介します。今までは画像に透過PNGを重ねてマスクを表現できましたが、高解像度ディスプレイに対応させたり、マスク自体に効果をつけるならSVGが便利かなーと思います。サムネイル画像にフレームをつけたり、デザインのアクセントとして使えるので、ぜひマスターしてくださいね！ SVG のクリッピングマスク基礎1. 画像を用意それではさっそく試してみましょう！まずは切り抜かれる画像を用意し、img タグで表示します。この時画像に mask というクラスを与えておきます。 <img class="mask" src="images/rose.jpg" alt="Rose" /> 2. マスクの型を用意Illustrato
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
ピクセル密度とピクセル比の関係 ピクセル密度は、数が多ければ多いほどスクリーン上で鮮明な描画ができるわけですが、上述したピクセル比とは直接関連しないものです（と考えています）。たとえば、Galaxy S IVのようにピクセル密度は441ppi、ピクセル比は2という端末もあれば、HTC Oneのように、ピクセル密度は468ppiだが、ピクセル比は3という端末もあります。 ※両方とも実機で検証したわけではないので、Wikipediaの情報が正しければの話ですが。 ※ピクセル比とは違うものですが、それと似た単位であるdppx (dots per pixel unit)では、CSSで定義された1インチが96pxになるため、1dppx = 96dpiになります。 ピクセル比に似た値「dp」とwindow.devicePixelRatio Androidの密度非依存ピクセル「dp」 Density-i
「Lazy Line Painter」 は、最近流行のSVGを使ったパスアニメーションを手軽に作れるプラグインです。自分で描いた線画をSVG形式で読み込み、手で描いたような動きをつけて表示できます。 あまり複雑な動きはできませんが、「Tatenaga GIF」のiPhoneの線画のように、さりげなく取り入れるにはぴったりのプラグインです。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Lazy Line PainterをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。
先日AdobeからこのようなJavaScriptライブラリが公開されました Snap.svg http://plus.adobe-adc.jp/post-4817/ 以前から人気の高かった、IE6でもSVGを表示できるJavaScriptライブラリRaphaelの作者 Dmitry Baranovskiy氏による新たなライブラリで、Raphaelとの違いはSnap.svgではIEなら9以上対応とモダンブラウザを対象にしたこと。さらに自由度と表現力の高いことができるようになっているのが大きな特徴です。 こうしたJavaScriptライブラリがオープンソースで、そしてAdobeから公開されたのは大きなことでこれからSVGもどんどん普及していくのではないでしょうか。 まさに2013年こそついにSVG元年と言えるかもしれません*1。 ……とは言え、そもそもSVGってなに？という人もまだまだ少なくな
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
矢印・コンパス・人物・吹きだしといったスタンダードなアイテムからオンライン上で使えそうな音楽やムービーなどの再生＆停止ボタン・音量ボタン・お買い物ボタンや、Android・Windows・Appleのマークなど、さまざまなジャンルのシンプルなベクターアイコン264種類が無料でダウンロードできて商用利用も可能なのが「IKONS」です。 IKONS - 264 free vector icons from Piotr Kwiatkowski http://ikons.piotrkwiatkowski.co.uk/ 264種類のシンプルなアイコンセットは以下のような感じ。 ダウンロードするにはまず「DOWNLOAD」ボタンをクリック。 ダウンロードする前にライセンスを読んで下さい、と表示されます。ライセンスにはIKONSが無料で個人＆商用利用可能であること、変更や修正は可能ですが改変を加えたアイ
レスポンシブ対応で背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装するスタイルシートを紹介します。 最低限の要素にしたデモ 実装は、こんな感じになります。 HTML パネルはarticle要素で実装します。中身はテキストでも画像でもフォームでも何でもOK。 <body> <article> <h1>半透明の美しいパネル</h1> <p>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が［一般に〔米〕では Whiskey,〔英〕では Whisky.］であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ご
Why SVG (and Snap)? SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM. Modern features for modern browsers Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking
jQuery Mobile 1.4アルファ版が公開。DOMの削減による性能向上とSVGアイコン採用など バージョン1.1ではCSSを活用することで安定動作の充実を、バージョン1.2ではポップアップやフォームなど新しいコントロールを強化、前バージョンの1.3ではレスポンシブデザイン対応をしてきました。今回の1.4では、DOM操作を削減することによる性能向上、SVGアイコンの採用などが行われています。 1.4での主な変更点 現在のjQuery Mobileでは、元になるHTMLに対してjQuery Mobileが装飾や操作のために多数のDIVタグなどを実行時に自動的に追加しています。1.4ではこのDIVタグの追加などが抑えられるとのことです。ブログから引用します。 To improve performance we reduced DOM manipulation. Generation of
Dripicons アイコンのアイテムは全部で95種類、ブログや企業サイト、アプリケーションなどに利用できるアイテムが揃っています。 アイコンの全95種類 フォーマットはさまざまなものが用意されており、まとめてダウンロードできます。 .psd (Photoshop) .ai (Illustrator) .eps .svg .pdf .ttf (Webフォント) .eot (Webフォント) .woff (Webフォント) アイコンのライセンスはCC BY 3.0で、個人でも商用でも無料で利用できます。 また、使用上の制限は完全になし、とのことです。 アイコンのダウンロードは、下記ページからです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く