SVGファイルを外部ファイルにできるのか

[Wataru Kanzaki]

神崎渉瑠です。

HTML5のSVGタグではインラインでの記述しかできないのでしょうか？

たとえば<svg width="" height="" src="graph.svg"></svg>
などとして、別ファイルに管理できればと思うのですが。

<object><embed>での記述と、<svg>での記述では動作が違いますね。
書き方が悪いのか、それともブラウザがサポートしきれてていないのか、、、
<svg>タグで書いた方は、一部アニメーションせずに止まっています。（Mac Safari5.1）

http://home.wi-wi.jp/lab/00k/ （<object>、<embed>タグにて）
http://home.wi-wi.jp/lab/00m/ （<svg>タグ、インライン記述にて）

それにしても、JavaScriptからアニメーションさせるには、
setIntervalなどでwidthなどのプロパティを逐一変更しないと行けないのが残念ですね。
<animation>要素を作って挿入できればいいのですが、、、

[futomi hatano]

羽田野です。

> HTML5のSVGタグではインラインでの記述しかできないのでしょうか？
>
> たとえば<svg width="" height="" src="graph.svg"></svg>
> などとして、別ファイルに管理できればと思うのですが。

すでに神崎さんがお試しのように、<object> がその役割を持っています。
HTML5の<svg>はHTML内にインラインでSVGを入れるために用意されたものですので、
<svg>にsrc属性が用意されることはないかもしれませんね。

> <object><embed>での記述と、<svg>での記述では動作が違いますね。
> 書き方が悪いのか、それともブラウザがサポートしきれてていないのか、、、
> <svg>タグで書いた方は、一部アニメーションせずに止まっています。（Mac Safari5.1）

Windows 7 の Chrome 15 dev で拝見したところ、どちらも同じように動作してました。
SVGのサポートの度合いが、ブラウザーやバージョンによって違っているのでしょうね。

> それにしても、JavaScriptからアニメーションさせるには、
> setIntervalなどでwidthなどのプロパティを逐一変更しないと行けないのが残念ですね。
> <animation>要素を作って挿入できればいいのですが、、、

SVGに限らず、CanvasなどでもJSでアニメーションするには、どうしてもタイマー関数が
必要になりますので、時には面倒に感じますよね。
<animation> がどのブラウザーにも実装されるといいですよね。

--
Futomi Hatano
http://www.html5.jp/
http://www.futomi.com/
http://twitter.com/futomi/

2011年8月17日3:09 Wataru Kanzaki <goo...@wi-wi.jp>:

> --
> このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja からこのグループにアクセスしてください。
>

[teramako]

こんにちは

> HTML5のSVGタグではインラインでの記述しかできないのでしょうか？
>
> たとえば<svg width="" height="" src="graph.svg"></svg>
> などとして、別ファイルに管理できればと思うのですが。

SVGも画像フォーマットですから <img src="graph.svg"> と書けますよ。（最近のブラウザなら）
ただし、他のブラウザでは試していないので知らないですが、Firefoxだとスクリプトによる操作は出来なくなります。後述のSMILアニメーションなら可能ですが。

>
>
> <object><embed>での記述と、<svg>での記述では動作が違いますね。
> 書き方が悪いのか、それともブラウザがサポートしきれてていないのか、、、
> <svg>タグで書いた方は、一部アニメーションせずに止まっています。（Mac Safari5.1）
>
> http://home.wi-wi.jp/lab/00k/ （<object>、<embed>タグにて）
> http://home.wi-wi.jp/lab/00m/ （<svg>タグ、インライン記述にて）
>
>
> それにしても、JavaScriptからアニメーションさせるには、
> setIntervalなどでwidthなどのプロパティを逐一変更しないと行けないのが残念ですね。
> <animation>要素を作って挿入できればいいのですが、、、

SMILというものがあります。

SVG animation with SMIL - MDN Docs
https://developer.mozilla.org/en/SVG/SVG_animation_with_SMIL

Animation - SVG 1.1 (Second Edition)
http://www.w3.org/TR/SVG/animate.html

よろしくお願いします。

[hosonosanchi]

こんにちは。

Adobe EdgeでSVG画像をアニメーションさせる事ができてました。

divなどの背景にCSSでSVGファイルを指定して、アニメーションはCSSアニメーションで行っているようです。

ご参考になれば。

[外村 和仁]

外村です。

> それにしても、JavaScriptからアニメーションさせるには、
> setIntervalなどでwidthなどのプロパティを逐一変更しないと行けないのが残念ですね。
> <animation>要素を作って挿入できればいいのですが、、、

可能だと思います。以下のサンプルをChrome13とSafari5.1で確認しています。
http://dl.dropbox.com/u/336104/tmp/svg_animate.html
http://dl.dropbox.com/u/336104/demo/svgraph/sample/index.xhtml

beginElementなどを使ってアニメーションするタイミングの調節などをおこなう
必要があります。既出ですが詳細は以下に記載されています。
http://www.w3.org/TR/SVG/animate.html

--
----------------------------------------
Name : 外村 和仁
Email : k.hok...@gmail.com
URL : http://webtech-walker.com/
----------------------------------------

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

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

[Masataka Yakura]

こんにちは。

On Wednesday, August 17, 2011 9:55:20 AM UTC+9, teramako wrote:

SVGも画像フォーマットですから <img src="graph.svg"> と書けますよ。（最近のブラウザなら）
ただし、他のブラウザでは試していないので知らないですが、Firefoxだとスクリプトによる操作は出来なくなります。後述のSMILアニメーションなら可能ですが。

imgだけではなく、CSSのbackground-imageなどで読み込んだ場合もスクリプトは動きませんね。

こちらで見比べてみましたが、Opera, Chrome, Safari, IE9でも同じようです。

http://www.schepers.cc/svg/blendups/embedding.html 

[Wataru Kanzaki]

神崎です。おはようございます、こんにちは、こんばんは。

やはりサポート状況など、ブラウザ依存度が大きいですね。

そういえば、私が利用しているサーバーでは、.htaccessで
AddType image/svg+xml .svg
を設定しておかないと、<img>や<object><embed>で表示できないようでした。
（MIME-Typeを見てないブラウザは表示できます。）

> 可能だと思います。以下のサンプルをChrome13とSafari5.1で確認しています。
> http://dl.dropbox.com/u/336104/tmp/svg_animate.html
> http://dl.dropbox.com/u/336104/demo/svgraph/sample/index.xhtml

ふむ。。。

私が試したとき（３月頃ですが）は、<object><embed>だけですが、
SVGドキュメントにアクセスすること自体ができなかったりもしました。
LiveConnect（という言い方でいいんでしょうか？）の影響かもしれませんが。

<svg>はSVGイメージの埋め込みというよりも、
<div><span></span></div>などのタグ構造と同じような扱いになってると考えるとしっくりきますね。

時間が空いたときに、<iframe>の動作なども調べてみたいと思います。

AjaxでHTMLページの内容と一緒にSVGイメージやアニメーション定義をダウンロードし、
スクリプトで生成、表示する、というのがしたいのですが、
その場合は、どうやら<svg>タグを使った方がよさそうな感じですね。

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