Android：如何將矢量可繪制圖像加載到 webview 中？

Question

對不起，如果這是重復但我努力搜索並沒有發現這個問題還沒有問......

所以回到過去的 Android 時代，您可以將這樣的內容添加到 WebView 的源 html 中：

<img src='file:///android_res/drawable/my.png'/>

它會在 WebView 中正確顯示 my.png。 但是——Android 現在支持（並且更喜歡我們使用）這些新奇的矢量可繪制對象，而 Android Studio 的Vector Asset Studio使得從 SVG 文件或其他文件中導入它們變得非常容易。

最棒的是，為了向后兼容，在構建過程中會自動生成 .png 以支持各種 dpi/屏幕尺寸以支持舊設備。 因此，如果您的目標是舊設備，則那里有 .png 圖像。

要是我能聯系到他們就好了。 因為，據我所知，使用矢量圖形確實會破壞 WebViews 中的file:///android_res/drawable/ img鏈接。 這很奇怪，因為正如我所說，有 .png 文件可以查看，如果它只是查看的話。

我想過幾種方法來解決這個問題，但都沒有奏效：

由於 .pngs 是即時生成的並包含在 .apk 中，我想也許我可以直接指向生成的文件之一，例如file:///android_res/drawable-hdpi-v4/my.png . （我檢查了 .apk 文件，這就是其中一個文件所在的位置..）但那里沒有這樣的運氣。 破碎的圖像。
好吧，我想——也許有一種方法可以讓 WebView 直接顯示矢量對象。 也就是說，也許 WebView 會識別<img src="file:///android_res/drawable/my_image.xml"/>或類似的東西。 我的意思是，Chrome 可以渲染 svg 對嗎？ 也許它也支持 .xml 矢量格式。 但這里也沒有骰子。 （即使它有效，也不太可能支持舊的 pre-chromium webview 版本。）
我嘗試的第三件事是在res/drawable只包含一個 xxxhdpi 大小的 .png，以便 webview 找到它並希望顯示它。 不幸的是，這也不起作用。 似乎在/drawable有一個 .xml 向量就足以讓它阻止 png，無論它是在/drawable還是/drawable-xxxhdpi目錄中。

所以顯而易見的問題是：有沒有辦法讓 WebView 顯示矢量 xml（或生成的相關支持 .png）？ 我們如何從帶有矢量可繪制對象的 WebView 中的 HTML 訪問可繪制對象？ 特別是無需以編程方式執行任何操作？

有誰知道這應該如何工作？ 我想接下來要做的就是深入研究 chrome/android 源代碼，試圖找出file:///android_res/drawable/工作原理，但這聽起來並不有趣，所以如果有人有答案，那就是有幫助。

我可能在這里遺漏了一些非常明顯的東西。 提前謝謝！

更新：我嘗試/排除的其他事情包括（1）刪除圖像名稱中的下划線（因為我認為它們可能會被替換為“/”），（2）在loadDataWithBaseUrl()中 baseurl 的各種排列

Answer 1

好吧，四年后，我想出的最佳解決方案就是擁有兩個矢量文件——（1）應用程序的 xml Android 矢量文件，然后（2） .svg格式的相同圖像網絡視圖。 與為每個 dpi 等提供單獨的.png或.gif相比，這仍然是一個較小的解決方案。

SVG 和矢量格式在內部非常相似，因此將一種格式轉換為另一種格式並不困難。 實際上，Android Studio 會轉換 SVG->XML。 如果你想走另一條路，只需比較幾個例子。

因此，只需將您的 svgs 放在assets/svg/ ，然后您就可以在 HTML 中使用<img src='file:///android_asset/svg/mysvg.svg'/>從網絡視圖訪問。

仍然存在存儲問題。 但是 svgs 相對較小（並且您可以縮小 - 即，從 webview 未使用的 SVG 文件中挖出一些額外的絨毛），因此它不像替代方案那么糟糕 - 在apk。