元画像のcssが少し修正されている。SVGの場合(内容にもよると思うが)通常のjpgやpngなどの画像に比べサイズ変更の書換えに時間がかかるようだ。pngなどの画像に変換して表示すればいいような気もしたので私の持っている画像ソフトでやってみたがどうやらcssの部分は反映されないようで(cssが効くのはブラウザとそれなりの画像ソフトのみ?)、文字の部分がうまく表示されずあきらめました。仮にできてもファイルサイズはかえってすごく大きくなるみたいだし。今後PCやブラウザのスピードもどんどん上がるし、仕様も統一されてくるし、ブラウザ共通にSVG画像をつくるテクニックも上がってくるだろうし、何より変更がすぐに反映されることなどいろいろ考えると、SVGをそのまま表示するメリットの方がじきに大きくなってくると思う。...などと言ってうまくできなかったのをごまかす。ブラウザの中でpng画像などに変換してそれを表示に使えればさらにいいのかもしれませんが、残念ながら私にはそのスキルはなかったのでした。...というわけで、自分でSVG画像を作れるわけではないけれど、試しにやってみましたという話。@hashccさんに感謝!感謝!追記:参考に(2015年9月8日)同じようなことをやろうとしている人がいましたら少しでも参考になるようにと、今回検討したことなど記しておきます。画像の表示タグは<img>タグのほかに<object>や<embed>を使う方法もありますが、今回のSVG画像の場合サイズを変えると見え方がちがいます(本来SVGはそうではないと思うんだけど)。画像を書き出してからそのサイズを変えて表示するか最初からそのサイズで書き出すかの差だろうと思っていますが、今回は一番自然に見えた<img>タグを使いました。当初元画像の画像サイズはImageオブジェクトから取得していました。元画像の幅と高さ(単位px)。....}しかし通常の画像(jpg写真など)では特に問題はなかったけど、svg画像では画像サイズの取得で少し問題が出ました。あるブラウザでは画像が表示されず、調べてみると画像サイズが取得できていなかったのです。元画像の幅と高さ(単位px)。Opera31)で取得できるようになりました。jpg写真なども従来どおり問題ありません。とるのが本当だとは思うのですが、SVG画像だとまたもや一部のブラウザではとれません。<img>タグにまずはサイズを指定せずこの方法でとるというのが今のところもっとも無難そうです。使っている理由とセキュリティーについては以下に述べます。init_set;としていました。ところがときおりsvg画像が表示されず、そのときはなぜか画像サイズが取得できていません。毎回ではなく時折で、この画像の表示一発目に多いようです。キャッシュの有無などともからむ何かタイミング的な問題があると思われました。そこで、setTimeoutを入れて画像サイズ取得のタイミングを少し遅らせてみました。}結果、予想どおりばっちりOK。以後この現象は出なくなりました。画像をロードしてから実際にタグに画像のサイズがセットされるのにほんの少し時間がかかる場合があるようです。100ms(0.1秒)に特に根拠はありません。表示されて待ち時間の増加としても実質問題がない範囲でということで。SVG画像だからなのか、あるいはその内容によるのかなど、詳しくは調べていません。その他細かいのは省略。3.セキュリティーこのようなプログラムを書く時はいつもだったらphpを使って表示条件などはほとんど固定的に指定してしまうのですが、今回はjavascriptだけでしかもその場ですぐ表示条件を変えられるようクエリーでの指定を受け付けるようにしました。最初全然考えなかったのですが、これだと画像にへんな画像や宣伝など勝手なものを指定して掲示板などに投稿すればそれを表示させられるということに気がつきました。そんなことするやつもたぶんいないだろうけど。念のため表示チェックを追加。1.画像についてはページと同一ドメイン(正確にいうならホスト)の画像のみ表示。2.titleとinfoについてはページと同一のreferrerを確認して表示。その他のパラメータ、画像の大きさ、位置、...などについてはまあいいでしょう。運用が面倒にはなるけれど、以下のいずれかの方法をとってクエリーの受入はなるべくやめるのが正解かもしれません。1.別にパラメータリストを作ってそれを読み込むようにし、クエリーでパラメータキーのみ指定。2.都度ファイル名を変えてファイルを作成しパラメータを書換え。必要なら共通部分は別にして読み込み。できればそうした方がいいと思うので、無精でない方はぜひこちらで。2の方法でやるとして設定部とスクリプト部を分けてみました(HTML+javescript分離版)。img.htmlを表示したい名前でコピーし(img_phpto1.htmlなどと)、表示設定の部分を変えればOK。クエリーは一切受け付けません。セキュリティーチェックも取り除いたのでhttp://指定で他のドメインの画像も表示は可能です。ファイルサイズなんて気にしないという方は前のクエリー版からクエリー受入部分を取り除いた都度名前を変えたファイルで表示するのもいいかと思います。追記)その後インライン画像に付箋などつけられないかという話があったので少し検討してみました。やりたいのは、インライン表示した画像に付箋を付けたり剥がしたりしたいとのことでした。画像に付けるというところがミソのようで、画像の位置に追従させなくてはなりません。結果から言うと、何とかそれらしいことはできました。ページの任意の位置にはもちろん、画像をブロック表示して、および画像をインライン表示して、それぞれ付箋をつける方法が書いてあります。←左のアイコンをクリックすればその方法と実際のデモが見れます。←こちらはそのhtmlとjavascriptのソースです。付箋らしいのをtextareaでつくり、移動、サイズ変更、保存、読み出しなどをjavascriptで制御しています。お話をいただいた方に送った説明用ファイルほぼそのままですが...。上記の画像のズームやスクロールとあわせて画像表示の参考にでもなればということで。