SVGの扱い

[Daichi OTA]

はじめまして。
SVGに関して2点質問があります。

１．SVGのバージョン

HTML5の仕様の中で参照されているSVGのバージョンは SVG Tiny 1.2になっているようです。
http://www.w3.org/TR/html5/references.html#refsSVG

しかし、IE9やWebKitではSVG 1.1を実装しているように見受けられます。（Firefoxは古いものしか見つけることができませんでした。）
http://blogs.msdn.com/b/ie_jp/archive/2010/04/14/svg-in-ie9-roadmap.aspx
http://www.webkit.org/projects/svg/

HTML5では今後どちらをサポートしていくのでしょうか。

２．外部SVGファイルの参照

SVGファイルを参照する場合、imageタグとobjectタグ（あるいはembedタグ)とどちらを用いればよいでしょうか。

よろしくお願いします。

[teramako]

こんにちは

> （Firefoxは古いものしか見つけることができませんでした。）

https://wiki.mozilla.org/SVG:Home_Page
"To provide a high quality implementation of SVG 1.1 Full "

https://developer.mozilla.org/ja/Mozilla_SVG_Status

とありますので、GeckoもSVG 1.1だと思われます。
古い情報しかないのは、もともと(完全ではありませんが)サポートしていたからではないでしょうか。

あと、Opera がまたなきものに....
http://jp.opera.com/docs/specs/presto27/svg/elements/
を見ると、1.2Tiny もやろうとしているようですね。
（やっぱりOperaは最強?）

> SVGファイルを参照する場合、imageタグとobjectタグ（あるいはembedタグ)とどちらを用いればよいでしょうか。

好きなものでOKだと思います。（s/image/img/ ですよね)
imgだとimage/svgに対応していないクライアントでは表示出来ない可能性がありますが....
あと、svg内のscriptは動かないはず。(SMILは動くよ)
objectで書けば、クライアント自体は対応してなくてもプラグインで表示できるかも。objectの場合は、scriptが動いたと思います(未確認)。
など、挙動に違いがあったように思うのでどちらか1択というわけではないと思います。

よろしくお願いします。
----
teramako
http://twitter.com/teramako/
http://d.hatena.ne.jp/teramako/

2011年10月5日11:55 Daichi OTA <irxnjh...@gmail.com>:

> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/F7YcA7MxOfQJ
> にアクセスしてください。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com
> にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja
> からこのグループにアクセスしてください。
>

[Satoshi Watanabe]

こんにちは。

渡辺と申します。
(たぶん初投稿です。はじめまして。)

> HTML5の仕様の中で参照されているSVGのバージョンは SVG Tiny 1.2
ちなみに、
SVG Tiny1.2 はモバイル向けの仕様なので、
Filterといった高機能なものがサポートされていなかったり、
DOMがサポートされてなかったり(代わりに micro DOM というDOMのサブセットをサポート)
します。
(IkivoやBitFlashのようにモバイル向けのSVGビューアも意識された仕様なので)

IE9やWebKitはPC向けのブラウザなので、
SVG1.1をサポートしているのだと思います。

SVG TIny1.2には、
SVG 1.1にはない、textAreaだったり、video/audioだったり、Focus APIが入っていたりしますが、
ここらへんは、HTML5のものを使えば事足りるような気もします。

個人的には、現時点では、SVG1.1を参照すれば良いと思います。
(今後どうなるかはよくわかりません。。。)

蛇足かもしれませんが、
ご参考までに。

2011年10月5日12:36 teramako <tera...@gmail.com>:

[Takashige Nakagawa]

はじめまして。中川と申します。

> objectで書けば、クライアント自体は対応してなくてもプラグインで表示できるかも。objectの場合は、scriptが動いたと思います(未確認)。
> など、挙動に違いがあったように思うのでどちらか1択というわけではないと思います。

参照しているsvgのscriptが動くかは僕も未確認ですが、objectのcontentDocumentを介して、外側のscriptからobjcet内の要素を操作することができますね。

これからもよろしくお願い致します。

2011年10月5日12:36 teramako <tera...@gmail.com>:

[Daniel Davis]

こんにちは。Opera のダニエルです。

クロスブラウザのSVGファイル参照方法はいろいろ見たことがありますが、一つの簡単な方法は下記のようです：

<object type="image/svg+xml" data="image.svg" width="320" height="240">
<img src="image.png" alt="画像">
</object>

全てのブラウザでは確認していませんが、最もシンプルで実用的な方法ではないかと思います。

もう一つの方法はModernizr ( http://www.modernizr.com )
を使ってSVGのサポートを判断するのです。ブラウザのサポートによってJavaScriptかCSSでSVG、PNGファイルを表示、非表示します。もちろんこれの方がコードが多いですが、最も安心できる方法ではないかと思います。

そういえばクロスブラウザのSVGといえば、バージョン2になったばかりのRaphael
( http://raphaeljs.com )
もおすすめです。ただ、ベクター画像を簡単に作るライブラリーなので、クロスブラウザのSVGファイル参照方法としては使えないと思います。


On Wed, 05 Oct 2011 11:55:29 +0900, Daichi OTA <irxnjh...@gmail.com>
wrote:

> はじめまして。
> SVGに関して2点質問があります。
>
> *１．SVGのバージョン
> *

> HTML5の仕様の中で参照されているSVGのバージョンは SVG Tiny
> 1.2になっているようです。
> http://www.w3.org/TR/html5/references.html#refsSVG
>
> しかし、IE9やWebKitではSVG
> 1.1を実装しているように見受けられます。（Firefoxは古いものしか見つけることができませんでした。）
> http://blogs.msdn.com/b/ie_jp/archive/2010/04/14/svg-in-ie9-roadmap.aspx
> http://www.webkit.org/projects/svg/
>
> HTML5では今後どちらをサポートしていくのでしょうか。
>

> *２．外部SVGファイルの参照
> *

> SVGファイルを参照する場合、imageタグとobjectタグ（あるいはembedタグ)とどちらを用いればよいでしょうか。
>
> よろしくお願いします。
>


--

Daniel Davis
Web Evangelist
Opera Software (Japan)

Email: dan...@opera.com
Twitter/Identi.ca: @ourmaninjapan
URL: http://people.opera.com/danield

[teramako]

こんにちは

念のためobjectでscriptが動くかやってみたところ、きちんと動きました。
テストしたのは Windows XP で
* Firefox 7.0.1
* Google Chrome 16.0.899.0 dev-m
* Opera 11.51
の3つ

ところで、Operaってbackground-imageにsvgを指定できない？

<?xml version="1.0"?>
<svg width="100" height="20"
version="1.1"
xmlns="http://www.w3.org/2000/svg">
<script type="text/javascript">
var x = 0;
window.setInterval(function() {
document.getElementById("rect").setAttribute("x", x >= 80 ? x = 0 :
x += 5);
}, 200);
</script>
<rect id="rect" x="0" y="0" width="20" height="20"/>
</svg>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>SVG Test</title>
<style type="text/css">
#bg { width: 100px; height: 20px; background-image: url("svg_test.svg"); }
</style>
</head>
<body>
<h1>SVG Test</h1>
<h2>img</h2>
<p><img src="svg_test.svg" width="100" height="20"></p>
<h2>Object</h2>
<object type="image/svg+xml" data="svg_test.svg" width="100"
height="20"></object>
<h2>background-image</h2>
<div id="bg">
<p>hoge</p>
</div>
</body>
</html>

[Daichi OTA]

各ブラウザはSVG 1.1を実装しようとしており、埋め込みにはobjectタグを使ったほうが（今のところは）汎用性が高いということですね。

一日で質問した以上に多くのことを知ることができました。ありがとうございます。

[Wataru Kanzaki]

神崎渉瑠です。

>
> ２．外部SVGファイルの参照
>
> SVGファイルを参照する場合、imageタグとobjectタグ（あるいはembedタグ)とどちらを用いればよいでしょうか。

<img>と<object>は目的が違うので、
単純な画像表示としてなら<img>、
JavaScriptでクリックなどの操作まで制御するなら<object>で「なければならない」と思います。

ただし他の方も返信されているように、
<img src=“image.png”>が古いブラウザ（NetscapeとかIE5？以前とか）で表示できないのと同じように、
image/svg+xmlという画像形式を表示できないブラウザでは、<img>は表示できません。

SVGの中でスクリプトを書けば<object>、<embed>、<iframe>のいずれでも動きますが、
HTMLファイルから<object>や<embed>の中にアクセスするのは
ブラウザ・バージョン依存（言い方が古いですがLiveConnect）だと思います。.

乱暴かもしれませんが、
Ajaxで、<svg>タグのinnerHTMLに放り込むというのもアリではないかと思います。

あと、ブラウザが<object>と<embed>のどちらをサポートしているかにもよりますね。
サポートしていなければ、JavaScriptでアクセスする以前に、表示できません。

<object>
<embed><noembed><img></noembed>
</object>

と書けば、もっとも多くのブラウザをサポートできますが、
HTML5の文法とは関係なくて、どのブラウザを制作者がサポートするかの話になると思います。
（HTML5に<noembed>はありません。たぶん<embed>も消える（消えた？）んじゃないでしょうか。）

純粋なHTML5はブラウザを限定しますので、
<object>か<img>を、目的に合わせて選択するのがベストではないかと思います。

個人的にはJavaScriptで処理するのは気が引けます。
（やるのであれば、HTMLで処理した上で、スクリプトで上書きする。）
スクリプトオフ環境で表示できませんし、
HTML5はスクリプト必須というわけではないと思いますから。

-----
Wings-Winds
http://www.wi-wi.jp/
神崎渉瑠

[Shumpei Shiraishi]

管理人の白石です。

直前にMLに投稿された神崎さんのメールですが、投稿の承認待ち状態で止まってしまっていました。
（スパムを避けるため、初回の投稿に関しては管理者の承認が必要な設定になっています）

たまーに、Googleグループ、承認待ちのメールがあることを管理者に知らせてくれないことがあります。。
困ったもんだ。

神崎さん、投稿されないことにヤキモキしたかと思います。
申し訳有りませんでした！

2011年10月5日16:28 Wataru Kanzaki <goo...@wi-wi.jp>:

[Daniel Davis]

こんにちは。

OperaではSVGをbackground-imageとして通常使えますが、Teramakoさんのおかげでバグが見つかりました。
あるSVG画像をimg要素に使えば、その画像が同じページにbackground-imageとすれば表示されないみたいです。
元々の開発者に連絡しましたので近いうちに修正されることを希望しています。

ご報告、ありがとうございました。

[Akihiro Oyamada]

神崎渉瑠さんのおっしゃるとおり、imgとobjectでは目的や動作が異なります。
要は、ざっくりと言ってしまうと
* 画像としてSVGを埋め込む
* 外部ドキュメントとしてSVGを埋め込む
の違いと捉えておけばいいと思います。

また、XHRでSVGを放り込む、という方法は私も以前試したことがあり、
例えば下記のような感じで実現可能です。
http://dl.dropbox.com/u/1236764/temp/svgmap/test.html

なお、SVGについて、先日行われたChrome+HTML5 Conferenceで
お話させていただいた資料が「Dive into SVG」というタイトルで
動画、スライドなどが公開されていますのでよろしければご参照ください。
http://events.html5-developers.jp/conference/2011/08/program.html

ちなみに、<embed> はプラグイン埋込み要素としていまはSpecに乗っていたと記
憶しています。

小山田 @yomotsu

> こんにちは。
>
> OperaではSVGをbackground-imageとして通常使えますが、Teramakoさんのおかげ
> でバグが見つかりました。
> あるSVG画像をimg要素に使えば、その画像が同じページにbackground-imageとす
> れば表示されないみたいです。

>>>>> このグループから退会するには、html5-developers-
>>>>> jp+unsu...@googlegroups.com
>>>>> にメールを送信してください。
>>>>> 詳細については、http://groups.google.com/group/html5-developers-
>>>>> jp?hl=ja

>>>>> からこのグループにアクセスしてください。
>>>>>
>>>>
>>>> --
>>>> このメールは Google グループのグループ「html5j.org」の登録者に送られ
>>>> ています。
>>>> このグループに投稿するには、html5-dev...@googlegroups.com に
>>>> メールを送信してください。

>>>> このグループから退会するには、html5-developers-
>>>> jp+unsu...@googlegroups.com にメールを送信してください。
>>>> 詳細については、http://groups.google.com/group/html5-developers-
>>>> jp?hl=ja からこのグループにアクセスしてください。
>>>>
>>>>
>>>
>>
>
>

[Wataru Kanzaki]

神崎渉瑠です。
# オフトピ

>
> 直前にMLに投稿された神崎さんのメールですが、投稿の承認待ち状態で止まってしまっていました。
> （スパムを避けるため、初回の投稿に関しては管理者の承認が必要な設定になっています）

いえ、それなら良いのですが、初回というわけではないので、、、
何ヶ月か空くと初回扱いになるんでしょうか。

メールの直前に、差出人アドレスを間違えて送信してしまい、

>連絡しようとしたグループ（html5-developers-jp）が存在しないか、グループにメッセージを投稿する権限がない可能性があります。

というメールをGoogle Groupsから受け取った事が影響したのか、、、
IPアドレスか何かではじかれたんでしょうかねえ？

[Shumpei Shiraishi]

神崎さん

白石です。

> いえ、それなら良いのですが、初回というわけではないので、、、

それはすいませんでした！
多分、ぼくの以前の操作ミスです。

Googleグループの投稿承認画面ですが、「許可」と「常に許可」があって、「常に許可」を選べば、そのユーザについては今後は承認なしで投稿できるようになります。
「許可」だと、「今回の投稿のみ許可」（次回の投稿時も承認が必要）という意味になります。

昔Googleグループの操作に慣れていない頃、これらの違いがよくわかっていなくて、「許可」をいつも選んでいた時期があります。
たぶんそのせいです・・・申し訳ない。。

2011年10月6日16:33 Wataru Kanzaki <goo...@wi-wi.jp>:

[teramako]

> OperaではSVGをbackground-imageとして通常使えますが、Teramakoさんのおかげ
> でバグが見つかりました。
> あるSVG画像をimg要素に使えば、その画像が同じページにbackground-imageとす
> れば表示されないみたいです。
> 元々の開発者に連絡しましたので近いうちに修正されることを希望しています。

Operaが対応してないなんてあり得ないと思っていましたが、そういうことだっ
たのですね。
対応ありがとうございます。

On 2011/10/06 12:29, Daniel Davis wrote:
> こんにちは。
>
> OperaではSVGをbackground-imageとして通常使えますが、Teramakoさんのおかげ
> でバグが見つかりました。
> あるSVG画像をimg要素に使えば、その画像が同じページにbackground-imageとす
> れば表示されないみたいです。

[Hiromi Morikawa]

はじめまして、森川裕美と申します。
いつもＭＬ拝見させていただいております。

SVGに関してちょうどデモを作成しているのですが、
不明点があるので質問させていただきたく思います。
レベルの低い質問でしたらすみません。

<object>を用いてSVGを参照しているのですが、
Chromeでは透過で表示されるものの、
Safari（MobileSafari含む）では背景が白で表示されてしまい透過になりません。
XHTML中に混在させた場合には透過してくれるのですが・・・。

どなたか解決方法もしくは仕様をご存知の方はいらっしゃいませんでしょうか？
よろしくお願い致します。

2011年10月6日19:10 teramako <tera...@gmail.com>:

[Satoshi Watanabe]

森川さん

こんにちは。わたなべと申します。

手元のMacのSafari 5.1で
以下で試してみましたが、再現できませんでした。
(背景色が白にはなりませんでした。。。)

* test.html
<html>
<body style="background-color:red">
<div>test</div>
<object width="200" height="200" data="./test.svg"></object>
</body>
</html>

* test.svg
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="50" height="50" fill="blue" />
<circle cx="70" cy="70" r="50" fill="green" />
</svg>

もし差し支えなければ、
どのように記述したかを教えていただけないでしょうか？

SVGの仕様としては、
背景とアルファブレンディングされるのが仕様と私は解釈しています。
http://www.w3.org/TR/SVG/render.html#ParentCompositing
(勘違いだったら指摘してください)

よろしくお願いいたします。

2011年10月13日14:02 Hiromi Morikawa <hiromi...@gmail.com>:

[Hiromi Morikawa]

わたなべ様

こんにちは、森川です。
ご対応ありがとうございます！

作ってくださったソース（test.html/test.svg）をそのまま私の環境
（【PC】Win XP / Safari 5.0.5)
で試してみたところ、白背景になってしまいました。

Ｓａｆａｒｉのバージョンを5.1.1の最新に上げたところ、
わたなべ様のサンプル、私のデモとも透過が反映されました。

バージョンによって挙動が違ったようです、お騒がせしました。
5.0.5は仕様が完全に反映されていなかったのかもしれませんね・・・。
iPhoneのほう（iPhone4 iOS4.3.2）も白背景のままなのでOSのバージョンを上げてみることにします。

ちなみに私のサンプルでは、SVGはillustratorから書き出したSVG（SVG1.1）を使っています。
objectタグの記述はわたなべ様のものと違いはありません。

以上、よろしくお願い致します。

2011年10月13日17:47 Satoshi Watanabe <sassy.w...@gmail.com>:

[Masataka Yakura]

森川さん、こんにちは。

矢倉と申します。

On Thursday, October 13, 2011 6:45:33 PM UTC+9, hiromitsu wrote:

Ｓａｆａｒｉのバージョンを5.1.1の最新に上げたところ、
わたなべ様のサンプル、私のデモとも透過が反映されました。

バージョンによって挙動が違ったようです、お騒がせしました。
5.0.5は仕様が完全に反映されていなかったのかもしれませんね・・・。
iPhoneのほう（iPhone4 iOS4.3.2）も白背景のままなのでOSのバージョンを上げてみることにします。

WebKitのバグかと思い、調べてみたら見つかりました。

https://bugs.webkit.org/show_bug.cgi?id=10687 

http://trac.webkit.org/changeset/68198 

かなり古いバグだったようですが昨年9月に修正されたみたいです。Safari 5.0やiOS4のSafariだと動かないのはそのせいですね。

修正が入ってるのはWebKitのバージョンが534以降のようなので、iOS5のSafariやAndroid 3 (どちらも534系)ではたぶん大丈夫だと思います。

[Hiromi Morikawa]

矢倉さん

こんにちは、森川です。

私のほうでもWebKitの関係かと思い調べてはいたのですが、
情報に辿りつけていなかったので原因が分かりスッキリしました。
iOS5のSafariで確認したところ、無事に透過して表示されました。

丁寧な対応ありがとうございました！

2011年10月14日17:30 Masataka Yakura <myaku...@gmail.com>:

> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。

> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/sOtZrCcRbeAJ
> にアクセスしてください。