PerfectVector
लेखक: Irene Kim8 मिनट का पठन

CairoSVG: सही आकार पर SVG को PDF और PNG एक्सपोर्ट करें

CairoSVG से SVG कलाकृति बदलें, आउटपुट चौड़ाई या पैमाना चुनें, DPI और पैरेंट आयाम समझें तथा देने से पहले PNG पिक्सेल और PDF पेज आकार जाँचें।

इस पेज पर

रास्टर एक्सपोर्ट के लिए cairosvg.svg2png() और PDF के लिए cairosvg.svg2pdf() इस्तेमाल करें। निश्चित PNG चौड़ाई में output_width और अनुपात में बड़े आकार के लिए scale दें। parent_width प्रतिशत आयाम तय करने का कंटेनर देता है। dpi पिक्सेल और भौतिक इकाइयों का संबंध नियंत्रित करता है, इसलिए बदलने से PNG और PDF आकार अलग प्रभावित हो सकते हैं।

नीचे उदाहरण छोटा SVG प्रतीक लेकर हर सेटिंग की बनी फ़ाइलें जाँचता है। यह लोगो एक्सपोर्ट स्वचालित करने वाले डिज़ाइनर और दस्तावेज़ कलाकृति तैयार करने वाले डेवलपर के लिए है। CairoSVG मौजूदा SVG रेंडर करता है। यह PNG लोगो को संपादन योग्य पाथ में ट्रेस नहीं करता।

अपने सभी संसाधन रखने वाले SVG से शुरू करें

हमने Python 3.12.11 और CairoSVG 2.9.1 से उदाहरण चलाए। प्रोजेक्ट वातावरण में निश्चित कन्वर्टर इंस्टॉल करें:

python -m pip install "CairoSVG==2.9.1"

CairoSVG को नेटिव Cairo लाइब्रेरी भी चाहिए। इंस्टॉल या इंपोर्ट विफल हो तो इंस्टॉल दस्तावेज़ के ऑपरेटिंग सिस्टम नोट्स अपनाएँ।

तीन पाथ वाला मूल प्रतीक emblem.svg सेव करें। चौकोर खुली जगह गायब भराव नियम पहचानना आसान करती है और पतली पट्टी छोटे विवरण की जाँच देती है। यह हाथ से बनी प्रदर्शन कलाकृति है, PerfectVector रूपांतरण नहीं।

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="120" viewBox="0 0 240 120">
  <path fill="#176b63" fill-rule="evenodd"
        d="M20 100 V20 H100 V100 Z M40 40 V80 H80 V40 Z"/>
  <path fill="#e5a43a" d="M110 100 L160 20 L210 100 Z"/>
  <path fill="#24435d" d="M220 20 H230 V100 H220 Z"/>
</svg>

रूट आयाम आउटपुट व्यूपोर्ट बताते हैं। viewBox कलाकृति का भीतरी निर्देशांक आयत बताता है। यहाँ दोनों 2:1 हैं। अपने लोगो के अनुसार उदाहरण बदलते समय संबंध जानबूझकर रखें।

एक मूल प्रति ज़रूरी आकार में एक्सपोर्ट करें

SVG के पास export_emblem.py सेव करें, फिर python export_emblem.py चलाएँ:

import cairosvg
 
cairosvg.svg2png(
    url="emblem.svg",
    write_to="emblem-480.png",
    output_width=480,
)
cairosvg.svg2pdf(
    url="emblem.svg",
    write_to="emblem.pdf",
)

हमारा PNG 480 × 240 पिक्सेल था। PDF पेज 180 × 90 पॉइंट, यानी 2.5 × 1.25 इंच था। ये दिए नमूने के माप हैं, हर SVG के अपेक्षित आयाम नहीं।

समान कमांड लाइन रूप हैं:

cairosvg emblem.svg --output-width 480 -o emblem-480.png
cairosvg emblem.svg -o emblem.pdf

CairoSVG का API और कमांड लाइन संदर्भ url से इनपुट फ़ाइल नाम, bytestring से SVG बाइट और write_to से फ़ाइल आउटपुट बताता है। CLI में आउटपुट एक्सटेंशन फ़ॉर्मैट चुनता है।

एक ज्यामितीय प्रतीक से अलग आकार कैनवस पर अनुपात में समान दो एक्सपोर्ट बनने का चित्रण
एक्सपोर्ट निर्णय का चित्रण: वेक्टर मूल रखें, फिर हर वितरण के ज़रूरी आयाम चुनें। मापे CairoSVG परिणाम नीचे हैं।

समस्या के अनुसार नियंत्रण चुनें

समान नाम वाले विकल्प अलग सवाल हल करते हैं। CairoSVG आकार संदर्भ पैरेंट कंटेनर और माँगे आउटपुट आयाम अलग करता है।

आवश्यकताPython विकल्पCLI विकल्पजाँच
ठीक 480 पिक्सेल चौड़ा PNGoutput_width=480--output-width 480ऊँचाई और कलाकृति अनुपात
तय आउटपुट आयाम दोगुनेscale=2--scale 2दोनों आयाम दोगुने
प्रतिशत वाली रूट चौड़ाई या ऊँचाई तय करनाparent_width, parent_height--width, --heightदिए कंटेनर का प्रतिशत
इंच जैसी भौतिक इकाइयाँ समझनाdpi--dpiPNG पिक्सेल और PDF भौतिक आकार अलग

पिक्सेल आकार वाले स्रोत पर हर विकल्प अलग चलाया:

सेटिंगPNG आयामPDF पेज आयाम
डिफ़ॉल्ट240 × 120 px180 × 90 pt
output_width=480480 × 240 px360 × 180 pt
scale=2480 × 240 px360 × 180 pt
dpi=192240 × 120 px90 × 45 pt

अंतिम पंक्ति भ्रम है: DPI दोगुना करने से पिक्सेल आकार SVG में अधिक PNG पिक्सेल नहीं मिले। समान पिक्सेल आयाम PDF में कम भौतिक जगह लेते हैं। आवश्यकता पिक्सेल संख्या हो तो आउटपुट आयाम दें।

दोनों आउटपुट आयाम देना कैनवस आयत तय करता है; पूरा भरा कसा लोगो बॉक्स सुनिश्चित नहीं। SVG अनुपात नियम और viewBox की खाली जगह अब भी महत्वपूर्ण हैं। मूल अनुपात चाहिए तो एक आउटपुट आयाम से शुरू करें और परिणाम देखें।

प्रतिशत आयामों को पैरेंट चाहिए

width="50%" height="50%" रूट वाली नमूना प्रति में यह कॉल 960 × 480 पिक्सेल पैरेंट देती है:

cairosvg.svg2png(
    url="emblem-percent.svg",
    parent_width=960,
    parent_height=480,
    write_to="emblem-percent.png",
)

आउटपुट 480 × 240 पिक्सेल, यानी आधी पैरेंट चौड़ाई और ऊँचाई था। इसलिए parent_width=480 और output_width=480 एक-दूसरे की जगह नहीं हैं।

CairoSVG SVG आकार अपरिभाषित बताए तो पहले रूट आयाम देखें। उपयोग अनुसार धनात्मक आयाम दें या प्रतिशत उन पर निर्भर हो तो पैरेंट आयाम दें। ब्राउज़र संयोग से कलाकृति को जिस आकार में दिखाता है, उससे इच्छित पेज आकार का अनुमान न लगाएँ।

भौतिक आयाम अलग चलते हैं

viewBox रखते हुए मूल रूट width="2.5in" height="1.25in" करें। परीक्षण में dpi=96 ने 240 × 120 PNG और dpi=192 ने 480 × 240 PNG दिया। दोनों PDF 180 × 90 पॉइंट रहे।

स्रोत यहाँ भौतिक आकार देता है, इसलिए अधिक पिक्सेल प्रति इंच रास्टर रिज़ॉल्यूशन बढ़ाते हुए PDF भौतिक पेज आकार बचाता है। इसी सिद्धांत से जानबूझकर तैयार किए गए पेज के आयाम मिलीमीटर या इंच में दिए जा सकते हैं। बड़ी पिक्सेल संख्या को A4 या letter पेज मानने के बजाय PDF पेज बॉक्स देखें।

लोगो रिपोर्ट में टेक्स्ट, मार्जिन और कई तत्वों के साथ रखना हो तो दस्तावेज़ लेआउट चरण दें। हमारी ReportLab SVG स्थान मार्गदर्शिका सीधे PDF बनाना और WeasyPrint संसाधन तथा आकार जाँच HTML दस्तावेज़ समझाती हैं।

क्या वेक्टर रहा सहित एक्सपोर्ट जाँचें

हमने Pillow से PNG हेडर और pypdf 6.10.0 से PDF पेज बॉक्स तथा सामग्री स्ट्रीम पढ़ीं। चारों पिक्सेल स्रोत PDF में चित्र पाथ क्रियाएँ और शून्य पेज इमेज थीं। यह सरल इमेज रहित नमूने की वेक्टर ज्यामिति पुष्टि करता है। इससे किसी भी SVG के हूबहू रेंडर होने की पुष्टि नहीं होती।

अपने आउटपुट आयाम जाँचने के लिए उसी वातावरण में pillow और pypdf इंस्टॉल करके चलाएँ:

from PIL import Image
from pypdf import PdfReader
 
with Image.open("emblem-480.png") as image:
    print("PNG pixels:", image.size)
 
page = PdfReader("emblem.pdf").pages[0]
print("PDF points:", float(page.mediabox.width),
      float(page.mediabox.height))
print("Page images:", len(page.images))

PageObject संदर्भ mediabox और images बताता है। इमेज संख्या उपयोगी जाँच है, लेकिन हर आकृति, फ़ॉन्ट या प्रभाव सही बचना सिद्ध नहीं करती।

देने से पहले:

  1. PNG और PDF खोलकर प्रतीक की SVG से तुलना करें। खुली जगह, त्रिकोण, पट्टी और मार्जिन देखें।
  2. PNG पिक्सेल और PDF भौतिक आयाम अलग जाँचें।
  3. इच्छित उपयोग आकार पर छोटे अंतर तथा विवरण सहित कलाकृति देखें।
  4. मूल SVG रखें और बदलने या कन्वर्टर अपग्रेड के बाद जाँच फिर चलाएँ।

CairoSVG का SVG समर्थन पेज कहता है कि जहाँ संभव हो वेक्टर आउटपुट बचता है। एम्बेडेड रास्टर इमेज रास्टर रहती हैं। SVG में लिपटा PNG हो तो एम्बेडेड इमेज जाँच एक्सपोर्ट से पहले पहचानने में मदद करती है।

CairoSVG स्थिर रेंडरर है। एनीमेशन, स्क्रिप्ट, उन्नत टेक्स्ट लेआउट और कई फ़िल्टर समर्थित प्रक्रिया से बाहर हैं। दस्तावेज़ केवल feOffset, feBlend और feFlood समर्थित फ़िल्टर बताते हैं। दूसरे प्रभाव वाली कलाकृति में ध्यान से तुलना करें या समर्थित ऐप से एक्सपोर्ट करें। केवल सफल रूपांतरण कॉल पर्याप्त नहीं।

स्रोत को ज़रूरत हो तभी वेक्टर मूल वापस लाएँ

लोगो केवल PNG या JPG हो तो PerfectVector CairoSVG एक्सपोर्ट से पहले रास्टर से SVG चरण दे सकता है। संपादक में प्राप्त आकृतियाँ, छोटी खुली जगह और ब्रांड अक्षर देखें; फिर सभी संसाधन सहित SVG मूल सेव करें। हमारी लोगो वेक्टराइज़ेशन प्रक्रिया वह जाँच बताती है।

मौजूदा संपादन योग्य SVG सीधे एक्सपोर्ट जा सकता है। PNG बनाकर फिर ट्रेस करने से उपयोगी स्रोत ज्यामिति खोएगी। फ़ोटो इच्छित सामग्री हो तो रास्टर रह सकती हैं।

केवल रास्टर लोगो हो तो PerfectVector में अपनी इमेज आज़माएँ, SVG की आउटलाइन और खुली जगह देखें, फिर CairoSVG एक्सपोर्ट के पिक्सेल आयाम तथा भौतिक पेज आकार दोनों जाँचें।

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

DPI बदलने पर PNG का आकार वही क्यों है? अगर SVG रूट के आयाम पिक्सेल में हैं, तो DPI बदलने से PNG की पिक्सेल संख्या ज़रूरी नहीं कि बदले। यहाँ 240 गुणा 120 पिक्सेल SVG 192 DPI पर भी वही रहा। अधिक आउटपुट पिक्सेल के लिए output_width या scale दें।

क्या पैरेंट चौड़ाई और आउटपुट चौड़ाई समान हैं? नहीं। parent_width प्रतिशत आयाम तय करने का कंटेनर है। output_width अंतिम चौड़ाई माँगता है। उदाहरण में 50% रूट चौड़ाई और 960 parent_width से 480 पिक्सेल बने।

क्या CairoSVG हमेशा पूरी वेक्टर PDF बनाता है? नहीं। वह जहाँ संभव हो वेक्टर बचाता है, लेकिन SVG में रास्टर इमेज और असमर्थित सुविधाएँ हो सकती हैं। एक्सटेंशन प्रमाण मानने के बजाय PDF सामग्री और रूप देखें।

स्रोत

  1. CairoSVG दस्तावेज़ — इंस्टॉल, रूपांतरण API, आकार नियंत्रण और रेंडर सीमा बताता है।
  2. CairoSVG SVG 1.1 समर्थन — वेक्टर बचाना, एम्बेडेड इमेज और असमर्थित सुविधाएँ समझाता है।
  3. pypdf PageObject संदर्भ — PDF जाँच के पेज बॉक्स और इमेज इंटरफ़ेस बताता है।

Blog से और

ऐसे साफ़ SVG से शुरुआत करें
जिसे एडिट करना आसान हो