एसवीजी ढाल कार्यान्वयन


जवाबों:


13

हां और ना।

Inkscape में ग्रेडिएंट मेश बनाना संभव है, और इसे SVG के रूप में सेव करना है। हालाँकि, ब्राउज़रों में उपयोग किए गए SVG मानक ग्रेडिएंट मेश का समर्थन नहीं करते हैं। यह भविष्य में बदल सकता है, लेकिन वर्तमान के लिए नहीं।

यहाँ छवि विवरण दर्ज करें

एक अन्य विधि जो ब्राउज़र में काम करती है, वह है कई ठोस वस्तुओं को जोड़ना, उन्हें धुंधला करना और उन्हें क्लिपिंग मास्क में डालना। यह अभी भी एक शुद्ध वेक्टर समाधान है, यह rasterized नहीं है।

यहाँ छवि विवरण दर्ज करें

यदि आप चाहते हैं तो ब्राउज़र में काम करने वाले संस्करण के लिए एसवीजी है।

संपादित करें : एसवीजी के लिए उपरोक्त लिंक अब उपलब्ध नहीं है, इसलिए मैंने इसे हटा दिया है।


यह अच्छा है! लिंक में एसवीजी आपके उत्तर में प्रदान की गई प्रविष्टि की तरह कुछ भी नहीं दिखता है ... यह बहुत हल्का दिखता है। इसका कोई कारण?
जेरेड गार्सिया

@JaredGarcia मुझे पता नहीं है कि क्यों - मेरी स्क्रीन कैप्चर SVG का मिलान मेरे कंप्यूटर पर Inkscape में बिल्कुल होता है - लेकिन सुनिश्चित करें कि आप Inkscape के सबसे हालिया संस्करण का उपयोग कर रहे हैं - अब संस्करण में 0.92
बिली केर

आह, मैं इसे अपने मोबाइल में सीधे उस डाउनलोड लिंक से ब्राउज़र में देख रहा था। मैं इसे Inkscape में खोलूंगा और इसकी जांच करूंगा।
जारेड गार्सिया

1
@JaredGarcia पोस्ट करता है कि एक नए प्रश्न के रूप में बजाय ताकि इसका सही उत्तर दिया जा सके।
एंड्रयू टी।

1
ब्राउज़रों में धुंधला होना वास्तव में महंगा है। पृष्ठभूमि ग्रेडिएंट्स को लेयर करके आप एक ही प्रभाव प्राप्त कर सकते हैं। ये भी एनिमेटिड हैं। और आप आधुनिक ब्राउज़रों में अतिरिक्त प्रभाव के लिए पृष्ठभूमि-मिश्रण-मोड का उपयोग कर सकते हैं।
PieBie

2

इसे Illustrator और Inkscape में Gradient mesh के रूप में बनाया जा सकता है। जब लीगेसी इलस्ट्रेटर में एसवीजी के रूप में सहेजा जाता है, तो यह बिटमैप छवि में बदल जाता है। जाहिर है कि इलस्ट्रेटर इसे 6 साल पहले जानता था, लेकिन एसवीजी भाषा नहीं थी।

Inkscape में सादे SVG के रूप में सहेजे जाने पर, Inkscape SVG के रूप में नहीं, यह ग्रेडिएंट मेष के रूप में रहा और SVG फ़ाइल को एक टेक्स्ट एडिटर के साथ खोलने पर पता चला कि कमांड मेशग्रेड है। कोड स्निपेट देखें

यहाँ छवि विवरण दर्ज करें

इसलिए, मानकों को जाने बिना, मैं कह सकता हूं "यह कम से कम इंक्सस्केप के सादे एसवीजी में लागू किया गया है।"

उम्मीद है कि कोई SVG डेवलपमेंट स्टेटस जागरूक प्रोग्रामर कुछ सटीक बताता है।


2
आप उचित कोड स्वरूपण के साथ यहां कोड को सीधे शामिल कर सकते हैं। स्क्रीनशॉट पोस्ट करने की आवश्यकता नहीं है।
Wrzlprmft

अफसोस की बात यह है कि इंकस्केप के ढाल के जाल अभी तक Google क्रोम, या फ़ायरफ़ॉक्स में समर्थित नहीं हैं।
बिली केर

क्या आप svg कोड
जारेड गार्सिया

@JaredGarcia मैंने नहीं किया है। मैंने यह देखने के लिए 25 के केवल 10 नोड्स भरे कि यह सही लुक देता है। आप इसे खुद बना सकते हैं। छवि को इंकस्केप में आयात करें, एक ही आकार का एक वर्ग बनाएं, इसके भरण प्रकार = ढाल का जाल सेट करें, मेष उपकरण के साथ 3 पंक्तियों और स्तंभों को अधिक जोड़ें, नोड टूल के साथ एक-एक नोड का चयन करें और रंग बीनने वाले के साथ लें। आयातित छवि से रंग। सादे एसवीजी के रूप में सहेजें, कोड देखने के लिए विन नोटपैड में खोलें।
user287001

1

यदि आपका लक्ष्य एक हल्का, स्केलेबल जाल ढाल है, तो आप इस विधि को आजमा सकते हैं:

https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html

यह वेक्टर नहीं है, लेकिन यह फ़ाइल आकार सुपर छोटा होने के बाद से हो सकता है और छवि असीम रूप से हो सकती है।


आपका स्वागत है GDSE - यहाँ आप के लिए glaf! कृपया दौरे के चारों ओर एक नज़र डालें और समझें कि हमें कैसे पूछना है और कैसे जवाब देना है । यह संभवतः एक अच्छा विचार है कि आप समग्र सहायता कोड को देख सकें, जबकि आप गोल सहायता केंद्र देख रहे हैं। आपका उत्तर प्रयोज्यता के संदर्भ में एक अच्छा उत्तर है जो आपने साझा किया है, लेकिन यहाँ GDSE में हम केवल संदर्भ के लिए लिंक का उपयोग करना पसंद करते हैं या संसाधनों को बाँधने के लिए, जैसा कि लिंक बदलते हैं या सभी आसानी से गायब हो जाते हैं: क्या आप उस सामग्री को संक्षेप में बता सकते हैं जिसे आप उत्तर दे रहे हैं?
गेरार्डफल्ला
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.