[B! svg][html] mysticateaのブックマーク

ChromeでSVGが表示されない現象 - Qiita

特定のSVGファイルがChrome（少なくともv51.0.2704.84 から、2017年12月26日現在の最新バージョンである v63.0.3239.108まで）で表示されない現象があるようです。特定のSVGファイルとは、image要素のxlink：href 属性が xlink：href = "data：img/png; と記述されているものです。 IE,　Edge,　FireFox,　Safariのそれぞれ最新版ではこの現象は確認できませんでした。解決法テキストエディタでSVGファイルを開き、xlink：href = "data：img/png;　(画像赤罫線で囲った箇所)　をxlink：href = "data：image/png;と書き換えてやると正しく表示されます。 Photoshop, Illustratorの現行バージョンで書き出しを行うと、Chromeで表示されないx

mysticatea 2017/12/26

むしろなんで img/png で表示してるの...??

svg
html

リンク

DIV ⇒ SVG 移行して気付いたこと - ジンジャー研究室

マップ閲覧・編集システムで画面上に DIV で描いていた図形を SVG に移行した。内部に数百のオブジェクトを含む要素の動作が重く、ドラッグしたときにカクカクになる問題を解決したかった。ちなみに Virtual DOM は使っているがすでに最適化は済んでおり、毎回描画されるような事態はあらかじめ避けている。代替案として Canvas と迷ったが CreateJS のようなライブラリを使わないとイベントハンドリングがきついので、 SVG で行けるならそれが一番。以下、移行した結果と移行中に気付いたことのまとめ。描画パフォーマンスが上がった（Firefox: 20fps ⇒ 60fps、Chrome: 50fps ⇒ 60fps）。 Chrome の DevTools で見ると、DIV 版は UpdateLayout と Paint に時間がかかっているが、 SVG は Layout に時間