बेहतर ग्राफिक्स के लिए 20 उपयोगी एसवीजी उपकरण

एसवीजी इन दिनों वेब डिजाइन में लोकप्रियता हासिल कर रहा है और आप एसवीजी ग्राफिक्स बनाने के लिए इलस्ट्रेटर या इंकस्केप जैसे उपकरणों का उपयोग कर सकते हैं। लेकिन जब वेब डिज़ाइन की बात आती है, तो हमें हमेशा लाइटर परिणामों के लिए अनुकूलन करना चाहिए.

यहां ही 20 उपकरण जो आप एसवीजी के साथ काम करने के लिए जल्दी और कुशलता से उपयोग कर सकते हैं. हमारे पास ज्यादातर ऑनलाइन टूल हैं, जो अनुकूलन, रूपांतरण, पैटर्न बनाने, और बहुत कुछ करने में मदद कर सकते हैं.

इंटरएक्टिव एसवीजी समन्वय प्रणाली

जब आप एसवीजी के साथ काम करते हैं तो आप इसका समन्वय नहीं छोड़ सकते। यह आपकी मदद करने के लिए सारा सूडेन द्वारा एक महान इंटरैक्टिव उपकरण है जानें कि एसवीजी निर्देशांक कैसे काम करता है. का उपयोग करते हुए viewBox तथा संभावित अनुपात को बनाए रखें एसवीजी पर, नारंगी और बैंगनी लाइनों और एक आसान शासक द्वारा निर्देशित, आप सीख सकते हैं कि एसवीजी कैसे कार्य करता है.

b64

b64 के लिए एक सरल उपकरण है छवियों का अनुकूलन करें और फिर उन्हें बेस 64 प्रारूप में बदल दें. आप अपनी एसवीजी छवियां (अन्य प्रारूप जैसे जेपीजी और पीएनजी काम भी छोड़ सकते हैं) फिर सीएसएस को आधारभूत पृष्ठभूमि-छवि के साथ परिणाम के रूप में हड़प सकते हैं।.

SVGO

एसवीजी जो निर्यात किया जाता है उसमें हो सकता है अनावश्यक जानकारी जो प्रतिपादन परिणाम को प्रभावित किए बिना हटाया जा सकता है। यदि आप चाहते हैं संपादक मेटाडेटा, टिप्पणियों या छिपे हुए तत्वों को हटा दें, आप एसवीजीओ का उपयोग कर सकते हैं.

आप SVGO को npm के माध्यम से इंटाल कर सकते हैं, $ [sudo] npm install -g svgo या GUI संस्करण का उपयोग करें जो आपके SVG अनुकूलन को विफल करने के लिए ड्रैग और ड्रॉप प्रदान करता है.

एसवीजी ओएमजी

एसवीजी ओएमजी की कमांड लाइन बदल जाती है SVGO (पिछले टूल) a जीयूआई संस्करण कि अधिक सहज और प्रयोग करने में आसान। केवल बटन टॉगल करें प्रत्येक सुविधा को सक्रिय या निष्क्रिय करने के लिए। अंत में आप परिणाम को छवि फ़ाइलों और कोड के रूप में अच्छी तरह से पकड़ सकते हैं.

एसवीजी नाउ

जब आप इलस्ट्रेटर पर काम करते हैं, तो निर्यात किए गए एसवीजी में कुछ जानकारी होती है जो कि नेक्ससरी नहीं होती है। इस उपकरण के साथ आप करेंगे अपने निर्यात किए गए एसवीजी का अनुकूलित संस्करण प्राप्त करें अपने इलस्ट्रेटर कार्यक्षेत्र से सही। यह उपकरण SVG को अनुकूलित करने के लिए कुछ विकल्पों के साथ एक पैनल जोड़ता है। आप क्रिएटिव क्लाउड एड-ऑन पेज से SVG Now प्राप्त कर सकते हैं.

एसवीजी से पीएनजी कनवर्टर

चाहना PNG फॉर्म में SVG फाइलें निर्यात करें? इलस्ट्रेटर जैसे अनुप्रयोगों को खोलने के बिना ऐसा करने के लिए? यदि आपको ज़रूरत है तो PNG प्रारूप में छवि आउटपुट प्राप्त करने के लिए PNG कनवर्टर उपकरण में SVG का उपयोग करें और यदि आपको इसकी आवश्यकता है तो PNG Base64 डेटा URI.

एसवीजी सर्कस

यदि आपको लगता है कि लोडर एनिमेशन शांत हैं, तो अब आप SVG का उपयोग करके इसे आसानी से बना सकते हैं एसवीजी सर्कस. उपकरण आपको सक्षम बनाता है अपने लोडर, स्पिनर, या लूप्ड एनीमेशन का उपयोग करके कुछ समान बनाएं. पैनल से 'अभिनेता', स्थिति, आकार, रंग और अन्य सेट करें, फिर परिणाम प्राप्त करने के लिए निर्यात करें.

एसवीजी स्प्राइट

एसवीजी स्प्राइट एक नोड.जेएस मॉड्यूल है, जो अनुकूलन करता है एसवीजी फाइलों का एक गुच्छा, तथा उन्हें एसवीजी स्प्राइट-प्रकार में बांधता है पृष्ठभूमि और / या अग्रभूमि छवियों के लिए पारंपरिक सीएसएस स्प्राइट सहित, एसवीजी ढेर और बहुत कुछ.

अर्ध

अर्ध के साथ आप कर सकते हैं Quasicestone images जनरेट करें जैसा आप नीचे देख रहे हैं। यह जनरेटर प्रयोगात्मक है, लेकिन परिणाम निश्चित रूप से शांत हैं। आप विकल्प मान बदलकर खेल सकते हैं, फिर 'सेव एसवीजी' बटन के साथ परिणाम डाउनलोड करें.

सादा पैटर्न

एसवीजी के साथ पैटर्न बनाना कभी आसान या अधिक मजेदार नहीं रहा। अपनी छवि अपलोड करें, रिक्त करें, या रिक्ति को बदलें, घुमाएं और फिर से रंग लें जब तक आपको एक सुंदर पैटर्न न मिले। आप इसे डाउनलोड करने से पहले परिणाम का पूर्वावलोकन कर सकते हैं.

त्रिकोणीय जेनरेटर

सुंदर एसवीजी ज्यामितीय पैटर्न बनाएं साथ में त्रिकोणीय जेनरेटर. आप रंग यादृच्छिकता / भिन्नता, दानेदार आकार निर्धारित कर सकते हैं और साथ काम करने के लिए एक रंग पैलेट चुन सकते हैं। यह टूल Trianglify का GUI संस्करण है.

एसवीजी ग्रेडिएंट

आप जानते हैं कि आप सीएसएस के साथ ग्रेडिएंट बना सकते हैं लेकिन क्या आप जानते हैं कि आप एसवीजी के साथ भी ऐसा कर सकते हैं? सबसे आसान तरीका है SVG पर ग्रेडिएंट जेनरेट करें इस उपकरण का उपयोग करके है। बस प्रारंभ करें और रंग दर्ज करें फिर आपको उत्पन्न परिणाम के लिए कोड मिलेगा। CSS में गिरावट भी शामिल है.

एसवीजी को निर्यात PSD

यदि आप फ़ोटोशॉप को अपने काम के लिए छवि संपादक के रूप में उपयोग करते हैं, तो कभी-कभी आपको आवश्यकता हो सकती है फ़ोटोशॉप कार्यक्षेत्र पर अपने डिजाइन को एसवीजी में परिवर्तित करें, जो फ़ोटोशॉप में एक असमर्थित प्रारूप है। इस टूल पर स्क्रिप्ट डाउनलोड करें, फिर कॉपी करें Adobe Photoshop / प्रीसेट / स्क्रिप्ट फ़ोल्डर.

SVG एक्सटेंशन के साथ एक वेक्टर लेयर नाम का नाम बदलें (उदा। Layer1 layer1.svg बनें), और अब आप स्क्रिप्ट को चला सकते हैं फ़ाइल> लिपियों> पीएस से एसवीजी.

एसवीजी फिल्टर

क्या आप जानते हैं कि SVG के साथ आप ह्यू, सैचुरेशन, ब्लर, लीनियर कलर ओवरले और कई अन्य लोगों के साथ इफेक्ट्स जोड़ सकते हैं? यहाँ एक उपकरण है कि इन प्रभावों की कल्पना करता है, फिर आपको एक स्निपेट देता है यह आसान बनाने के लिए असर डालना अपने प्रोजेक्ट में.

एसवीजी मॉर्फियस

एसवीजी मॉर्फियस एक जावास्क्रिप्ट पुस्तकालय है जो आपको अनुमति देता है एक एसवीजी आइकन को एक आकार से दूसरे आकार में आकार दें. आप सहज प्रभाव, संक्रमण एनिमेशन की अवधि, और रोटेशन दिशा भी सेट कर सकते हैं.

क्लिप पथ जनरेटर

एसवीजी आपको आकृति के साथ छवि क्लिप पर क्लिक करने की अनुमति देता है। यह काफी आसान है अगर आकार एक वर्ग या एक चक्र के रूप में है। पर क्या यदि आकृति बहुत सारे बिंदुओं के साथ एक है या बहुभुज आकार है? वहीं आपको इस क्लिप पाथ जेनरेटर टूल की जरूरत है.

Chartist.js

Chartist.js एक पुस्तकालय है अत्यधिक अनुकूलन उत्तरदायी चार्ट बनाएं. यह चार्ट प्रदर्शित करने के लिए एसवीजी का उपयोग करता है, जो एसएमआईएल का उपयोग करके भी एनिमेटेड हो सकता है। इस लाइब्रेरी के साथ, आप लाइन चार्ट, पाई चार्ट, बार चार्ट और अन्य प्रकार के चार्ट बनाने में सक्षम हैं, और यहां तक ​​कि उनमें एनीमेशन भी जोड़ सकते हैं.

एसवीजी स्ट्रोक डैश जनरेटर

यह एक सरल उपकरण है धराशायी लाइनें उत्पन्न उपयोग एसवीजी स्ट्रोक-dasharray. पहले सूची से एक डैश प्रकार चुनें, फिर इसे चौड़ाई, ऊंचाई, घुमाव या रंग के अनुसार अनुकूलित करें। बाद में आप अपने प्रोजेक्ट में इस डैश लाइन को लागू करने के लिए HTML कोड और CSS ले सकते हैं.

विधि ड्रा: एक सरल एसवीजी संपादक

मेथड ड्रा एक वेब-आधारित एसवीजी संपादक है, जिसमें ए सहज ज्ञान युक्त अंतरफलक जो कैनवास के दोनों किनारों पर उपकरणों के साथ आता है. आप लाइनों, आकृतियों, इनपुट पाठ को आकर्षित कर सकते हैं या अंतर्निहित आकृतियों का उपयोग कर सकते हैं, फिर खींची गई वस्तुओं के गुणों को संपादित कर सकते हैं। छवि को एसवीजी प्रारूप में निर्यात करें (एसवीजी बेस 64 प्रारूप में भी आता है) या सीधे पीएनजी में सहेजें.

निर्यात फ़्लैश एनिमेटेड एसवीजी के लिए

यद्यपि यह अब बहुत लोकप्रिय नहीं है, फिर भी एक मौका है कि आप में से कुछ को फ्लैश के चलते कठिन समय है। यदि हां, तो आप कर सकते हैं एसवीजी में अपने फ्लैश एनीमेशन को चालू करें ताकि इसे नई तकनीकों के साथ मज़बूती से काम कर सकें. यह टूल फ़्लैश एप्लिकेशन के लिए एक एक्सटेंशन बनाता है, और CS5, CS6 और CC पर काम कर सकता है.

आप एसवीजी में निर्यात कर सकते हैं जब यह आकार, बिटमैप्स सिंबल, क्लासिक मोशन ट्वीन्स, शेप ट्वीन्स (दूसरों के लिए, वहाँ यकीनन सफल होता है).