SVG ScreenshotをXMLで表現する
from ScreenshotML
SVG ScreenshotをXMLで表現する
svgもxmlだけど表現力が豊かすぎるので、機能を限定した独自スキーマを考える
SVG Screenshotでの課題
svgは自由度が高すぎる & 記述をミスしやすい
描画方法の仕様変更に弱かったり
viewBox, width, x を忘れたり
scriptが埋め込まれたり
いますぐ表示できるサンプルXML
<web-image> ドキュメント リンク情報などの事実を淡々と書くだけでいい
描画スタイルに関することを書かなくてすむ
XPathでアクセスできるので解析も行いやすい
ChromeのDevToolsのNetworkタブでは変換後のSVGテキストしか確認でなくなった。XSLが作用する前の生のXMLドキュメントを見たい場合は、FirefoxのDevToolsかcurlコマンドを使うといい 2023/5/3
リポジトリ
以下、作業ログ
XSLは、XMLをブラウザでどう見せるかを定義するファイル
型をガチガチに定義する前に、exampleを書いたほうが良さそう 
理想形を先に書いて、定義をそれに合わせる。初学者だしね！
スタイル未定義なXML
「XMLとして体裁は成しているものの、styleは不明だよ」というChromeのビュー
XSLTを書いて、XMLから参照する
参照超簡単
の下に を書くだけ 本番は Domains, protocols and ports must match を守ること
開発中は適当なローカルhttpサーバー立てて相対パス参照で良い
Chromeだと file:// は許されない
書き方
スタイル当てられた
xmlが配信されて、内部で参照されているxslが適用される
埋め込み系HTML要素 (HTML — iframe, embed, object 要素) での表示実験
明示的にwidth, heightを与える必要があるものの、SVGとして表示できた
JSは一切書いていない
htmlCopied!
<object width="571" height="506" data="./pancake.xml"></object><iframe width="571" height="506" src="./pancake.xml"></iframe><embed width="571" height="506" src="./pancake.xml"></embed>
img要素では表示できない
上の実験結果からも分かる通り、いくらSVGとして描画するXSLTを定義しているとはいえ、さすがに無理だった
xml取得〜xslt適用までの流れをserverかServiceWorkerでやれば、clientにSVGコンテンツとして返せるのではないか
| 操作 | フォーマット |
| upload | xml |
| download | svg |
upload時にスキーマを満たすことを検査できるので安全
GyakkyJS (server side) でxml+xsl → svgに変換して配信するデモ
無事、img要素で表示できた