SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL（Syn
SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！Webクリエイターボックスでちょこちょこ取り上げてきたSVG。今回は第四弾！SVGを使ったクリッピングマスクを紹介します。今までは画像に透過PNGを重ねてマスクを表現できましたが、高解像度ディスプレイに対応させたり、マスク自体に効果をつけるならSVGが便利かなーと思います。サムネイル画像にフレームをつけたり、デザインのアクセントとして使えるので、ぜひマスターしてくださいね！ SVG のクリッピングマスク基礎1. 画像を用意それではさっそく試してみましょう！まずは切り抜かれる画像を用意し、img タグで表示します。この時画像に mask というクラスを与えておきます。 <img class="mask" src="images/rose.jpg" alt="Rose" /> 2. マスクの型を用意Illustrato
2013年06月20日11:56 カテゴリ でんでんコンバーターでSVGとMathMLのマークアップ使える？ こんにちは、ろすです。 でんでんマークダウンの中でSVG（ベクターグラフィックの記述言語）やMathML（数式の記述言語）を使うことはできるんでしょうか？ 今日はそれを試してみましょう。 XHTML編 こんなマークアップしたファイルを用意して変換してみます。 これはSVGのサンプルです。 <svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="0" y="0" width="100" height="70" fill="#c44" /> <rect x="40" y="20" width="100" height="7
XMLmind DITA Converter v2.4 を使うと、DITAからEPUB3が簡単に作れることが分かったので、いろいろ試していました。 EPUB3では図にSVGが使えます。SVGが使えると、EPUB3でマニュアルを作るときのいろいろな問題が解決できるので、とても期待しています。 EPUB3へのSVG挿入でハマったというか、分かったことが２つ。 手元にはiPad miniしかないので、iBooks(v3.1)以外では未検証です。 図のサイズの指定 図を画面いっぱいに表示させるには、以下のようにCSSを書くとよい。 .image.max-width { max-width : 100%; height : auto; } ビットマップとベクターを組み合わせたSVGを挿入するときはをインラインで書く これは解せない挙動なので、私がまだよく分かっていないことがあるのかもしれません。ご存
ロゴ制作時に使えるTIPSをご紹介。 アイデア捻出とかでロゴをザーッと見たいとき、Google画像検索で検索ワードに「logo」とか入れて検索すると思います。 そこに「filetype:svg」を追加してファイル形式を「SVGファイル」のみに制限することで、高解像度のロゴのみを検索できます。 サンプル でも、SVGファイルって何でしょうか? SVGファイルってなんなのさ SVGフォーマットはJPEGやPNGなどのピクセル形式の画像ファイルとは違い、イラストレーターのようなベクターデータ。つまり何処までも拡大できます。なので正確には高解像度というのは間違い。 Webページにベクターデータを埋め込む用途を意識して開発されたので、中身はXMLで書かれてます。つまり普通にテキストエディタで開けば直接データが見えます。もちろん編集もできます。 ウィキに掲載されてるロゴはSVGファイルの場合が多いです
IVSやら何やら他の話題に飛びついていたので間が空いてしまったが、明朝かな書体制作のつづき。前回はアウトラインを作ったので、今回はここからフォントを生成したい。 SVGの分割 hiragana_1.svg まず、これがアウトラインのファイル。Inkscape で作成し、SVGとして保存した。アウトラインは outline という名前のレイヤーの中に作っている。仮想ボディのサイズは100pxとした。 これをグリフごとに分割し、1文字1ファイルにする。今回は（も？）Perl で簡単なスクリプトを書き、これを利用した。単純なものなので、path 要素以外の要素（グループも含む）に対応していないなどいろいろと制限はある。また XML::Simple を利用しているので、実行するには XML::Simple のインストールが必要。 split_svg.pl #!/usr/bin/perl # # S
FontomasはWebブラウザ上で任意のアイコンだけのSVG Fontsを作成できるソフトウェアです。 Web Fontsを使うと画像を使わずに素敵なフォントをオンライン上で使えます。しかしフォントを読み込むために転送量が大きくなってしまうのが欠点です。そこで使ってみたいのがFontomasです。SVG Fontsを使って自分で選んだアイコンだけをWeb Fonts化できます。 様々なアイコンフォントが並んでいます。自由に選んでいきます。 さらに色々なアイコンがあるので適当に選びます。 アイコンサイズを変更することもできます。 選んだものだけが抽出されます。 SVGが出力されました。これを使えばWebフォントとして使えます。 保存ダイアログです。 Fontomasを使えばフォント全てを読み込まずに選んだものだけを使えるようになります。そのためサイズが小さくなるのが利点です。また、複数のソ
wacomのプラグインを使うとjavascriptで筆圧などを取得できるってのを、昨日知りました。ちょうどpaper.jsで筆圧が使えないのを残念に思ってたところだったので、早速組み合わせてみました。微妙な書き味などは、これからチューニングが必要ですが、とりあえず。 あとSVGデータ生成機能も、まだ完全ではないのですがつけてみました。generate svg をクリックするとテキストエリアが出てくるので、コピーしてファイルを作ってください。 paper.jsで筆圧描画とSVGデータ生成サンプル ※ 私の環境のInternet Exprolerでは今のところ使えてません。ごめんなさい …描けるでしょうか？ webtabletプラグインは、最近のドライバを入れると同時に入るらしいです。らしい、っていうのは、私も最初うまく動かず、ドライバを入れ直したりしてるうちに動いたという感じなのです。wac
MIX11で「SVG女子」が紹介されました！ 弊社が制作をさせていただいた「SVG女子」が先日ローンチし、MIX11で大きく取り上げられました。 こちらがその様子です。 日本上陸は4/26！「SVG女子」をより楽しむために、まずはSVGについて知っておきましょう。 それでは続きからどうぞ！ SVGの気になる疑問に答えます！ SVGって何？ SVG（Scalable Vector Graphics）は、XMLによって記述されたベクターグラフィック言語のこと、あるいは、SVGで記述された画像フォーマットのこと。W3Cでオープン標準として勧告されている。 Scalable Vector Graphics - Wikipedia 簡単に言うと、ブラウザで表示できるベクター画像のフォーマットです。 SVGって何がすごいの？どういうところが便利なの？ ベクターデータなので拡大しても荒れません。 例えば
SVGフォントでIVSが表示できれば幸せになれるんじゃないか。 手順 1. IVS対応フォントの入手 とりあえずテストのためグループ:IVSテスト - GlyphWikiを使う。 2. FontForgeでSVGフォントの出力 ダウンロードしたttfフォントを開いてSVGフォントとして出力、で済めばよかったのだけれども、使っているfontforge 20090923だと修正が必要みたい。 具体的には 「<glyph glyph-name="u10C000" unicode="丈" unicode="󠄀" 」と出力されているので(たぶんバグ)、「<glyph glyph-name="u10C000" unicode="丈󠄀" 」に修正。「;" unicode="」を「;」に置き換えする。 「<svg>」を「<svg xmlns="h
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
先の記事の末尾に記したように、件の処理を検証中に、twitterのTLには@kojiishiさんのヒントとなるtweetが流れ、その約2時間後には@MurakamiShinyuさんのtweetが流れることとなり、サンプルファイル（test-img-gaiji.epub）までご提供いただいた。 ※上記tweet中にサンプルファイルへのリンクが張られているので入手可能だと思う citeタグの流用で一応の成果は出たものの、この方法も試さない手はないとサンプルファイルを参考に、見よう見まねで書いてはみた……【test06】 ベースの【test01】のcssに以下をサンプルのママ追記*1し、 img.gaiji { width: 1em; height: 1em; vertical-align: text-top; } span.gaiji { display: inline-block; widt
以下、id:works014 さんの「ePUBの外字/iBooksでの表示_SVGフォント」におけるSVGフォント作成部分のサイドストーリー。 …… さて、@works014 さんのtweetば拝見してSVGフォントの作成を申し出た際、己はSVGフォントのことを軽く考へてゐた。 SVG 1.1仕様は現在第二版への改訂作業が進行してゐるんだども、安定版である2003年のW3C勧告ば参照しておくと、個々の具体字形はglyph要素のd属性として記すか、またはglyph要素の子要素であるSVGとして記述できる。 外字データを何らかのアウトラインパスデータとして受け取ればSVGのパスデータにしてglyph要素の子要素にしちゃえばいいし、ラスタ画像であってもSVG中のラスタ画像といふ扱ひにしてしまへばglyph要素の子要素にできるだらう。さう考へてゐた己。 …… @works014 さんからSVGフォ
前回の記事にあるように、画面表示上の拡大に追随すべき外字としての画像を含んだePUBを、iBooksで正常に表示させるのはちょっと難しそうだということが判った*1。 その後の展開をここにmemo的に記しておこうと思い、新たにePUBファイルを作成しつつ再検証してみた*2。 こういうことでもあるが……。 尚、私の12月11日の私のtweetから始まる関連tweet群を「ePUBの外字/iBooksでの表示_memo」として纏めておいたのでご参考まで。 cssやxhtmlはまだ手をつけはじめたばかり故、用語や用法の間違いがあるかと思います。お気づきの点は是非ご指摘くだされば幸いです。 で、先の記事の脚注に書いたように@uakira2（id:uakira）さんが「SVGフォント生成のお手伝いを」とお声をかけてくださった*3。さらにタイミングよく、ちょうど同じ日に@kojiishiさんからSVGフ
自分の頭を整理しておくために、縦書きウェブ≒日本語EPUBでの外字の使ひ方について、ちょっとメモしてみる。現在のHTML 4.01 / XHTML 1.1 + CSS 2.1 でも事情は大きく違はないと思ふが、HTML5 + CSS3を念頭に置いてゐる。また仕様上の都合のみ考慮し、現時点での実装上の挙動は無視。 さて、まず「JIS X 0213外字」だども「Unicode内字」であるような字種。これはHTML5にとって「外字」ぢゃないので、数値文字参照ででも記しておく。 次に、「JIS X 0213内字」である筈だども「Unicode内字」かどうかをカッコに入れておきつつ「旧字／正字」グリフを指定したい場合。「Adobe Japan1-6内字」であればUnicodeのIVSで表現できる筈なので、IVSで対応しておく。 ご本人に直接尋ねたわけではないんで定かぢゃねぇんだども、中の人がAJ17
ここでは電子書籍のフォーマットの1つであるEPUB形式内で使用できるSVG1.1とAdobe Illustratorについて説明します。なお、Adobe Illustratorは市販されているアプリケーションであり、ここでは細かい操作方法や図の作成方法については触れません。基本的な使い方に関してはAdobe Illustrator CS4使い方辞典のページを参照してください。 EPUB形式は基本的にはHTMLでありテキストと画像を組み合わせた表示になります。しかし、細かい図などを表示させたい場合などに対応するためEPUB形式ではSVG1.1をサポートしています。このSVGはAdobe Illustratorで簡単に作成することができます。SVG形式を決めたのがAdobeですから相性がよいのも当然と言えば当然です。 EPUB内にSVGデータを直接埋め込むことでiPadのiBooksなどの電子
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
