What is an SVG File?

3
53
What is SVG File

What is an SVG File? SVG Full form is – Scalable Vector Graphics.

What is an SVG File ये image का नया फॉरमेट है मार्किट में| Image के कई फॉर्मेट हैं जैसे JPEG, PNG, GIF ये जितने भी फॉर्मेट हैं ये सारे हैं Bitmap images. जो Bitmap Images होती हैं, वो डिवाइड होती है Pixel Grid में और उनकी height और width pre define होती है| अगर आप उनसे ज़्यादा height और width करने की कोशिश करेंगे, तो इमेज ख़राब हो जायेगी| Bitmap Image को अगर हम zoom करेंगे बहुत ज्यादा, तो इनके पिक्सल फट जाते हैं और इमेज खराब हो जाती है|

अब हम बात करते हैं यहाँ पर Vector Image की| SVG जो है वो है एक Vector Image. इसका जो फॉरमेट होता है वो होता है XML format और ये जो ये इमेज होती है, ये Bitmap Images से काफी ज्यादा डिफरेंट होती हैं| SVG image zoom able होती है| Means इन इमेज को कितना भी ज़ूम कर लो इनके pixels नही फटते| यही डिफरेंस होता है Vector और Bitmap Images में| Bitmap Images Zoom able नहीं होती और Vector Image Zoom able होती हैं|

What is an SVG File

What is SVG File

What is an SVG File Feathers

SVG File के क्या फीचर्स होते हैं, तो ये SVG images होती है ये editable होती हैं, किसी भी text editor मे| Means आप कोई भी टेक्स्ट एडिटर से इसे ओपेन करके इसे चेंज कर सकते हैं| SVG Image Scalable होती हैं| आप जितना चाहें इसे बड़ा कर सकते हैं Height और Width से और जितना चाहे छोटा कर सकते हैं| इमेज की क्वॉलिटी में कोई भी फर्क नहीं पड़ेगा|

SVG image को आप easily प्रिंट भी कर सकते हैं| किसी भी resolution में without उसकी क्वालिटी को reduce किये किसी भी हाई क्वालिटी में आप इमेज को प्रिंट करा सकते हैं| SVG image Zoomable होती है| SVG जो फाइल होती है वो XML format में होती है| इसका मतलब आप HTML and CSS में इन्हे इसलिए हैंडल कर सकते हैं। SVG जो इमेज होती है, ये searchable होती है, indexed और scripted होती है, इनको आप compreesed भी कर सकते हैं ।

जैसे आप दूसरी JPEG, PNG इमेज को आप confreesed करके उनकी फाइल साइज reduce कर सकते है, बिलकुल वैसे ही आप SVG file को भी compressed कर सकते हैं।

What is an SVG File and how it use in HTML

अब देखते हैं कि एसपीजी फाइल को HTML में कैसे यूज कर सकते हैं, तो SVG file को HTML में यूज करने के दो तरीके हैं|

पहला तरीका तो ये है कि image type के अंदर image file का नाम देकर SVG लगाकर यूज कर सकते हैं। दूसरा तरीका है, कि आप एक SVG tag ले सकते हैं। एचटीएमएल, HTML फाइल में एक tag है SVG आप इसके through कोई भी image बना सकते हैं।

What is an SVG File

What is SVG File

अगर आप अपने कोई SVG image बनाना चाहते हैं, तो उसके लिए Illustrator सॉफ्टवेयर का यूज कर सकते हैं। उसमें जाकर आप export as SVG करके फाइल को save कर सकते हैं और आप easily यूज कर सकते हैं या आप इसे नेट पर जाकर भी यूज कर सकते हैं| वहाँ से डाउनलोड करके|

अगर आप SVG फाइल नेट से डाउनलोड करना चाहते हैं, तो इसके लिए एक वेबसाइट आती है, flaticon.com यहाँ से आप कोई भी Vector file डाउनलोड कर सकते हैं। यहाँ पर बहुत सारे Vector images है, आप इसे easily search भी कर सकते हैं।

आपको जो भी इमेज डाउनलोड करना चाहते हैं उस पर क्लिक करें क्लिक करते ही आपको उसके फॉर्मेट शो होंगे, आप वहाँ से SVG format सेलेक्ट करें और उस पर क्लिक करके डाउनलोड करके अपनी फाइल में यूज कर सकते हैं| What is an SVG file में SVG की जो फाइल्स होती है वो flat color में होती हैं, उनमें मल्टीपल कलmultiple colors या gradients color नहीं आते| फोटोग्राफ जो होती है वो multi color में होती है, तो वहाँ पर हम SVG file यूज़ नहीं कर सकते| वहां हमें JPEG format file यूज़ करना होगा|

What is an SVG File and how it create

SVG File format में क्रिएट करने के लिए हम Adobe illustrator का यूज़ करते हैं| इसके अलावा हम फोटोशॉप में भी SVG File बना सकते हैं , डिज़ाइन कर सकते हैं, हम फोटोशॉप में | फोटोशॉप में क्रिएट करने के लिए आप अपने सिस्टम में फोटोशॉप ओपन कर ले|

What is an SVG file में मैं यहां फोटोशॉप CC 2015 यूज़ कर रही हूँ| फोटोशॉप ओपन करने के बाद एक new फाइल ओपन करेंगे| मैंने यहाँ हज़ार ह1000 x 1000 की फाइल ओपन कर दी है| उसके बाद आप जिस डिजाइन को पेज पर बनाना चाहते हैं, SVG file में बनाना चाहते हैं, उसे पेज पर draw कर ले|

मैंने यहां पर shape tool से एक basic custom shape draw कर ली है | इसे मैंने पेज पर ड्रॉ कर लिया है, मैंने यहाँ एक butterfly की image draw कर ली है और उसे पेज पर draw करके एक कलर फील कर लिया है| उसमें आपको जो भी एडिटिंग करनी है, आप उसमें कर लें| What is SVG file में एडिटिंग कम्प्लीट करने के बाद आपको सिम्पल save as पर क्लिक करना है|

What is an SVG File

What is SVG file

फ़ोटोशॉप में save as पर क्लिक करने पर आपके सामने save as की विंडो ओपन हो जायेगी, वहाँ आप फाइल नेम देकर फॉर्मेट में ऑप्शन आता है Photoshop EPS का वहाँ से आप EPS choose कर ले ओके कर दे| हमारी EPS फाइल save हो गयी है| SVG जो फाइल होती है वो illustrator में बनती है, मगर हम उसका डिजाइन EPS के थ्रू फोटोशॉप में रेडी कर सकते हैं |

जो EPS format file होती है वह हमारे illustrator में easily ओपन हो जाती है| तो मैंने इस EPS फाइल को illustrator में ओपेन कर लिया है| अब हम इस फाइल को फाइल मेन्यू में जाकर save as करके file name टाइप कर Format से SVG format चूज कर ले, ओके कर दे| What an is SVG File में आपकी फाइल save हो चुकी है|

जैसे कि आप जानते हैं कि SVG एक Scalable Vector Graphic Image है, तो आप इसका जितना भी साइज zoom करेंगे, इसके पिक्सल खराब नहीं होंगे| What an is SVG File में इसके edges अभी भी clear रहेंगे| ये facility हमें SVG फाइल में मिल जाती है| अब अगर आप कोई भी फाइल direct illustrator में क्रिएट करना चाहते हैं, तो उसके लिए हमने अपने सिस्टम में Illustrator ओपन कर लिया है और एक न्यू पेज मैंने क्रिएट कर लिया है|

What is an SVG File

What is SVG File

इस पर आप जो भी डिजाइन बनाना चाहते हैं, SVG फाइल के लिए बनाना चाहते हैं वो आप क्रिएट करें पेज पर और उसमें कलर फील कर लें और जो भी एडिटिंग करना चाहते हैं वो कर ले|What is SVG File में  सब एडिटिंग करने के बाद आप save as से SVG फॉर्मेट सेलेक्ट कर save कर सकते हैं| Illustrator में आप Export as के ऑप्शन से भी SVG format सेलेक्ट कर अपनी फाइल को SVG format में save कर उसे यूज़ कर सकते हैं|

अब हम इस image को HTML में यूज़ करेंगे| इसके लिए मैंने HTML का एक प्रोग्राम बना लिया है|
<html>
<title>SVG with Html </title>
<head>
<style>
body
{ font-family: airal}
h1 { padding: 0 0 0 20px;}
.container
{
background: #eee;
border: 1px solid gray;
width: 500px;
height: 500px;
margin: 20px;
}
</style>
</head>
<body>
<h1> CG Master Group </h1>
<div class=”container”>
<img src=”images.src” alt=””>
</body>
</html>

हमने इमेज टैग में फाइल का नाम देकर .svg लगाकर डायरेक्ट SVG फाइल अपनी HTML पेज में ओपेन कर ली है| What is an SVG File में अब अगर हम CSS function मे SVG फाइल लगाना चाहते हैं, तो उसके लिए हम ये प्रोग्राम create कर सकते हैं:-

background: #eee url { image.src};

यहाँ हमने SVG फाइल को बैकग्राउंड में सेट कर लिया है| What is an SVG File में आप इस इमेज के ऊपर कुछ टेक्स्ट एड करना चाहते हैं तो वह भी आप कर सकते हैं| What is an SVG File में अब अगर हमें SVG tag का यूज़ करके SVG फाइल को HTML में क्रिएट करना है तो हम HTML में SVG tag का यूज कर, उसमें फाइल की प्रॉपर्टी add कर देंगे और save कर देंगे, तुम्हारी फाइल HTML में ओपन हो जायेगी|

What is an SVG File and how JPEG and PNG image convert to SVG Image

अब अगर हम अपनी किसी JPEG इमेज को SPG में कन्वर्ट करना चाहते हैं, तो कैसे करेंगे? इसके लिए हमने अपने सिस्टम में JPEG image download किया है| What is an SVG File में अब SVG में कन्वर्ट करने के लिए हम यहाँ Inkscape सॉफ्टवेर का यूज़ कर रहे हैं| Inkscape सॉफ्टवेयर को आप आसानी से नेट से डाउनलोड कर सकते हैं| Inkscape फ्री सॉफ्टवेयर होता है|

What is SVG File

What is SVG File

अब हम Inkscape सॉफ्टवेयर को अपने सिस्टम में ओपेन कर लिया है और JPEG image को Inkscape software में ओपन कर लिया|What is an SVG File में हम इसे लिंक में ओपन करना होगा, ओपन करने के बाद हमें Path Menu में जाना है Path menu में जाकर वहां से trace bitmap पर क्लिक करना है|

What an is SVG File में Trace Bitmap पर क्लिक करते ही एक डायलॉग बॉक्स ओपन होगा, वहाँ आप color और stock scan पर क्लिक कर लें और अपडेट कर ले| अपडेट करने के बाद ये JPEG image डायलॉग बॉक्स में शो होने लगेगा, उसके बाद उसे ओके कर दीजिए| What an is SVG File में ओके करने के बाद हमारी इमेज trace हो गयी| अब हम JPEG इमेज को डिलीट कर देंगे और Object menu में जाकर इमेज को सेलेक्ट करके ungroup कर देंगे।

Ungroup करने के बाद File Menu में जाकर save as पर क्लिक करना है| Save as पर क्लिक करने के बाद वहाँ फाइल पर फाइल नाम देना है और optimized Svg में save कर देना है| हमारी फाइल SVG format में save हो गयी है। इस प्रकार हमारी JPEG फाइल एस सी SVG में कन्वर्ट होकर save हो गयी है।

3 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here