将内联 SVG 转换为 SVG 文件 [英] Convert an inline SVG into a SVG file

问题描述

我有以下使用内联的 SVG:

I have the following SVG that I use inline:

<svg width="30" height="23" viewBox="0 0 1398 1648"><path d="M1110.5 1008.81q37.8031 0 64.4934 -26.7359q26.6902 -26.7359 26.6902 -64.4477q0 -37.7118 -26.6902 -64.4477q-26.6902 -26.7359 -64.4934 -26.7359q-37.6729 0 -64.4282 26.7554q-26.7554 26.7554 -26.7554 64.4282q0 37.712 26.69 64.4478 q26.69 26.7358 64.4936 26.7358zM1085.83 924.412q10.313 0 17.6013 7.33401q7.28831 7.33401 7.28831 17.5547q0 10.352 -7.26875 17.6203q-7.26875 7.26836 -17.6209 7.26836q-10.3515 0 -17.6201 -7.26839q-7.26859 -7.26839 -7.26859 -17.6203 q0 -10.3513 7.26868 -17.62q7.26868 -7.26868 17.62 -7.26868zM267.895 1017.63q37.6729 0 64.4288 -26.7554q26.7558 -26.7554 26.7558 -64.4282q0 -37.6728 -26.7558 -64.4282q-26.7558 -26.7554 -64.4288 -26.7554q-37.6723 0 -64.4279 26.7555 q-26.7557 26.7555 -26.7557 64.4281q0 37.7118 26.6902 64.4477q26.6902 26.7359 64.4934 26.7359zM243.232 932.558q10.3513 0 17.62 7.26868q7.26868 7.26868 7.26868 17.62q0 10.3513 -7.26868 17.62q-7.26868 7.26868 -17.62 7.26868t-17.62 -7.26868t-7.26868 -17.62 q0 -10.3513 7.26868 -17.62q7.26868 -7.26868 17.62 -7.26868zM1297.39 766.48q58.4139 -70.152 77.5266 -147.337q19.1127 -77.1851 0.84226 -148.941q-18.2704 -71.756 -74.3439 -137.208q-56.0735 -65.4515 -140.522 -113.902q-84.4482 -48.4505 -205.702 -77.1412 q-121.254 -28.6907 -262.375 -28.6907h-1.35742q-141.109 0 -262.307 28.7563q-121.198 28.7563 -205.536 77.3021q-84.3387 48.5458 -140.302 114.099q-55.9633 65.5534 -74.1281 137.387q-18.1648 71.8339 1.01167 149.044q19.1765 77.2102 77.5926 147.309 q-14.4449 16.0507 -27.1514 37.1074q-50.7359 85.8689 -25.8788 182.368q24.8571 96.4988 110.727 147.071q85.8681 50.736 182.367 25.8788q96.499 -24.8572 147.07 -110.727q18.6952 2.39837 35.7852 -12.6865q17.09 -15.0849 32.7898 -38.5143 q15.6998 -23.4294 33.9779 -47.1394q18.2781 -23.71 47.3972 -40.6321q29.1191 -16.9221 65 -16.9221h4.52539q35.764 0 64.8242 16.8335q29.0602 16.8335 47.3461 40.4617q18.2859 23.6282 33.9778 47.0057q15.6919 23.3775 32.7387 38.5612 q17.0468 15.1837 35.6093 13.0324q6.28875 9.74797 14.708 20.3633q62.6399 77.4092 161.749 87.8468q99.1089 10.4376 176.513 -52.3234q77.4092 -62.6398 87.8468 -161.749q10.4376 -99.1094 -52.3234 -176.513zM802.327 680.953l-35.5234 -58.375h99.5557 l-35.5234 58.375q-2.03613 3.39404 -5.42969 5.43066q-14.2804 8.56928 -23.0791 -5.43066zM553.212 680.953l-35.5234 -58.375h99.5557l-35.5225 58.375q-2.03861 3.39572 -5.43066 5.43066q-14.2804 8.56928 -23.0791 -5.43066zM154.085 797.932 q53.2982 -47.1605 124.218 -42.9054q70.9195 4.25509 118.109 57.3859q43.2158 48.487 43.2158 113.584q0.355782 77.4576 -57.6963 128.743q-53.2625 47.2016 -124.219 42.99q-70.956 -4.21163 -118.109 -57.4705q-47.2018 -53.2623 -42.9904 -124.219 q4.21144 -70.9562 57.4708 -118.109zM1005.51 430.028q3.40299 2.55133 0.905273 5.88281q-1.81575 2.54331 -4.97754 1.35742q-159.065 -58.6016 -309.301 -58.6016q-150.237 0 -309.302 58.6016q-3.84115 1.70779 -5.42969 -2.2627q-1.18588 -3.16179 1.35742 -4.97754 q44.4155 -32.4157 158.521 -66.7777q114.106 -34.362 154.853 -34.362q40.7469 0 154.852 34.362q114.105 34.362 158.521 66.7776zM1239.01 804.267q43.2168 48.8367 43.2168 113.584q0.355778 77.4568 -57.6973 128.743q-53.2618 47.2016 -124.218 42.99 q-70.956 -4.21163 -118.109 -57.4705q-47.2016 -53.2625 -42.99 -124.219q4.21163 -70.956 57.4705 -118.109q53.2623 -47.2018 124.219 -42.9904q70.9562 4.21144 118.109 57.4708zM692.138 925.996q-32.3148 0 -60.1187 13.6801t-46.3427 33.2041 q-18.5387 19.524 -34.084 39.048q-15.5453 19.524 -30.3775 33.2041q-14.8322 13.6801 -28.1884 13.6801q29.4644 14.7821 79.2422 23.0971q49.7778 8.31494 84.8235 9.23882l35.0456 0.923882q14.8633 -0.00730341 38.7111 -0.925708q23.8478 -0.918405 77.3412 -9.23517 t83.0581 -23.0989q-13.3562 0 -28.1883 -13.6801q-14.8321 -13.6801 -30.3773 -33.2041q-15.5451 -19.524 -34.0837 -39.048q-18.5386 -19.524 -46.3424 -33.2041q-27.8038 -13.6801 -60.1186 -13.6801z" transform="translate(0,1792) scale(1, -1)" style="fill: currentcolor;"></path></svg>

因为我在我的网站上多次使用它，我不想多次复制上面的代码，因为这会浪费kb.相反，我想将 SVG 用作文件并通过 img、object 或 iframe 标签加载.

Because I'm using it many times on my website, I don't want to copy the code above multiple times as this would be a waste of kb. Instead, I want to use the SVG as a file and load through img, object or iframe tags.

我尝试将上面的代码保存到一个 svg 文件中，并通过 img、object 或 iframe 标签加载它，没有成功.示例:

I have tried to save the above code into a svg file and to load it through img, object or iframe tags, with no success. Example:

<img src="gab.svg" />

或者:

<object type="image/svg+xml" data="gab.svg" class="logo">Gab</object>

我想这应该是显而易见的，但我不明白为什么它不起作用.如果我用更简单的 SVG(如矩形)替换上面的 SVG 代码，那么一切正常.

I guess this should be obvious, but I don't get why it's not working. If I replace the SVG code above with a simpler SVG (like of a rectangle), then everything works fine.

我错过了什么?

推荐答案

它是一个 XML 文件，因此您至少需要告诉浏览器它是一个 SVG 文件.您可以通过向根 <svg> 元素添加 xmlns 属性来实现这一点.

It's an XML file, so at a minimim you need to tell the browser it is an SVG file. You do that by adding an xmlns attribute to the root <svg> element.

<svg xmlns="http://www.w3.org/2000/svg" ....

如果您正在制作具有 xlink:href 属性的图标，您还应该添加 xlink 命名空间.

If you are doing an icon that has xlink:href attributes, you should also add the xlink namespace.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ....

这对于浏览器来说应该足够了.但是，如果您想学究，或者要让文件由浏览器以外的程序处理，则可能需要添加完整的 XML 序言:

That should be enough for browsers. But if you want to be pedantic, or are going to have the file processed by programs other than a browser, you may need to add the full XML preamble:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" ....

这篇关于将内联 SVG 转换为 SVG 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！