在html中嵌入响应性pdf或svg

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

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

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

它用于显示文本，但在我的图表中，我使用的是starfisher标志符号。我无法使用font family生成这些图示符，我甚至尝试在字体中使用starfisher svg字体，但没有成功地将此字体添加到svg defs中-因此，当我使用poppler在inkscape中打开pdf时，我必须将文本转换为路径-因此，我的svg文件比我的pdf文件大。我可以将其保存为压缩的普通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

---

我得到的只是“您的浏览器不支持SVG”

您的SVG中可能有很多不必要的Inskcape数据。尝试从Inkscape保存为“普通SVG”或“优化SVG”。您还应该考虑将SVGS服务为<代码> SVGZ （GZIPPEG-SVGS）。从Inkscape另存为“压缩的普通SVG”

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