CSS बैकग्राउंड
मुफ़्त, बिना साइन-अप, आपके ब्राउज़र में चलता है।
वही SVG, `background-image` के data URI में प्रतिशत-एन्कोड किया हुआ। इसे तब इस्तेमाल कीजिए जब आप पेज में एलिमेंट न जोड़ सकें और पहले से मौजूद किसी चीज़ को सजाना हो — कोई सेक्शन, कोई कार्ड, या ऐसा हेडर जिसका मार्कअप आपके हाथ में नहीं।
CSS बैकग्राउंड का एक निर्यात, पहली कुछ पंक्तियों तक छाँटा हुआ
.shape {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 38L153.69 69L153.69 131L100 162L46.31 131L46.31 69Z' fill='%234f46e5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}जानने लायक़ बातें
- न अतिरिक्त एलिमेंट, न नेटवर्क अनुरोध: आकृति स्टाइलशीट के भीतर ही चलती है।
- base64 के बजाय प्रतिशत-एन्कोडेड, जो उसी छवि के लिए लगभग एक तिहाई छोटा है।
- हर `#` एन्कोडेड है, और यही फ़र्क़ है उस पृष्ठभूमि में जो बनती है और उसमें जो चुपचाप नहीं बनती।
- कच्चे SVG से बड़ा, क्योंकि हर बदले गए अक्षर पर एस्केपिंग तीन अक्षर लेती है।
ब्राउज़र समर्थन
सार्वभौमिक। `background-image` में data URI हर जगह चलते हैं। संगतता की इकलौती अड़चन एन्कोडिंग है, समर्थन नहीं — और उसे आप पर छोड़ने के बजाय आउटपुट में ही सँभाल लिया गया है।
सभी प्रीसेट में आकार
हर वह प्रीसेट जिसे यह प्रारूप व्यक्त कर सकता है, ठीक वैसे मापा गया जैसे जनरेटर उसे देता है। सबसे छोटा षट्भुज है, 312 बाइट पर; सबसे बड़ा परतदार वेव है, 1,071 बाइट पर। फ़र्क़ बिंदुओं की संख्या से आता है — हर अतिरिक्त बिंदु निर्देशांकों का एक पूरा घन खंड जोड़ देता है।
| प्रारूप | आकार |
|---|---|
| षट्भुज | 312 B |
| क्रिस्टल | 317 B |
| पहलदार रत्न | 343 B |
| गोल त्रिभुज | 378 B |
| पर्वत शिखर | 392 B |
| झटका | 407 B |
| तीखा ज़िगज़ैग | 425 B |
| गहरी वेव | 443 B |
| कंकड़ | 455 B |
| बादल किनारा | 456 B |
| मेहराबी कटाव | 480 B |
| हल्की वेव | 483 B |
| नरम ब्लॉब | 491 B |
| सीढ़ीनुमा | 519 B |
| झालर | 543 B |
| ऑर्गैनिक ब्लॉब | 563 B |
| चमक | 569 B |
| ऑर्गैनिक वेव | 639 B |
| तारा | 712 B |
| फ़ुटर वेव | 718 B |
| फूल | 718 B |
| बुलबुला | 720 B |
| पिक्सेल किनारा | 740 B |
| छींटा | 802 B |
| लहरें | 816 B |
| परतदार वेव | 1,071 B |
और विस्तार से
असली अड़चन वाला निर्यात यही है। data URI के भीतर बिना एन्कोड किया `#` URL को ख़त्म कर देता है: ब्राउज़र उसके बाद की हर चीज़ को फ़्रैगमेंट पहचानकर्ता मान लेता है, SVG ख़राब हो जाता है, और पृष्ठभूमि बस नहीं आती — न कंसोल में त्रुटि, न खोजने लायक़ कोई नेटवर्क प्रविष्टि। चूँकि मार्कअप का हर रंग हेक्स शाब्दिक है, सबसे पहला भराव ही पूरी चीज़ काट देता है। कुछ जनरेटर base64 पर लौटकर इससे बच निकलते हैं, जो सही तो है पर बेवजह बड़ा। यहाँ पहले `%` एस्केप होता है और उसके तुरंत बाद `#`, और यही अकेला क्रम काम करता है।
सवाल
CSS बैकग्राउंड के रूप में कौन-सी आकृतियाँ चलती हैं?
यह प्रारूप वेव, ब्लॉब को कवर करता है। यह असली बंदिश है, इस उपकरण की कमी नहीं: जहाँ कोई जनरेटर उस सूची में नहीं है, वहाँ प्रारूप सचमुच उसे व्यक्त नहीं कर सकता, और फिर भी उसे देना आपको ऐसी चीज़ थमाना होता जो चुपचाप ग़लत आकृति बनाती।
CSS बैकग्राउंड का निर्यात कितना बड़ा होता है?
इसे समर्थन देने वाले 26 प्रीसेट में 312 से 1,071 बाइट के बीच। कम बिंदु ही वह लीवर है जो मायने रखता है; चिकनाहट और रंग कुछ नहीं लेते।
क्या मैं बाद में इसे हाथ से बदल सकता हूँ?
हाँ। आउटपुट सादा पाठ है — न जनरेटर की टिप्पणी, न पहचान चिह्न, न यहाँ वापस आने का लिंक। रंग बदलिए, क्लास का नाम बदलिए, या पथ को अपने SVG में चिपका दीजिए: आगे कुछ भी इस पर निर्भर नहीं कि यह जैसा था वैसा ही रहे।
इस पेज का हर आँकड़ा और हर आकृति बिल्ड के समय जनरेटर चलाकर बनाई गई है, इसलिए यह उसी उपकरण का वर्णन करता है जिसे आप अभी इस्तेमाल करने वाले हैं, न कि उसके किसी पुराने रूप का।