IBM DeveloperIBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant technologies such as generative AI, data science, AI, and open source.
2011年はSVG元年に。デザイナー大注目の画像フォーマット「SVG」の特徴を一気におさらい。
MIX11で「SVG女子」が紹介されました！ 弊社が制作をさせていただいた「SVG女子」が先日ローンチし、MIX11で大きく取り上げられました。 こちらがその様子です。 日本上陸は4/26！「SVG女子」をより楽しむために、まずはSVGについて知っておきましょう。 それでは続きからどうぞ！ SVGの気になる疑問に答えます！ SVGって何？ SVG（Scalable Vector Graphics）は、XMLによって記述されたベクターグラフィック言語のこと、あるいは、SVGで記述された画像フォーマットのこと。W3Cでオープン標準として勧告されている。 Scalable Vector Graphics - Wikipedia 簡単に言うと、ブラウザで表示できるベクター画像のフォーマットです。 SVGって何がすごいの？どういうところが便利なの？ ベクターデータなので拡大しても荒れません。 例えば
SVGで少し遊んでみた
HTML5/CSS3の重要性に関しては、ここでも何度か取り上げているが、ちょっと見逃しなのがSVGの重要性。IE9がサポートすることになって、ようやくSVGを活用したサイトの構築が現実的になって来た。HTML5のCANVASがJavaScriptで動的に「描く」ことを前提にしているAPIであるのに対し、SVGはHTMLとの親和性のよいマークアップ言語である点はちゃんと認識した上で使い分ける必要がある。特に、モバイルデバイスでは、CANVASでのアニメーションはやたらと電池を消費するので、ある程度までのアニメーションならば、CSS3アニメーション＋SVGの組み合わせの方が適している。 とうことで、今回は勉強も兼ねて、SVGを生成するプログラムを書いてみた。開発中のiPad向けのベクター・エディタ、neu.Drawから直接SVGを書き出すというモジュールだ。 グラデーションの扱いと、グループ化
SVG特集最終回 - os0x.blog
特集：スタートアップ SVG｜gihyo.jp … 技術評論社の最終回が公開されました。 なるべく実用的で且つ面白そうなネタを考えていたんですが、結局無難なグラフにしました。 SVGの場合大きく描画しても重くないので、その辺は活かせるように拡大モードを追加してみたり。 今回の記事の前半ちょろっと書いたtext/htmlなページへのSVGの取り込みはhttp://ss-o.net/test/svg/svg_load.htmlにcreateLSParserとかdocument.loadとかのパターンも含めたサンプルを置きました。 ついでなの少し紹介すると、OperaはcreateLSParserをサポートしているので、こんな感じで動きます。あ、createLSParserというのはDOM Level 3 Load and Saveで定義されているAPIです。 var parser = docu
第3回 少し高度なSVG | gihyo.jp
前回はSVGの基本的な書き方を解説しました。今回は前回触れなかった座標変換・テキスト関連に、グラデーションを解説していきます。 座標とグループ化 SVGにはg要素という複数の要素をまとめるための要素があります。このg要素によってグループ化した要素に同じ色を適用したり、座標変換（後述）をすることなどができます。 グループ化のサンプルコード(SVG) <g fill="#33ff33"> <rect x="40" y="40" width="30" height="30" /> <polygon points="0,0 43.3,25 0,50"/> </g> グループ化のサンプルコード(SVGDOM) // g(group)要素を作成 var g = document.createElementNS(SVG, 'g'); g.style.fill = '#3333ff'; var rect
スタートアップ SVG 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
第2回 SVG実習 | gihyo.jp
前回はSVGの概要を解説したので、今回はSVGの具体的な書き方をざっくりと見ていきます。 と、その前に前回のおさらいとして、SVGをウェブページで用いる方法を2つにまとめます。 SVGをXMLとして記述し、svgファイル（もしくはdataスキームなど）をobjectタグなどで埋め込むか、もしくはXHTMLを用いてHTMLに埋め込む（Firefox 4.0betaやIE9ppなどはHTML（XHTMLでない）に直接記述することも可能） JavaScriptから動的にSVGを作る SVGをXMLとしてあらかじめ記述しておく方法は画像フォーマットとしても利用できますし、InkScapeのようなグラフィカルなインターフェースで作成したものを表示するのに向いています。一方、JavaScriptでSVGを描画する方法は動的に図を描けるので、データを元にグラフを描くといったケースに適していますし、Rap
SVGの特集記事 - os0x.blog
gihyo.jpにて、SVGについての全4回の集中連載を始めました。 特集：スタートアップ SVG｜gihyo.jp … 技術評論社 第1回はSVGの基礎知識について。最初なのであまりSVG自体は出てこないですが、そもそもSVGってどうやって扱えばいいのかって話をメインに書きました。 SVGについて勉強初めてから日は浅いのですが、入門的な紹介(特にJavaScriptと絡む部分について)があまり見当たらなかったので自分で書いてみることにしました。 ややネタばらしにはなりますが、参考にしているのはAn SVG Primer for Today's Browsersとid:polynityさんの(PDF)SVG実習マニュアルがメインです。 他には Pike's SVG Tutorial 良くまとまってる。どうでもいいけど、作者は日本に留学中(ただ4,5年前の話なので今は違うと思われる)のカナダ
Google Docs の新機能「drawing」は完全 SVG ベース、現行 IE はすべて要 Chrome Frame に！ - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 先日 Google Docs が刷新され、これまで他のアプリの付加機能だった作図機能が drawing として独立しました。機能的にはこれまでの作図機能と大差ないようですが、他のユーザーとの同時編集が可能になったのは大きな進歩です。 しかし、 Web 開発者的にはもうひとつ注目すべき点があります。それは Google Docs drawing が完全に SVG ベ
ハタさんのブログ(復刻版) : SVG で横書きの文字のまま、タテに表示
前回の続きです 横書きに表示されている文字をタテに表示するというのを挑戦してます。 今回は SVG を利用しているので、ほぼ全てが座標で表現されます。 こんな感じ↓ ブラウザで座標を考える場合 (0, 0) が左上になり、それよりも外側はブラウザの表示の外になります。 そこで、「美しい日本語」という文字列を (0, 0) からレンダリングするとこんな感じになります。 単純に考えれば、この文字列を 90° 垂直に回転 させれば、タテに表示されそうですがそうもいきません。 文字列を (0, 0) にレンダリングしてしまったので、そのまま回転させてしまうと、画面の外に出てしまいます。 ちなみに、SVG の回転は transform(rotate) を使うんですが、rotateの引数に rotate(rangle, cx, cy) と X座標(cx) と Y座標(cy) の回転位置を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
