> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# ब्राउज़र में SVG नहीं छपता? प्रिंट लेआउट जाँचें

> पता करें SVG स्क्रीन पर दिखकर ब्राउज़र प्रिंट से क्यों गायब होता है। आर्टवर्क बदलने से पहले प्रिंट CSS, पृष्ठभूमि सेटिंग और वास्तविक PDF जाँचें।

Source: https://perfectvector.com/hi/blog/svg-not-printing-browser

Language: hi
Author: Irene Kim
Published: 2026-10-15T08:00:00+09:00

SVG स्क्रीन पर दिखता लेकिन वेब पृष्ठ छापने पर गायब होता हो तो पहले पृष्ठ की प्रिंट CSS और यह देखें कि ग्राफिक CSS पृष्ठभूमि तो नहीं। वही SVG छवि तत्व के रूप में बच सकता है, जबकि प्रिंट नियम इनलाइन प्रति छिपा दे या पृष्ठभूमि सेटिंग सजावटी प्रति छोड़ दे। आर्टवर्क दोबारा बनाना दोनों में से कोई कारण नहीं सुधारता।

पृष्ठ और SVG की प्रति पर काम करें। HTML और शैलियों, इच्छित ब्राउज़र की प्रिंट सेटिंग और सुरक्षित PDF या प्रिंट प्रीव्यू तक पहुँच चाहिए। साइट एडिट न कर सकें तो मालिक को भेजने योग्य प्रमाण हैं पृष्ठ URL, ब्राउज़र संस्करण, गायब ग्राफिक और पृष्ठभूमि चालू करने से परिणाम बदलता है या नहीं।

## प्रिंट विफलता और खाली SVG अलग करें

पहले पुष्टि करें कि सामान्य पृष्ठ पर आर्टवर्क दिखता है। वहाँ भी स्रोत खाली हो तो [खाली SVG निदान](https://perfectvector.com/hi/blog/svg-opens-blank) से शुरू करें। वह गायब ज्यामिति, रंग, क्लिपिंग और व्यूपोर्ट समस्याएँ समझाता है।

स्क्रीन से प्रिंट की विफलता में पहचानें कि पृष्ठ ग्राफिक कैसे रखता है:

| क्या मिलता है                | आगे क्या जाँचें                                    |
| ---------------------------- | -------------------------------------------------- |
| पृष्ठ में इनलाइन `<svg>`     | SVG, उसके आकारों और पूर्वज तत्वों के प्रिंट नियम   |
| `<img src="artwork.svg">`    | छवि लोडिंग, छवि तत्व की प्रिंट शैली और लेआउट बॉक्स |
| `background-image: url(...)` | तत्व की प्रिंट शैली के साथ पृष्ठभूमि प्रिंट सेटिंग |
| आर्टवर्क है लेकिन कटा हुआ    | छपे आयाम, कंटेनर क्लिपिंग और पृष्ठ लेआउट           |

ये अलग रेंडर रास्ते हैं, वेक्टर गुणवत्ता के प्रकार नहीं। [इनलाइन SVG बनाम img मार्गदर्शिका](https://perfectvector.com/hi/blog/inline-svg-vs-img) बताती है कि हर रूप में कौन-सी पृष्ठ शैलियाँ आर्टवर्क तक पहुँच सकती हैं।

**अवधारणा चित्र**

![प्रिंट जाँच के दौरान स्क्रीन के तीन पत्ती चिह्नों की कागज पृष्ठ पर गायब या दिखते चिह्नों से तुलना करता चित्र।](https://perfectvector.com/blog/svg-not-printing-browser/screen-to-print-visibility.webp)

*चित्र: प्रिंट CSS और पृष्ठभूमि सेटिंग के कारण स्क्रीन दृश्यता और छपा आउटपुट अलग हो सकते हैं। नीचे मापा ब्राउज़र उदाहरण अलग मूल फाइलें उपयोग करता है।*

## छापते समय उपयोग होने वाला नियम जाँचें

प्रिंट स्टाइलशीट या `@media print` ब्लॉक कागज या PDF आउटपुट के लिए पृष्ठ बदल सकता है। [MDN की प्रिंटिंग मार्गदर्शिका](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Printing) दोनों तरीके बताती है और कहती है CSS विशिष्टता अब भी लागू है।

ब्राउज़र विकल्प देता हो तो डेवलपर टूल में प्रिंट मीडिया अनुकरण करके ग्राफिक जाँचें। मिले नियम और गणना किए `display`, `visibility`, `opacity`, आयाम व रंग देखें। समेटने वाले तत्व भी जाँचें: [display: none वंशजों को रेंडर से हटाता है](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display)। बच्चे SVG को `display: block` करने से छिपा पूर्वज वापस नहीं आता।

बदलने से पहले आउटपुट बदलने वाला नियम दर्ज करें। प्रिंट स्टाइलशीट जानबूझकर नेविगेशन आइकन हटाते हुए गलती से दस्तावेज़ लोगो पर लागू हो सकती है। चयनकर्ता सीमित करें या प्रभावित घटक का प्रिंट नियम बदलें। हर छिपा तत्व दिखाने वाला वैश्विक ओवरराइड न करें।

प्रिंट मीडिया अनुकरण CSS व्यवहार खोजने में मदद करता है। वास्तविक निर्यातित PDF खोलने का विकल्प नहीं।

## उसी मूल SVG से दो कारण दोहराएँ

छोटा उदाहरण आर्टवर्क समान रखकर दो स्वतंत्र नियंत्रण बदलता है: केवल-प्रिंट दृश्यता नियम और पृष्ठभूमि प्रिंटिंग। यह मूल निशान `mark.svg` नाम से सुरक्षित करें:

```xml
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80" viewBox="0 0 120 80">
  <circle cx="60" cy="40" r="28" fill="#087f8c"/>
  <path d="M60 18L82 54H38Z" fill="#f28e2b"/>
</svg>
```

पूरा पृष्ठ उसी फोल्डर में `broken.html` नाम से सुरक्षित करें। इनलाइन प्रति में वही वृत्त और त्रिभुज हैं। छवि और पृष्ठभूमि दोनों `mark.svg` लोड करते हैं।

```html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG print check</title>
<style>
  @page { size: A4; margin: 12mm; }
  body { margin: 0; font: 16px/1.4 sans-serif; color: #111; }
  h1 { margin: 0 0 12px; font-size: 22px; }
  p { margin: 0 0 16px; }
  .row { display: grid; grid-template-columns: 160px 120px;
         gap: 16px; align-items: center; height: 100px;
         border-bottom: 1px solid #ccc; }
  .slot, .slot svg, .slot img { width: 120px; height: 80px; }
  .slot svg, .slot img { display: block; }
  .background { background: url("mark.svg") center / contain no-repeat; }
  @media print { .inline svg { display: none; } }
</style>
<h1>SVG print check</h1>
<p>The same original SVG in three placements.</p>
<div class="row"><span>Inline SVG</span><div class="slot inline">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80" viewBox="0 0 120 80">
  <circle cx="60" cy="40" r="28" fill="#087f8c"/>
  <path d="M60 18L82 54H38Z" fill="#f28e2b"/>
</svg>
</div></div>
<div class="row"><span>Image element</span><div class="slot image">
  <img src="mark.svg" width="120" height="80" alt="Original geometric mark">
</div></div>
<div class="row"><span>CSS background</span><div class="slot background"></div></div>
</html>
```

पृष्ठ स्थानीय प्रीव्यू सर्वर से खोलें। Python 3 स्थापित हो तो दोनों फाइलों वाले फोल्डर में उपलब्ध पोर्ट लेकर यह कमांड चलाएँ:

```bash
python3 -m http.server 8000 --bind 127.0.0.1
```

`http://127.0.0.1:8000/broken.html` देखें। तीनों निशान स्क्रीन पर आने चाहिए। ब्राउज़र प्रिंट प्रीव्यू खोलें और पृष्ठभूमि ग्राफिक्स बंद रखकर PDF सुरक्षित करें, फिर चालू रखकर दूसरी। सेटिंग का नाम और जगह ब्राउज़र पर निर्भर हैं।

फिर पृष्ठ `fixed.html` में कॉपी करें। केवल यह नियम बदलें:

```css
@media print { .inline svg { display: block; } }
```

सुधरा पृष्ठ फिर लोड करके दोनों PDF निर्यात दोहराएँ। बदलाव उदाहरण का जानबूझकर `display: none` उलटता है। वास्तविक पृष्ठ पर घटक के इच्छित प्रिंट लेआउट के अनुसार दोषी नियम हटाएँ या सीमित करें।

### वास्तविक PDF निर्यात ने क्या दिखाया

हमने Playwright 1.56.1 से हेडलेस Chromium 141.0.7390.37 में फाइलें चलाईं। स्थानीय छवि लोड होने का इंतजार किया, चार एक-पृष्ठ A4 PDF निर्यात कीं और निरीक्षण के लिए Poppler से रेंडर किया। दोनों स्क्रीन कैप्चर में तीनों निशान थे।

| स्रोत         | पृष्ठभूमि प्रिंटिंग | इनलाइन SVG | छवि तत्व | CSS पृष्ठभूमि |
| ------------- | ------------------- | ---------- | -------- | ------------- |
| `broken.html` | बंद                 | गायब       | दिखता है | गायब          |
| `broken.html` | चालू                | गायब       | दिखता है | दिखती है      |
| `fixed.html`  | बंद                 | दिखता है   | दिखता है | गायब          |
| `fixed.html`  | चालू                | दिखता है   | दिखता है | दिखती है      |

निर्यात में प्रिंट मीडिया, स्केल 1, पृष्ठ का CSS कागज आकार और बिना हेडर-फूटर उपयोग हुए। Playwright का `printBackground` `false` और `true` में बदला; उसके [PDF दस्तावेज़](https://playwright.dev/docs/api/class-page#page-pdf) विकल्प और डिफॉल्ट प्रिंट मीडिया व्यवहार बताते हैं। किसी फाइल में `print-color-adjust` नहीं है।

पृष्ठभूमि चालू करने से पृष्ठभूमि प्रति लौटी, छिपा इनलाइन SVG नहीं। प्रिंट नियम सुधारने से इनलाइन SVG लौटा, पृष्ठभूमि प्रिंटिंग चालू नहीं हुई। स्रोत आर्टवर्क कभी नहीं बदला।

परीक्षण बताए Chromium वातावरण और सरल मूल ज्यामिति में ये परिणाम स्थापित करता है। हर ब्राउज़र में समान व्यवहार, भौतिक प्रिंटर आउटपुट या सटीक रंग मिलान स्थापित नहीं करता।

## कारण सुधारें, फिर सुरक्षित फाइल जाँचें

**प्रिंट नियम आर्टवर्क छिपाए:** समस्या शुरू करने वाले तत्व या पूर्वज का नियम सुधारें। स्क्रीन और प्रिंट दोनों फिर जाँचें ताकि दस्तावेज़ सुधार से इंटरफेस नियंत्रण अनजाने न दिखें।

**केवल CSS पृष्ठभूमि गायब हो:** पृष्ठभूमि प्रिंटिंग चालू रखकर आउटपुट तुलना करें। ग्राफिक ज़रूरी सामग्री हो तो केवल सजावटी पृष्ठभूमि पर निर्भर होने के बजाय प्रिंट लेआउट में अर्थपूर्ण छवि या इनलाइन SVG के रूप में रखने पर विचार करें। नियंत्रित उदाहरण में पृष्ठभूमि बंद रहते छवि तत्व दिखा; अपने पृष्ठ की फिर भी अलग जाँच चाहिए।

**छवि स्वयं लोड न हो:** पाथ बदलने से पहले माँगा URL और संसाधन त्रुटियाँ जाँचें। [MDN छवि के रूप में SVG की सीमाएँ बताता है](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image), जिनमें स्क्रिप्ट और बाहरी संसाधन सीमाएँ हैं। अलग SVG टैब और पृष्ठ में समाहित छवि समान निर्भरता परीक्षण नहीं। सर्वर-निर्मित WeasyPrint आउटपुट के लिए अलग [SVG संसाधन समाधान मार्गदर्शिका](https://perfectvector.com/hi/blog/weasyprint-svg-image-pdf) लें।

**परिणाम कटा या आंशिक गायब हो:** पृष्ठ को विफल ग्राफिक और उसके कंटेनर तक सीमित करें। उनके छपे बॉक्स, ओवरफ्लो और SVG सीमाएँ तुलना करें, फिर ज्यामिति जाँच के लिए मौजूदा खाली-SVG मार्गदर्शिका पर लौटें। पृष्ठभूमि टॉगल को क्लिपिंग का सामान्य समाधान न बनाएँ।

हर बदलाव के बाद नई सुरक्षित PDF खोलें और इच्छित आकार पर ग्राफिक जाँचें। पास की सामग्री, पृष्ठ विभाजन और अर्थपूर्ण लेबल जाँचें। ब्राउज़र संस्करण और संबंधित निर्यात सेटिंग दर्ज रखें। डिस्क पर PDF होना आर्टवर्क मौजूद होने का प्रमाण नहीं।

## वेक्टराइजेशन केवल अलग स्रोत समस्या में लें

उपयोगी पाथ वाले मौजूदा SVG के पाथ बचाकर पृष्ठ सुधारें। केवल रास्टर क्लिपआर्ट स्रोत हो और संपादन योग्य आकार चाहिए तो [PerfectVector से क्लिपआर्ट को SVG बनाएँ](https://perfectvector.com/hi/clipart-to-svg)। प्रीव्यू जाँचें, फिर SVG एडिट और निर्यात के लिए अनलॉक करें। समाहित करने से पहले सिलुएट, छेद और छोटे विवरण रास्टर से तुलना करें।

PerfectVector आसपास की प्रिंट स्टाइलशीट नहीं सुधारता और ब्राउज़र पृष्ठभूमि सेटिंग नहीं चुनता। कोई आर्टवर्क एसेट बदलने के बाद वही पृष्ठ से PDF परीक्षण दोहराएँ।

इच्छित सेटिंग में सुरक्षित आउटपुट पर ज़रूरी आर्टवर्क दिखे और कटा न हो, तब पूरा है। रास्टर से संपादन योग्य आकार भी चाहिए तो [PerfectVector से SVG तैयार करें](https://perfectvector.com/hi/clipart-to-svg), फिर अंतिम पृष्ठ में सत्यापित करें। कागज आउटपुट डिलीवरी हो तो भौतिक प्रूफ लें; उदाहरण ने केवल डिजिटल PDF परखी।

## अक्सर पूछे जाने वाले प्रश्न

**क्या print-color-adjust: exact मेरे SVG पृष्ठभूमि के छपने की गारंटी है?**
नहीं। यह ब्राउज़र से इच्छित रूप बचाने को कहता है, लेकिन उपयोगकर्ता विकल्प उसे बदल सकते हैं। [MDN का print-color-adjust संदर्भ](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/print-color-adjust) स्पष्ट सीमाएँ बताता है। यह तत्व छिपाने वाला डिस्प्ले नियम भी नहीं हटाता।

**प्रिंट सुधारने के लिए SVG को PNG बनाऊँ?**
पहले कारण पहचानें। फॉर्मैट बदलने से प्रिंट मीडिया नियम नहीं हटता और पृष्ठभूमि प्रिंटिंग चालू नहीं होती। पृष्ठ और आउटपुट सेटिंग जाँचते हुए उपयोगी SVG ज्यामिति बचाएँ।

**छवि संस्करण क्यों छपता है जबकि इनलाइन नहीं?**
पृष्ठ उन पर अलग चयनकर्ता लगा सकता है। नियंत्रित उदाहरण में केवल-प्रिंट नियम इनलाइन SVG छिपाता है जबकि छवि तत्व दिखता है। एक समावेशन तरीका हमेशा बेहतर छपता मानने के बजाय वास्तविक नियम जाँचें।

## स्रोत

1. [MDN: प्रिंटिंग](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Printing) — प्रिंट स्टाइलशीट, प्रिंट मीडिया और जारी CSS कैस्केड समझाता है।
2. [MDN: display](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) — डिस्प्ले दमन का तत्व और वंशजों पर प्रभाव परिभाषित करता है।
3. [Playwright: page.pdf](https://playwright.dev/docs/api/class-page#page-pdf) — वास्तविक परीक्षण के प्रिंट मीडिया और पृष्ठभूमि निर्यात नियंत्रण बताता है।
4. [MDN: छवि के रूप में SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) — छवि समावेशन और अलग SVG दस्तावेज़ की सीमाएँ अलग बताता है।
5. [MDN: print-color-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/print-color-adjust) — रूप अनुरोध और उपयोगकर्ता प्रिंट प्राथमिकताओं की वरीयता समझाता है।

## Explore

- [Read the HTML article](https://perfectvector.com/hi/blog/svg-not-printing-browser)
- [SVG से Canvas: PNG निर्यात से पहले कलाकृति लोड करें](https://perfectvector.com/hi/blog/svg-canvas-image-export.md)
- [SVG.js: आर्टवर्क लाएँ, पाथ बदलें और SVG निर्यात करें](https://perfectvector.com/hi/blog/svgjs-import-export-artwork.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)