html - 将 SVG 嵌入到 CSS 中

Question

我想转换这段代码

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.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">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 44.2 42.7" enable-background="new 0 0 44.2 42.7" xml:space="preserve">
<g>
    <g>
        <path fill="#FFFFFF" d="M20.1,20.7c0.5-0.2,0.9-0.4,1.2-0.7c0.6-0.6,0.9-1.3,0.9-2.1c0-1.1-0.3-1.9-1-2.5c-0.7-0.7-1.6-1-2.6-1
            h-6.3v13.6h6.3c1.3,0,2.2-0.3,2.9-1c0.8-0.8,1.2-1.8,1.2-2.9c0-1-0.3-1.7-1-2.4C21.3,21.2,20.8,20.9,20.1,20.7z M14.1,15.8h4.4
            c0.5,0,0.9,0.2,1.2,0.5c0.4,0.4,0.6,0.9,0.6,1.5c0,0.7-0.2,1.2-0.6,1.7c-0.4,0.4-0.8,0.6-1.3,0.6h-4.3V15.8z M20,25.7
            c-0.4,0.4-1,0.6-1.8,0.6h-4v-4.8h4c0.8,0,1.4,0.2,1.9,0.7c0.4,0.4,0.6,1,0.6,1.7C20.7,24.7,20.4,25.2,20,25.7z"/>
        <path fill="#FFFFFF" d="M30.7,26.1c-0.3,0.3-0.8,0.5-1.6,0.5c-0.7,0-1.3-0.2-1.8-0.7c-0.5-0.5-0.8-1.3-0.8-2.5H33
            c0-1.5-0.4-2.7-1.1-3.4c-0.8-0.8-1.7-1.2-2.9-1.2c-1.2,0-2.1,0.4-2.9,1.1c-0.9,0.9-1.3,2.1-1.3,3.5s0.4,2.6,1.3,3.4
            c0.8,0.8,1.8,1.2,3.1,1.2c1.2,0,2.2-0.3,2.9-1c0.5-0.5,0.8-1.2,1-2.1h-1.7C31.3,25.3,31.1,25.7,30.7,26.1z M27.3,20.8
            c0.4-0.4,1-0.6,1.6-0.6c0.7,0,1.2,0.2,1.6,0.6c0.4,0.4,0.6,0.9,0.6,1.4h-4.5C26.7,21.6,27,21.2,27.3,20.8z"/>
        <path fill="#FFFFFF" d="M30.5,20.7c-0.4-0.4-0.9-0.6-1.6-0.6c-0.6,0-1.2,0.2-1.6,0.6c-0.4,0.4-0.6,0.8-0.7,1.3h4.5
            C31.1,21.6,30.9,21.1,30.5,20.7z"/>
        <path fill="#FFFFFF" d="M19.7,19.4c0.4-0.4,0.6-1,0.6-1.7c0-0.6-0.2-1.1-0.6-1.5c-0.3-0.3-0.7-0.5-1.2-0.5h-4.4V20h4.3
            C18.9,20,19.3,19.8,19.7,19.4z"/>
        <path fill="#FFFFFF" d="M18.1,21.5h-4v4.8h4c0.8,0,1.4-0.2,1.8-0.6c0.5-0.5,0.7-1.1,0.7-1.7c0-0.7-0.2-1.3-0.6-1.7
            C19.6,21.7,18.9,21.5,18.1,21.5z"/>
        <path fill="#FFFFFF" d="M22.1,3C12,3,3.9,11.2,3.9,21.3c0,10.1,8.2,18.3,18.3,18.3s18.2-8.2,18.2-18.3C40.4,11.2,32.2,3,22.1,3z
             M25.5,17.2H32v0.7h-6.5V17.2z M21.4,26.9c-0.6,0.6-1.6,1-2.9,1h-6.3V14.3h6.3c1.1,0,1.9,0.3,2.6,1c0.6,0.6,1,1.5,1,2.5
            c0,0.8-0.3,1.6-0.9,2.1c-0.3,0.3-0.7,0.6-1.2,0.7c0.6,0.2,1.1,0.5,1.5,0.9c0.6,0.6,1,1.4,1,2.4C22.6,25.1,22.2,26.1,21.4,26.9z
             M32,27c-0.7,0.7-1.6,1-2.9,1c-1.3,0-2.3-0.4-3.1-1.2c-0.8-0.8-1.3-2-1.3-3.4s0.4-2.6,1.3-3.5c0.7-0.7,1.7-1.1,2.9-1.1
            c1.1,0,2.1,0.4,2.9,1.2c0.7,0.7,1.1,1.9,1.1,3.4h-6.4c0,1.1,0.3,1.9,0.8,2.5c0.5,0.5,1.1,0.7,1.8,0.7c0.7,0,1.3-0.2,1.6-0.5
            c0.4-0.4,0.6-0.8,0.6-1.3H33C32.8,25.8,32.5,26.5,32,27z"/>
        <rect x="25.5" y="17.2" fill="#FFFFFF" width="6.5" height="0.7"/>
    </g>
</g>
</svg>

像这样

data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGlkPSJkcmliYmJsZS1jaXJjbGUtaWNvbiIgZmlsbD0iI0ZGRkZGRiIgZD0iTTE3LjM2MywxNy42MDRjMC44MzQsMi4xOCwxLjQ0Nyw0LjQyLDEuODM4LDYuNzE1DQoJYy0wLjk5NiwwLjM4Ni0yLjA3MiwwLjYwNC0zLjIwMSwwLjYwNGMtMi4wNjQsMC0zLjk2Mi0wLjcxMS01LjQ3Ni0xLjg5NEMxMi4yOTcsMjAuMjUsMTQuNTU5LDE4LjQ0MSwxNy4zNjMsMTcuNjA0eiBNMTEuOTc1LDguMDQ5DQoJYy0yLjI5MSwxLjE2NS00LjAxLDMuMjg2LTQuNjMzLDUuODM4YzMuMDE4LTAuMDIxLDUuNjI5LTAuMzUyLDcuODE2LTAuOTk2QzE0LjIzNCwxMS4yMzIsMTMuMTczLDkuNjE3LDExLjk3NSw4LjA0OXogTTIxLjQzOCw4Ljk0Mw0KCUMxOS45MzIsNy43NzksMTguMDQ4LDcuMDc4LDE2LDcuMDc4Yy0wLjc1NiwwLTEuNDg3LDAuMTA1LTIuMTg4LDAuMjgzYzEuMTgsMS41ODUsMi4yMjUsMy4yMTksMy4xNCw0Ljg5NA0KCUMxOC44NTcsMTEuNDQ4LDIwLjM1NCwxMC4zNDEsMjEuNDM4LDguOTQzeiBNMTYuNjQ2LDE1Ljg2OGMtMC4xOTEtMC40MzItMC4zOTQtMC44NjEtMC42MDQtMS4yODkNCgljLTIuNTAzLDAuNzg3LTUuNDkyLDEuMTg1LTguOTU1LDEuMTljMCwwLjA3OC0wLjAxLDAuMTUzLTAuMDEsMC4yMzFjMCwyLjE2NiwwLjc3OCw0LjE1NCwyLjA2Niw1LjcwMQ0KCUMxMS4xLDE4Ljc2OCwxMy42MDYsMTYuODE4LDE2LjY0NiwxNS44Njh6IE0xOS4yMjUsMTcuMjA5YzAuNzU2LDIuMDIsMS4zMzQsNC4wOSwxLjcyOSw2LjIwN2MyLjAyNC0xLjM1NywzLjQ1OC0zLjUyMywzLjg1My02LjAzMQ0KCUMyMi43NzEsMTcuMDMyLDIwLjkxMiwxNi45NzEsMTkuMjI1LDE3LjIwOXogTTMyLDE2YzAsOC44MzYtNy4xNjQsMTYtMTYsMTZTMCwyNC44MzYsMCwxNlM3LjE2NCwwLDE2LDBTMzIsNy4xNjQsMzIsMTZ6IE0yNi44LDE2DQoJYzAtNS45NjUtNC44MzUtMTAuOC0xMC44LTEwLjhTNS4yLDEwLjAzNSw1LjIsMTZTMTAuMDM1LDI2LjgsMTYsMjYuOFMyNi44LDIxLjk2NSwyNi44LDE2eiBNMTcuODE0LDEzLjkxOQ0KCWMwLjI0MiwwLjUsMC40NzEsMS4wMDUsMC42ODgsMS41MTJjMS45NDEtMC4zMzUsNC4wNzUtMC4zMTQsNi4zOTUsMC4wNjZjLTAuMTEyLTEuOTk1LTAuODc1LTMuODE3LTIuMDktNS4yNTENCglDMjEuNTYyLDExLjc5NiwxOS44OTMsMTMuMDIsMTcuODE0LDEzLjkxOXoiLz4NCjwvc3ZnPg0K

像这样嵌入

footer ul .ins{
    background-image:url("data:image/svg+xml;
    charset=utf-8;
    base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIyNDAgMjQwIDMyIDMyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDI0MCAyNDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggaWQ9Imluc3RhZ3JhbS1jaXJjbGUtaWNvbiIgZmlsbD0iI0ZGRkZGRiIgZD0iTTI2My42MDQsMjQ5LjAxNXYxLjk2NmMwLDAuMzE1LTAuMjU2LDAuNTcxLTAuNTcxLDAuNTcxaC0xLjkyNA0KCWMtMC4zMTUsMC0wLjU3LTAuMjU1LTAuNTctMC41NzF2LTEuOTY2YzAtMC4zMTUsMC4yNTUtMC41NzEsMC41Ny0wLjU3MWgxLjkyNEMyNjMuMzQ4LDI0OC40NDQsMjYzLjYwNCwyNDguNywyNjMuNjA0LDI0OS4wMTV6DQoJIE0yNTYuMjMzLDI1OC43MDRjMS40NDgsMCwyLjYyMi0xLjE3NCwyLjYyMi0yLjYyMmMwLTEuNDQ4LTEuMTc0LTIuNjIxLTIuNjIyLTIuNjIxcy0yLjYyMiwxLjE3My0yLjYyMiwyLjYyMQ0KCUMyNTMuNjExLDI1Ny41MywyNTQuNzg1LDI1OC43MDQsMjU2LjIzMywyNTguNzA0eiBNMjcyLDI1NmMwLDguODM3LTcuMTYzLDE2LTE2LDE2Yy04LjgzNiwwLTE2LTcuMTYzLTE2LTE2YzAtOC44MzYsNy4xNjQtMTYsMTYtMTYNCglDMjY0LjgzNywyNDAsMjcyLDI0Ny4xNjQsMjcyLDI1NnogTTI2NS4yMywyNTMuNDE2aC01LjI1N2MwLjUzNiwwLjc1MiwwLjg1MiwxLjY3MiwwLjg1MiwyLjY2NmMwLDIuNTQzLTIuMDYyLDQuNjA0LTQuNjA0LDQuNjA0DQoJcy00LjYwNC0yLjA2Mi00LjYwNC00LjYwNGMwLTAuOTk0LDAuMzE2LTEuOTE0LDAuODUyLTIuNjY2aC01LjIzM3Y4LjA2OWMwLDEuOTY1LDEuNTk0LDMuNTU5LDMuNTU5LDMuNTU5aDEwLjg3Ng0KCWMxLjk2NiwwLDMuNTYtMS41OTQsMy41Ni0zLjU1OVYyNTMuNDE2eiBNMjU2LjIyMSwyNTkuNjI5YzEuOTU3LDAsMy41NDctMS41OTEsMy41NDctMy41NDdjMC0xLjA2Mi0wLjQ3LTIuMDE1LTEuMjEyLTIuNjY2DQoJYy0wLjI2LTAuMjI4LTAuNTU0LTAuNDE5LTAuODcyLTAuNTY0Yy0wLjQ0Ni0wLjIwMy0wLjk0MS0wLjMxNy0xLjQ2My0wLjMxN2MtMC41MjEsMC0xLjAxNywwLjExNC0xLjQ2MywwLjMxNw0KCWMtMC4zMTksMC4xNDUtMC42MTIsMC4zMzYtMC44NzMsMC41NjRjLTAuNzQyLDAuNjUtMS4yMTEsMS42MDQtMS4yMTEsMi42NjZDMjUyLjY3NCwyNTguMDM4LDI1NC4yNjYsMjU5LjYyOSwyNTYuMjIxLDI1OS42Mjl6DQoJIE0yNjUuMjMsMjUwLjUxNWMwLTEuOTY1LTEuNTk0LTMuNTU5LTMuNTYtMy41NTloLTkuNzI1djQuNDg3aC0wLjcyOXYtNC40ODdoLTAuNDIxYy0wLjAyOCwwLTAuMDU1LDAuMDAxLTAuMDgzLDAuMDAydjQuNDg1aC0wLjcyOQ0KCXYtNC4zOTNjLTAuMTc3LDAuMDQxLTAuMzQ5LDAuMDk1LTAuNTE0LDAuMTYydjQuMjNoLTAuNzI5di0zLjgzM2MtMC45MDksMC42NDUtMS41MDMsMS43MDUtMS41MDMsMi45MDR2Mi4zMzdoNS43MDUNCgljMC44MzUtMC44NDgsMS45OTYtMS4zNzQsMy4yOC0xLjM3NGMxLjI4NCwwLDIuNDQ1LDAuNTI2LDMuMjgsMS4zNzRoNS43MjlMMjY1LjIzLDI1MC41MTVMMjY1LjIzLDI1MC41MTV6Ii8+DQo8L3N2Zz4NCg==")
}

谢谢

Answer 1

您可以通过几种方法获取数据 url。一种方法是使用在线工具，例如:

http://www.mobilefish.com/services/base64/base64.php

但就我个人而言，我更喜欢将 SVG 保存在 Illustrator 等应用程序中。我将其保存为 .svg 文件。然后像这样将它放入图像元素中:

<img src="/i/logo.svg" alt="logo">

如果您在 Chrome 中打开显示该图像的页面，请右键单击该图像并检查元素。在检查器中，右键单击图像 URL 并选择在资源面板中打开链接。在资源面板中，右键单击图像并选择将图像复制为数据 URL。

看起来有点冗长，但我发现这是最可靠的方法。