在html中嵌入響應式pdf或svg

我有一些使用truetype字體和「矢量」圖像的pdf格式圖表 - 文件大小通常爲30kb。我也使用Inkscape將這些pdf文件轉換爲svg，並使用svgo進行了優化 - 文件大小通常爲100kb。在html中嵌入響應式pdf或svg

這些pdf和svg文件在我檢查過的設備中「響應地」縮放，以及使用OperaMobileEmulator和Firefox響應式設計模式。

我寧願用戶加載PDF文件，該文件是30％的SVG的大小，因爲不是所有的瀏覽器都支持嵌入PDF - 我使用「回退」到SVG - 這裏是有關的標記：

 <style> 
     object {height:60em; width:100%} 
     img {height:100%; width:100%} 
     </style> 

     <object data="7x7.pdf" type="application/pdf" > 
     <img src="7x7.svgo.svg" alt=""> 
     </object>

pdf「插件」的開銷是否比加載svg的效率低？

TIA

編輯下面是一些更多的信息。我正在使用svgo進行優化。我正在使用獨特的truetype字體[starfisher.ttf]。我沒有創建網絡字體：

@font-face { 
    font-family: 'starfisherregular'; 
    src: url('starfisher-webfont.woff2') format('woff2'), 
    url('starfisher-webfont.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
    }

其作品用於顯示文本，但在我的圖表，我使用starfisher字形。我一直無法使用字體家族來生成這些字形，我甚至試圖使用fontfisher中的starfisher svg字體，該字體無法正常工作，並且嘗試將此字體添加到svg defs中失敗 - 所以我必須將文本轉換爲當我使用poppler在inkscape中打開我的PDF文件時發生的路徑 - 因此我的svg文件比我的pdf文件大。我可以將它保存爲Compressed Plain SVG，但我無法在瀏覽器中顯示它。

我的.htaccess文件是：

AddType image/svg+xml .svg .svgz

我的標記是：

<object type="image/svg+xml svgz" data="7x7.svgz"> 
    Your browser does not support SVG 
    </object>

我得到的是「你的瀏覽器不支持SVG」

來源

2017-04-11 user2301129

您SVGs可能有很多的不必要的Inskcape數據。嘗試從Inkscape保存爲「Plain SVG」或「Optimized SVG」。您還應該考慮將這些SVG作爲.svgz（gzipped SVG）。從Inkscape保存爲「Compressed Plain SVG」。

來源

2017-04-12 10:12:19

在html中嵌入響應式pdf或svg

回答

相關問題