如何設置內聯SVG背景？

Question

有沒有一種方法可以內聯定義SVG？ 例如，我可以使用此CSS為CSS中的按鈕背景定義外部SVG，但我不知道如何內聯地進行此操作：

<input id="Button867" type="button" value="Button" class="buttonSkin">

.buttonSkin {
    background: url(assets/svg/button_skin_up.svg) 0 0 no-repeat;
    border: 0px;
}

.buttonSkin:hover {
    background: url(assets/svg/button_skin_over.svg) 0 0 no-repeat;
    border: 0px;
}

.buttonSkin:active {
    background: url(assets/svg/button_skin_down.svg) 0 0 no-repeat;
    border: 0px;
}

使用BigBadaBooms建議，我應該能夠執行以下操作：

<input id="Button867" type="button" value="Button" class="buttonBackgroundSkin">

.buttonBackgroundSkin {
    background-image:url(data:image/svg+xml;base64,<--base64 encoded SVG file-->);
    border: 0px;
}

.buttonBackgroundSkin:hover {
    background-image:url(data:image/svg+xml;base64,<--base64 encoded SVG file-->);
    border: 0px;
}

.buttonBackgroundSkin:active {
    background-image:url(data:image/svg+xml;base64,<--base64 encoded SVG file-->);
    border: 0px;
}

我會進一步研究。 我真的在尋找這樣的東西：

<input id="Button867" type="button" value="Button" class="buttonBackgroundSkin">
   <background-image>
      <svg>
       ... 
      </svg>
   <background-image>
   <background-image:hover>
      <svg>
       ... 
      </svg>
   <background-image:hover>
</input>

Answer 1

是的，您可以使用數據URL。 就像是：

background-image:url(data:image/svg+xml;base64,<--base64 encoded SVG file-->);

您可以通過谷歌搜索找到許多在線base64編碼器。 使用其中之一對您的SVG文件進行編碼，然后將其粘貼到上面指示的位置。

Answer 2

您可以將SVG的地址插入img標簽的src屬性中

<img src="http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg" alt="">

演示，但相同的瀏覽器不支持此鏈接

也許這個例子可以為您提供幫助：
HTML

<a href="#">
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
  <circle class="hover" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</a>

CSS

.hover{display:none;}
a:hover .hover{display:block}

DEMO