[問題] SVG 引用點陣圖無法在 <img> 顯示

[danny0838 (道可道非常道)]

如題，檔案結構如下：

some.png
some.svg
index.html


我的 svg 以相對路徑引用同一目錄的點陣圖，並加上了一些 svg 的向量圖形：

<image xlink:href="some.png" ... />

直接以瀏覽器開啟 index.svg 檔案可正常顯示。


接著我打算將 svg 嵌入網頁中：

<img href="some.svg" width="500">

但接著以瀏覽器開啟 index.html，
只能看得到 svg 畫的向量圖形，引用的點陣圖卻無法看到。
（在最新版的 Firefox 及 Chrome 上測試）


我也試過將 some.svg 的原始檔開啟，
把 root <svg> 直接貼進 index.html 取代上面的 <img>，
此時點陣圖的部分可以正常顯示
（但似乎無法簡單達到整張 svg 設為 width="500" 的縮放效果）


請教各位前輩，這是什麼原因？有什麼辦法可以解決？

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.34.57.99
※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1420383429.A.E73.html
→ mmis1000: 因為firefox不允許被用img嵌入的svg引用外部檔案
→ mmis1000: 除非你用iframe嵌入就可以
→ mmis1000: 另一個方法是用 data:.... 這種類型的網址直接嵌入檔案
→ mmis1000: 基本上是為了安全理由而做的限制
→ mmis1000: 在bugzilla也寫不會改了
→ mmis1000: http://goo.gl/FE4nqf bugzilla issue 連結
→ mmis1000: http://goo.gl/N6g1Rk 嵌入的範例
感謝回答，又一個方便功能被安全性殺死了orz

我想做的主要是把一張點陣底圖 some.jpg 在不同地方加上標記輸出，
比如在某處放上 some-1.svg、另一處放 some-2.svg、等等，
用 svg 和 xlink 是為了重複使用相同的點陣圖以節省空間。

不考慮 xlink:href="data:xxx" 的做法，因為 base64 編碼只會更浪費空間...

直接在 HTML 裡內嵌 <svg> 可行，但操作麻煩（內嵌的 svg 不方便用軟體編輯），
似乎也不能縮放大小？

canvas 之類要寫 js 程式碼，也不考慮。

想請教是否有其他重複使用相同點陣圖的策略可用？
※ 編輯: danny0838 (114.34.57.99), 01/06/2015 21:22:16
→ mmis1000: 用js把svg當templete輸出？"<svg>{{img1}}</svg>"
→ mmis1000: 然後讀取到時自動把某個mark替代掉
→ mmis1000: 轉成 src="data:image/svg+xml;utf8,<svg.....
→ mmis1000: 之類的東西
→ mmis1000: 或是以 <object> 嵌入應該也能讀外部資源
→ mmis1000: 反正要讀外部資源就是不能用<img>
我在 Fx 上試了 <embed> 和 <object> ，確實可以載入連結的點陣圖，
但無法縮放大小（設定 width 或 height 會裁切）
這有辦法解決嗎？
※ 編輯: danny0838 (114.34.57.99), 01/06/2015 21:57:10
→ mmis1000: 把svg的width跟height改100%？
→ mmis1000: http://goo.gl/2xQJXU
看不太懂，是改 .svg 原始檔嗎？似乎無效
※ 編輯: danny0838 (114.34.57.99), 01/06/2015 22:57:54
→ mmis1000: 你有設定viewBox嗎？