HTML Query 中的 .SVG 文件转换答案

【问题标题】：.SVG file conversion within HTML QueryHTML Query 中的 .SVG 文件转换
【发布时间】：2020-09-21 11:52:34
【问题描述】：

我在现有代码模板中发现了这个图像文件。这是 HTML 文件中的 .SVG 文件。

谁能建议如何将图像转换为这种格式？

我目前无法将此文件替换为传统的 .SVG 或其他图像文件。

   <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
    <!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
    <!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
    <!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
    <!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
    <!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
    <!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
    <!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
    <!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
]>
<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1287 448"
     style="enable-background:new 0 0 1287 448;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#0648B3;stroke:#0648B3;stroke-width:10;stroke-miterlimit:10;}
    .st1{fill:#EE5050;stroke:#EE5050;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<metadata>
    <sfw  xmlns="&ns_sfw;">
        <slices></slices>
        <sliceSourceBounds  bottomLeftOrigin="true" height="436" width="1272.6" x="7" y="7"></sliceSourceBounds>
    </sfw>
</metadata>
<g>
    <path class="st0" d="M153,157h52.1l4.3,26h0.9c16.9-16.9,34.6-31,62.3-31c28.5,0,45.7,11.9,56.2,33.9c17.6-18,36.7-33.9,64.1-33.9
        c44.7,0,64.1,32.1,64.1,83.2V362h-64V243.2c0-28.1-7.2-36.4-23.3-36.4c-9.3,0-20.5,5.8-32.7,18.4V362h-64V243.2
        c0-28.1-7.2-36.4-23.3-36.4c-9.3,0-20.5,5.8-32.7,18.4V362h-64L153,157L153,157z"/>
    <path class="st0" d="M507,157h52.4l4.4,20h1.5c16.4-14.5,36.7-25.1,58.2-25.1c49.5,0,80.7,41.5,80.7,105.1
        c0,71.3-42.5,112-86.9,112c-17.5,0-34.2-7.6-48-21.5l1.8,32.4V436h-64V157H507z M636.9,257c0-36-10.4-52.9-33.1-52.9
        c-11.9,0-21.6,5.4-32.8,17.3v81c10.1,9,20.9,11.9,30.6,11.9C621,314.2,636.9,298,636.9,257z"/>
    <path class="st0" d="M730.7,304.5c0-43.2,33.8-66.6,113.8-75.2c-1.4-16.6-10.1-26.3-31-26.3c-16.2,0-33.1,6.5-53.6,18l-22.3-42.1
        c27-16.2,56.2-27,88.2-27c52.9,0,82.8,29.5,83.3,93.6V362h-52.7l-4.7-21h-1.4c-16.9,15.3-36,25.8-58.7,25.8
        C753.7,366.8,730.7,338.7,730.7,304.5z M844,300.9v-32.8c-40,5.4-52.9,16.9-52.9,31.3c0,11.9,8.6,17.6,22,17.6
        C826,317.1,834.6,311,844,300.9z"/>
    <path class="st0" d="M946.3,259.5c0-68,50.4-107.6,107.6-107.6c24.8,0,44.3,8.6,59.8,22l-29.9,41c-9.4-7.9-17.3-11.2-26.3-11.2
        c-28.1,0-45.7,21.6-45.7,55.8c0,33.8,18.4,55.4,43.6,55.4c13,0,25.2-6.1,35.6-14.4l24.5,42.1c-19.8,17.6-45.7,24.1-67.3,24.1
        C990.6,366.8,946.3,327.2,946.3,259.5z"/>
    <path class="st0" d="M1155,285.8V207h-28v-47.5l31.4-2.5l7.2-54h53.4v54h48v50h-48v78.1c0,22.7,10.8,31.7,25.9,31.7
        c6.5,0,13.7-2.2,18.7-3.6l10.1,46.1c-10.8,3.2-25.5,7.6-46.4,7.6C1175.9,366.8,1155,334.4,1155,285.8z"/>
    <g>
        <rect x="35.2" y="156.7" class="st0" width="63.7" height="204.8"/>
    </g>
    <!-- <circle class="st1" cx="67" cy="65" r="58.5"/> -->
</g>
</svg>

【问题讨论】：

这个 SVG 中没有 html，SVG 是基于文本的图像，所以它使用了一些看起来像 html/xml ecc ecc 的编码
@Berto99 知道如何编码这样的图像吗？
编码是什么意思？如果您将此文本粘贴到文件中并将该文件另存为“name.svg”，这将是一个有效的 SVG，如果您使用 SVG，并使用文本编辑器打开它，您将看到类似这样的内容

标签： html image svg

【解决方案1】：

如果您想将一些其他图像（例如来自.png）转换为这种格式，则必须“跟踪”它（即从位图图像进行分析文本表示）。

您可以为此使用 SVG 编辑器。例如，在Inkscape 中，您可以打开您的位图图像，然后执行Path > Trace Bitmap...。

【讨论】：