फ़ायरफ़ॉक्स एंटी-एलाइजिंग स्केल किए गए पृष्ठभूमि svg

Question

मैं एक उत्तरदायी डिज़ाइन पर काम कर रहा हूं जिसके लिए हेडर ग्राफ़िक को व्यूपोर्ट की चौड़ाई के साथ स्केल करने की आवश्यकता है। मैं एक एसवीजी सोच रहा हूं कि यह अच्छी तरह से स्केल करेगा। (मैं पूरी साइट में svg समर्थन के लिए परीक्षण करता हूं, और svg के साथ एक gif को प्रतिस्थापित करता हूं)। फ़ायरफ़ॉक्स में (विंडोज 7 पर 13.0) यह छोटे आकारों पर एंटीअलाइजिंग नहीं कर रहा है। यह मौलिक रूप से कुछ आकारों पर अच्छा दिखता है, और अगर मैं आयामों को ठीक करता हूं, लेकिन मैं ऐसा करने से बचना चाहता हूं। क्रोम और सफारी छवि को एंटी-एलियास करते हैं, और यह अच्छा लगता है।

मैं कंटेनर पर स्केल करने के लिए background-size: 100% 100% सेट कर रहा हूं, मैंने cover जैसी चीजों की भी कोशिश की है, लेकिन ऐसा कोई फर्क नहीं पड़ता।

मैंने image-rendering: optimizeQuality; भी जोड़ने की कोशिश की है, लेकिन ऐसा प्रतीत नहीं होता है।

मैंने http://axminster.digital.linneydesign.com/svg/ पर एक परीक्षण पृष्ठ स्थापित किया है - शीर्ष एक पृष्ठभूमि छवि है, और नीचे एक ही फ़ाइल है, लेकिन एचटीएमएल में img के रूप में सीधे जोड़ा गया है। ब्राउज़र को छोटे आकार में स्केल करना, आपको शीर्ष एक पिक्सेललेट दिखाई देगा, लेकिन नीचे वाला एक चिकना रहेगा।

किसी भी विचार पर मैं इस पृष्ठभूमि छवि को अपने आयामों को ठीक किए बिना कैसे चिकनी कर सकता हूं?

धन्यवाद।

Answer 1

svg फ़ाइल (sophie-conran.svg) में बाहरी <svg> तत्व को चौड़ाई और 100% की ऊंचाई दें।

क्या होता है कि एसवीजी छवि चौड़ाई और ऊंचाई पर रास्टराइज्ड होती है जो आप इसे देते हैं यानी 1000px x 350px और उस बिटमैप को आवश्यक आकार में परिवर्तित कर दिया जाता है। यदि आप चौड़ाई और ऊंचाई प्रतिशत बनाते हैं तो बिटमैप अंतिम आकार में बनाया गया है और कोई बिटमैप स्केलिंग नहीं है।

अद्यतन:

यह सब फ़ायरफ़ॉक्स 24 के साथ विवादास्पद है और हालांकि परे है, तो आप आप क्या पसंद कर सकते हैं और यह हमेशा pixellation बिना ठीक से अर्थात काम करेंगे।