在 html 中嵌入响应式 pdf 或 svg答案

【问题标题】：embed responsive pdf or svg in html在 html 中嵌入响应式 pdf 或 svg
【发布时间】：2017-04-11 22:42:51
【问题描述】：

我有一些使用 truetype 字体和“矢量”图像的 pdf 格式的图表 - 文件大小通常为 30kb。我还使用 Inkscape 将这些 pdf 文件转换为 svg 并使用 svgo 进行了优化 - 文件大小通常为 100kb。

这些 pdf 和 svg 文件在我检查过的设备以及使用 OperaMobileEmulator 和 Firefox 响应式设计模式的设备中“响应式”缩放。

我希望用户加载 svg 大小的 30% 的 pdf 文件，因为并非所有浏览器都支持嵌入式 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;
    }

它适用于显示文本，但在我的图表中，我使用的是海星字形。我一直无法使用 font-family 来生成这些字形，我什至尝试在 font-face 中使用 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”

【问题讨论】：

标签： html pdf svg

【解决方案1】：

您的 SVG 中可能有很多不必要的 Inskcape 数据。尝试从 Inkscape 保存为“Plain SVG”或“Optimized SVG”。您还应该考虑将 SVG 用作 .svgz（gzipped SVG）。从 Inkscape 中另存为“压缩纯 SVG”。

【讨论】：