एक सीएसएस पृष्ठभूमि छवि के रूप में एक डाटा यूआरआई एसवीजी का उपयोग

Question

Backstory:

• लक्ष्य: एक त्रिकोणीय छाया सीएसएस के माध्यम से लागू किया जा सकता है कि और बड़े पैमाने-स्वतंत्र है बनाने के (यानी एक वेक्टर है, न कि रास्टर चित्र)
• अधिक शोध के बाद (मैं निश्चित रूप से विकल्पों के लिए खुला हूं) मैंने एक डेटा यूरी (अतिरिक्त HTTP अनुरोध से बचने के लिए) के रूप में एक एसवीजी पृष्ठभूमि छवि का उपयोग करना चुना। ,

  • मैं एक साधारण svg त्रिकोण बनाया, एक गाऊसी कलंक प्रभाव के साथ अगर यह लिखा है: http://jsfiddle.net/6WAtQ/

  मैं कहां अटक कर रहा हूँ:

• मैं इस कर सकते हैं काम है कि पता सीधे एचटीएमएल में (सीएसएस के विपरीत) 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>​

• तो मैं इसके बाद के संस्करण (http://jsfiddle.net/6WAtQ/) को दोहराने के लिए अपने खुद के त्रिकोण svg उपयोग करने की कोशिश,

• मैं '% 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() के अंदर डबल कोट्स हैं और फिर सभी एसवीजी सामग्री एकल उद्धरण का उपयोग करती है? आपको वही करना होगा। अन्यथा पार्सर नहीं जानता कि यूआरएल सामग्री कहां समाप्त होती है।

वैकल्पिक रूप से आप यूआरएल एकल उद्धरण का उपयोग कर सकते हैं और अपनी एसवीजी सामग्री को वही बना सकते हैं।

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

आप क्लीनर प्रारूप के लिए बेस 64 एन्कोडिंग का भी उपयोग कर सकते हैं, भले ही यह वास्तविक एसवीजी फ़ाइल आकार को बढ़ाए। css-tricks.com post भी देखें।

यानी .:

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

आप इस bash कमांड (MacOS एक्स पर परीक्षण) का उपयोग कर सकते आसानी से सीएसएस पृष्ठभूमि संपत्ति उत्पन्न करने के लिए:

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)"');"