Question

我有一些使用truetype字体和“矢量”图像的pdf格式的图表 - 文件大小通常为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>

pdf“插件”的开销是否会降低加载svg的效率？

TIA

EDIT 这是一些更多的信息。我正在使用svgo进行优化。我正在使用一种独特的truetype字体[starfisher.ttf]。我确实创建了webfonts：

    @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字形。我一直无法使用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”

Answer 1

你的SVG中可能包含很多不必要的Inskcape数据。尝试从Inkscape保存为“Plain SVG”或“Optimized SVG”。您还应该考虑将SVG作为@RunWith(Cucumber.class) @CucumberOptions( format = { "html:target/cucumber-html-report", "json:target/cucumber-json-report.json" }, glue = { "com.example.common", "com.example.concrete" }, monochrome = true, strict = true)（gzip SVG）提供服务。从Inkscape保存为“Compressed Plain SVG”。

在html中嵌入响应式pdf或svg

1 个答案: