渲染大量的SVG文件（提高性能）

在我們公司，我們想要提出用於創建交互式演示文稿作爲移動應用程序的通用解決方案。第一個想法是創建一個PDF文件並在手機中使用它，但它沒有解決 - 它太慢了。另一個想法是將PDF轉換爲SVG並將它們用作場景（幻燈片），這就是我現在正在處理的內容。我忘了提及，PDF包含內部鏈接註釋以在頁面之間導航。渲染大量的SVG文件（提高性能）

因此，對於PDF到SVG的轉換，我使用pdf2svg cli工具。我還編寫了PHP cli應用程序來解析PDF與他們的位置的所有鏈接。對於概念，我首先使用ReactJS在WEB上測試這個想法（我之前從未使用過React Native）。

現在的問題是：PDF包含大量高分辨率圖片和大量頁面，因此一些SVG文件非常大（最大爲11MB），所有SVG的大小都是〜70MB。渲染這些大型SVG文件時，會出現延遲（〜1-10秒），與PDF文件相比，這不是一個巨大的勝利，所以我需要優化加載時間。

我迄今爲止嘗試：

有了前面提到的PHP CLI工具我寫的，我把一些數據約SVG文件中的鏈接（<rect x="..." y="..." width="..." height="..." data-target-page="..." opacity="0"/>）。然後，我通過包含<object data="..."/>狀態的頁面編號和每個渲染創建的onClick事件監聽器爲<rect>用於導航的SVG內部標記呈現SVG。那麼，這是第一次嘗試，我不滿意的表現。我試圖用react-svg-loader來注入SVG作爲組件。它沒有解決，性能更差（將70MB SVG轉換爲JSX組件聽起來不太好）。順便說一句，我試圖建立生產項目，花了這麼長時間，我已經等不及了。所以，不是一種選擇。
除了SVG，我嘗試使用分辨率較低（每個PNG大約800kb）的PNG圖像，並將鏈接作爲div元素放置在圖像頂部，性能非常好，但是我失去了質量。所以不是一個選項。
與3相同，但與SVG和<img src="..."/>。我認爲這稍微好一些，但仍然不是一場勝利。

你有什麼建議，我仍然可以通過仍然使用SVG來提高性能嗎？它應該在React Native中表現更好還是更差？

來源

2017-10-06 gintko

SVG用於保存矢量，而不是位圖圖像！您可能想將PDF轉換爲HTML。 –

複雜的SVG會使渲染時間過長。所以你不應該爲複雜的形狀使用SVG（你的pdf可以包含更多的文本，形狀）。使用標記語言使渲染時間相當緩慢。 @BorisK表示更好地使用HTML。 –

那麼，HTML並非如此，因爲我需要響應和跨設備支持。 – gintko

我認爲你的問題的主要部分是這樣的：pdf2svg將所有的光柵圖像嵌入到SVG中的base64-encoded ASCII strings。轉換和渲染這些似乎比加載和渲染引用並存儲在外部PNG或JPEG文件中的圖像需要更多的時間。

不幸的是，我不知道一個CLI工具，可以在導入PDF時將嵌入的光柵圖像分割成多餘的文件。但是，GUI SVG編輯器Inkscape可以：使用Inkscape打開一個PDF文件，彈出一個對話框，不僅要求您選擇要顯示的頁面，還要顯示「嵌入所有圖像」選項。如果取消選中此複選框，圖像將被存儲在目錄中的PDF是由加載並僅引用的形式單獨的文件

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

我的建議是立即導入的頁面保存爲「平原SVG」然後用其他工具修改文件夾和路徑，因爲生成的SVG的結構有點複雜。用搜索和替換程序找到<image>標籤比在Inkscape中搜索它們更容易。

另一種方法可能是最初讓圖像嵌入。它們都具有形式

<image xlink:href="data:[<mediatype>][;base64],<data>" ... />

你可以從室內用SVG一些搜索工具extrect它們，然後將它們與uudecode解碼成圖像文件，然後用引用替換數據字符串。

來源

2017-10-06 16:19:49 ccprog

渲染大量的SVG文件（提高性能）

回答

相關問題