使用一個數據URI SVG作爲CSS背景圖像

Question

背景故事：

• 目標：創建可以通過CSS被應用，是標度獨立的三角形陰影（即一個向量，而不是光柵圖像）
• 經過大量的研究（我當然願意選擇）我選擇使用SVG背景圖像作爲數據URI（以避免額外的HTTP請求）。
• 我知道這可以工作：http://jsfiddle.net/6WAtQ/

如果我堅持：

• 我創建了一個簡單的SVG三角形，用高斯模糊效果，如果它的寫直接在HTML中（而不是CSS），svg完美地工作：http://jsfiddle.net/RAKWB/

  <svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> </defs> <polygon points="200,0 200,200 0,200" filter="url(#f1)"/> </svg>​

• 所以，我想用我自己的三角形SVG複製上述（http://jsfiddle.net/6WAtQ/），

• 我更換了井號與 '％23'，但沒有骰子

• 它不工作：http://jsfiddle.net/ZPWxK/1/

  body { background-image: url("data:image/svg+xml;utf8,data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>"); }

的思考？

Answer 1

看看工作小提琴在url()裏面有雙引號，然後所有的SVG內容都使用單引號？你需要這樣做。否則解析器不知道URL內容結束的地方。

或者，您可以使url使用單引號，並保持您的SVG內容相同。

body { background-image: url('data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>'); } 

Answer 2

即使增加了實際的SVG文件大小，也可以使用base64編碼以獲得更清晰的格式。 另請參閱css-tricks.com post。

即：

background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIy NCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGQ9 Ik0wIDBoMjR2MjRoLTI0eiIgZmlsbD0ibm9uZSIvPgogICAgPHBhdGggZD0iTTEw LjA5IDE1LjU5bDEuNDEgMS40MSA1LTUtNS01LTEuNDEgMS40MSAyLjU4IDIuNTlo LTkuNjd2Mmg5LjY3bC0yLjU4IDIuNTl6bTguOTEtMTIuNTloLTE0Yy0xLjExIDAt MiAuOS0yIDJ2NGgydi00aDE0djE0aC0xNHYtNGgtMnY0YzAgMS4xLjg5IDIgMiAy aDE0YzEuMSAwIDItLjkgMi0ydi0xNGMwLTEuMS0uOS0yLTItMnoiLz4KPC9zdmc+ Cg=='); 

你可以使用這個bash命令（在Mac OS X測試），以方便地生成CSS背景屬性：

echo "background: url('data:image/svg+xml;base64,"$(openssl base64 < Downloads/material-design-icons-1.0.0/action/svg/ic_exit_to_app_24px.svg)"');"