Question

我们正在构建一个移动应用，该应用使用嵌入式Web视图来显示其中包含大量技术插图的操作员手册。这些插图来自EPS矢量文件，我们将其转换为SVG以获取清晰可扩展的图像。

不幸的是，在某些情况下，图像变得非常大且缓慢。例如，我们有一个SVG映像，大小为4.5MB，包含23000个独立路径。该图像几乎可以立即在iOS上显示，但是在现代Android手机上渲染大约需要4秒钟，这严重降低了用户体验。

我们有成千上万种使用多种语言的操作手册，因此我们无法真正对单个图像进行任何手动调整。在这种限制下，处理慢速渲染SVG图像的最佳策略是什么？

Answer 1

如果SVG仅由具有单一纯色的路径和形状组成，则您唯一的选择就是尝试以某种方式简化SVG。合并形状，展平组等。

例如，如果两个路径具有相同的颜色，变换，不透明度等，则可以合并它们的路径数据。这是通过删除一条路径并简单地将两条路径的路径数据串联起来来完成的。

下面是两个路径的示例，每个路径嵌套在一个组中：

import java.io.BufferedReader;
import java.io.IOException;
import java.io.StringReader;
import java.util.stream.Stream;

class Scratch {

    private static final String INPUT = "-dataFileName ABC.csv -command ii\n" +
        "-dataFileName EFG.csv -command ii -dataFileName OAZE.csv\n" +
        "-dataFileName HIJ.csv -command ii\n" +
        "-dataFileName MNPQR.csv -command ii\n" +
        "-dataFileName UVXYZ.csv -command ii";

    public static void main(String[] args) throws IOException {
        try (BufferedReader reader = new BufferedReader(new StringReader(INPUT))) {
            reader.lines()
                .flatMap(line -> fetchFilenamesFromArgumentLine(line, "dataFileName", "csv"))
                .forEach(System.out::println);
        }
    }

    public static Stream<String> fetchFilenamesFromArgumentLine(String line, String argumentName, String extension) {
        Stream.Builder<String> resultBuilder = Stream.builder();

        int index = 0;
        String actualArgumentName = "-" + argumentName + " ";

        while ((index = line.indexOf(actualArgumentName, index)) >= 0) {
            int start = index + actualArgumentName.length();
            int end = line.indexOf(extension, start) + extension.length();

            resultBuilder.add(line.substring(start, end));
            index = end;
        }
        return resultBuilder.build();
    }
}

通过将<g fill="#1b8f00"> <path d="M80 80 A45 45,0,0,0,125 125L125 80Z" /> </g> <g fill="#1b8f00"> <path d="M30 20 A25 25,0,1,0,45 25L45 30Z" /> </g>属性移到路径中并合并两个路径的路径数据fill，可以简化为：

如果您的SVG使用过滤器和蒙版，则可以尝试其他操作。但是通常在这种情况下，iOS比Android慢得多，因此看起来这不适用于您的图片。

如何处理慢速渲染的SVG图像？

1 个答案: