cheerio 将内联 svg 转换为 base64

Question

我正在使用 cheerio 抓取包含内联 svg 图像的网页。我想将 svg 图像转换为 base64 字符串，以便它们可以存储在数据库中。我可以使用 let allSvgImages = $("svg");

找到所有 svg

我可以从中分析并构建一个 svg 字符串。然后将 svg 字符串转换为 base64。但必须有更简单的方法。有人知道怎么做吗？

    let allSvgImages = $("svg");
    for (let i = 0; i < allSvgImages.length; i++) { // loop all svg's 
        let svgText = "";
        let svg = allSvgImages[i];
        let attribs =  svg.attribs;     
        let svgGItem = $(svg).find("g");
        let svgPathArray = $(svgGItem).children();

        let pathArray = [];
        for (let i=0; i < svgPathArray.length; i++){
            let itemName = svgPathArray[i].name;
            let itemAttribs = svgPathArray[i].attribs;
            pathArray.push({
                name: itemName,
                attribs: itemAttribs
            })
        }

        // assemble the attribs and pahArray into a svg xml string and then convert to base64
    }

内联 svg 示例：

<svg height="210" width="400">
  <path d="M78.14 31.47h4.92v6.86a20.53 20.53 0 0 1 6.54-5.89 16.1 16.1 0 0 1 7.81-1.95 13.51 13.51 0 0 1 7.59 2.18 13 13 0 0 1 4.9 5.87q1.59 3.69 1.59 11.5v19.68h-4.93V51.48a45.65 45.65 0 0 0-.54-8.83 9.69 9.69 0 0 0-3.29-5.71 9.86 9.86 0 0 0-6.3-1.94 12.13 12.13 0 0 0-8 3 13.8 13.8 0 0 0-4.66 7.31 50.67 50.67 0 0 0-.71 10.41v14h-4.92z"></path>
</svg>

更新：感谢@pguardiario 提供了如何在页面上获取所有 svg 的解决方案。

当使用选择所有 svg 的代码时，我发现代码 returns the "viewBox" as "viewbox"（不是大写字母 B）。这反过来又使它看起来不是所有的 Antec Biogas 看起来像 Antec B 因为 viewBox 不正确。这是 svg 标志：

<svg preserveaspectratio="xMidYMid meet" data-bbox="0.5 0.5 479.062 92.45" viewbox="0.5 0.5 479.062 92.45" xmlns="http://www.w3.org/2000/svg" data-type="color" role="img" aria-labelledby="svgcid--kx7pj4m2h9ig"><title id="svgcid--kx7pj4m2h9ig"/>
    <g>
        <path fill="#61a60e" d="M245.15.5v92.45H.5V.5h244.65z" data-color="1"/>
        <path d="M46.82 18l24.12 51.72h-5.59l-8.13-17H34.94l-8.06 17h-5.76L45.55 18zm-.65 11L37.3 47.71H55z" fill="#ffffff" data-color="2"/>
        <path d="M78.14 31.47h4.92v6.86a20.53 20.53 0 0 1 6.54-5.89 16.1 16.1 0 0 1 7.81-1.95 13.51 13.51 0 0 1 7.59 2.18 13 13 0 0 1 4.9 5.87q1.59 3.69 1.59 11.5v19.68h-4.93V51.48a45.65 45.65 0 0 0-.54-8.83 9.69 9.69 0 0 0-3.29-5.71 9.86 9.86 0 0 0-6.3-1.94 12.13 12.13 0 0 0-8 3 13.8 13.8 0 0 0-4.66 7.31 50.67 50.67 0 0 0-.71 10.41v14h-4.92z" fill="#ffffff" data-color="2"/>
        <path d="M126.34 17.27h4.92v14.2h7.81v4.26h-7.81v34h-4.92v-34h-6.71v-4.26h6.71z" fill="#ffffff" data-color="2"/>
        <path d="M178.65 57l4.15 2.18a22.68 22.68 0 0 1-4.71 6.47 18.71 18.71 0 0 1-6 3.74 20.9 20.9 0 0 1-7.57 1.29q-9.36 0-14.63-6.14a20.69 20.69 0 0 1-5.28-13.87 20.45 20.45 0 0 1 4.47-13 18.25 18.25 0 0 1 15.16-7.24 18.88 18.88 0 0 1 15.63 7.42 20.76 20.76 0 0 1 4.2 13.15h-34.42a15.53 15.53 0 0 0 4.26 10.93 13.58 13.58 0 0 0 10.17 4.26 16.57 16.57 0 0 0 5.69-1 15 15 0 0 0 4.69-2.7 22.63 22.63 0 0 0 4.19-5.49zm0-10.3a16.18 16.18 0 0 0-2.87-6.29 13.48 13.48 0 0 0-5-3.8 15.23 15.23 0 0 0-6.51-1.44 14.05 14.05 0 0 0-9.68 3.62 16.37 16.37 0 0 0-4.47 7.91z" fill="#ffffff" data-color="2"/>
        <path d="M230.37 39.42l-3.9 2.42a16.36 16.36 0 0 0-13.8-6.71 16 16 0 0 0-11.61 4.49 14.68 14.68 0 0 0-4.62 10.92 15.48 15.48 0 0 0 2.13 7.87 14.78 14.78 0 0 0 5.83 5.72 17.63 17.63 0 0 0 22.07-4.67l3.9 2.56a18.37 18.37 0 0 1-7.37 6.41 23.49 23.49 0 0 1-10.53 2.28 20.77 20.77 0 0 1-15-5.77 18.74 18.74 0 0 1-6-14 19.94 19.94 0 0 1 2.8-10.31 19.62 19.62 0 0 1 7.68-7.44 22.39 22.39 0 0 1 10.93-2.67 23.14 23.14 0 0 1 7.33 1.16 20.44 20.44 0 0 1 6 3 16.48 16.48 0 0 1 4.16 4.74z" fill="#ffffff" data-color="2"/>
        <path d="M260.71 18h10.19c4.1 0 7.26.48 9.46 1.46a11.56 11.56 0 0 1 5.22 4.54 12.27 12.27 0 0 1 1.92 6.71 12.08 12.08 0 0 1-1.68 6.28 12.46 12.46 0 0 1-4.93 4.59 19.09 19.09 0 0 1 6.2 3.21 12.74 12.74 0 0 1 3.38 4.47 13.34 13.34 0 0 1 1.21 5.68 14 14 0 0 1-4.55 10.53q-4.56 4.31-12.22 4.3h-14.2zm5.06 5.06v16.57h3a23.35 23.35 0 0 0 7.93-1 8.53 8.53 0 0 0 4-3.17 8.28 8.28 0 0 0 1.48-4.8 6.79 6.79 0 0 0-2.48-5.57c-1.66-1.35-4.29-2-7.91-2zm0 21.76v19.84h6.41q5.67 0 8.31-1.11a9.4 9.4 0 0 0 4.24-3.46 9 9 0 0 0-.65-11.09 11.61 11.61 0 0 0-6.19-3.52 45.49 45.49 0 0 0-9.2-.63z" fill="#ffffff" data-color="2"/>
        <path d="M302.81 15.72a3.89 3.89 0 0 1 2.87 1.2 4 4 0 0 1 0 5.73 4 4 0 0 1-5.71 0 4 4 0 0 1 0-5.73 3.87 3.87 0 0 1 2.84-1.2zm-2.45 15.75h4.93v38.25h-4.93z" fill="#ffffff" data-color="2"/>
        <path d="M333.62 30.49a18.91 18.91 0 0 1 14.65 6.4 20.51 20.51 0 0 1-.3 27.82 20.2 20.2 0 0 1-28.73 0 20.47 20.47 0 0 1-.3-27.79 18.92 18.92 0 0 1 14.68-6.43zm0 4.81a14.21 14.21 0 0 0-10.55 4.54 15.15 15.15 0 0 0-4.41 11 15.56 15.56 0 0 0 2 7.73 14.25 14.25 0 0 0 5.43 5.54 15.46 15.46 0 0 0 15 0 14.25 14.25 0 0 0 5.43-5.54 15.56 15.56 0 0 0 2-7.73 15.12 15.12 0 0 0-4.42-11 14.26 14.26 0 0 0-10.49-4.54z" fill="#ffffff" data-color="2"/>
        <path d="M395.64 31.47h4.92V62q0 8.05-1.41 11.78a15.28 15.28 0 0 1-6.71 8.12 22.07 22.07 0 0 1-11.5 2.85 26.49 26.49 0 0 1-8.84-1.39 17.78 17.78 0 0 1-6.38-3.74 22.16 22.16 0 0 1-4.53-6.86h5.34a14.11 14.11 0 0 0 5.63 5.63 18.21 18.21 0 0 0 8.55 1.82 17.66 17.66 0 0 0 8.5-1.87 11.5 11.5 0 0 0 5-4.71c1-1.9 1.48-5 1.48-9.17v-2a18.71 18.71 0 0 1-6.79 5.39 20.16 20.16 0 0 1-18.44-.74 18.51 18.51 0 0 1-7.18-7 19.22 19.22 0 0 1-2.54-9.73 19.9 19.9 0 0 1 19.78-19.83 18.4 18.4 0 0 1 8 1.77 22.23 22.23 0 0 1 7.16 5.86zm-14.52 3.76a15.54 15.54 0 0 0-7.77 2 14.61 14.61 0 0 0-5.63 5.59 15.24 15.24 0 0 0-2 7.71A13.92 13.92 0 0 0 369.9 61a15 15 0 0 0 10.94 4.11q6.78 0 10.91-4.08a14.35 14.35 0 0 0 4.13-10.72 15.63 15.63 0 0 0-1.88-7.75 13.93 13.93 0 0 0-5.38-5.36 15 15 0 0 0-7.5-1.97z" fill="#ffffff" data-color="2"/>
        <path d="M449.22 31.47v38.25h-4.86v-6.57a21.05 21.05 0 0 1-6.94 5.66 19.39 19.39 0 0 1-22.29-4 19.76 19.76 0 0 1-5.75-14.33 19.36 19.36 0 0 1 5.81-14.13 18.9 18.9 0 0 1 13.95-5.87 18.16 18.16 0 0 1 8.53 2 19.44 19.44 0 0 1 6.69 6v-7zm-19.67 3.76a14.83 14.83 0 0 0-13.12 7.7 15.51 15.51 0 0 0 0 15.45 15.11 15.11 0 0 0 5.57 5.74 14.54 14.54 0 0 0 7.5 2 15.37 15.37 0 0 0 7.66-2 14.17 14.17 0 0 0 5.56-5.51 15.74 15.74 0 0 0 1.95-7.83 15.26 15.26 0 0 0-4.37-11.1 14.5 14.5 0 0 0-10.75-4.45z" fill="#ffffff" data-color="2"/>
        <path d="M479.52 35.66l-3.16 3.27q-4-3.84-7.72-3.84a5.82 5.82 0 0 0-4.11 1.59 4.87 4.87 0 0 0-1.71 3.69 5.48 5.48 0 0 0 1.41 3.55c.94 1.15 2.91 2.49 5.92 4q5.49 2.85 7.47 5.49a10 10 0 0 1 1.94 6 10.82 10.82 0 0 1-3.31 8 11.32 11.32 0 0 1-8.25 3.3 14.5 14.5 0 0 1-6.32-1.44 13.74 13.74 0 0 1-5-4l3.09-3.51q3.78 4.25 8 4.25a7.19 7.19 0 0 0 5-1.9 5.84 5.84 0 0 0 2.08-4.46 5.73 5.73 0 0 0-1.37-3.76q-1.38-1.62-6.2-4.08-5.19-2.67-7.05-5.28a9.88 9.88 0 0 1-1.87-5.94 9.65 9.65 0 0 1 3-7.24 10.37 10.37 0 0 1 7.52-2.88q5.29.02 10.64 5.19z" fill="#ffffff" data-color="2"/>
    </g>
</svg>

Answer 1

也许我误解了，但我想你只是想：

$('svg').get().map(svg => $.html(svg))

我不确定你为什么认为你需要 base64 那些。

cheerio 将内联 svg 转换为 base64

cheerio convert inline svg to base64

base64

svg

node.js

cheerio