मेरे पास ऐसे पृष्ठ पर कुछ तत्व हैं जो एक पृष्ठभूमि छवि के रूप में एक एसवीजी फ़ाइल का उपयोग करते हैं। यह ओपेरा, क्रोम और सफारी में अच्छी तरह से काम करता है, केवल फ़ायरफ़ॉक्स वास्तव में ग्राफिक्स को पिक्सलेटेड प्रस्तुत करता है।फ़ायरफ़ॉक्स और ओपेरा: एसवीजी और पृष्ठभूमि आकार का परिणाम खराब प्रतिपादन में
मैं पहले से ही था कि उस विषय पर एक खोज, वहाँ भी कुछ इसी तरह के सवाल यहाँ इतने पर कर रहे हैं:
SVG rendering badly in Firefox
Firefox not anti-aliasing scaled background svg
Firefox SVG graphics blurry
कुछ सुझाव एसवीजी बहुत ज्यादा background-size और करने के लिए उपयोग स्केल नहीं लिए गए थे इसे width="100%" height="100%" दें।
मैं केवल एसवीजी को 5% तक स्केल करता हूं, इसलिए वास्तव में बहुत अधिक नहीं होना चाहिए। width="100%" height="100%" जोड़ना पिक्सेलेशन को थोड़ा ठीक कर रहा था, लेकिन अन्य ब्राउज़रों की तुलना में यह अभी भी वास्तव में धुंधला है। http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/#comment-573707
मूल रूप से चौड़ाई और ऊंचाई 22px थे:
क्या मदद की इस लिंक किए गए टिप्पणी थी। अब मैंने 200px और voilà दोनों को सेट किया है, एसवीजी कुरकुरा के रूप में प्रस्तुत करता है - लेकिन अब ओपेरा इसे थोड़ा धुंधला/वास्तव में खराब प्रस्तुत करता है! साथ ही, जब ज़ूम इन करते हैं, तो ग्राफ़िक 'कट ऑफ' हो जाता है। तो आनुपातिक रूप से स्केल करने की बजाय, ग्राफिक को इसके बॉक्स में upscaled लगता है। क्या इसके लिए कोई फिक्स है?
दिलचस्प बात यह है कि: बटन के लिए पृष्ठभूमि छवि के रूप में, यह धुंधला हो जाता है। एक इनपुट फ़ील्ड में पृष्ठभूमि छवि के रूप में, यह "अत्यधिक कुरकुरा" के रूप में प्रस्तुत करता है, मैं इसे कॉल करता हूं।