ஏன் இன்று உங்கள் வலைத்தளத்தின் மீது SVG ஐ பயன்படுத்த வேண்டும்

அளவிடக்கூடிய வெக்டர் கிராபிக்ஸ் பயன்படுத்தி நன்மைகள்

அளவிடக்கூடிய வெக்டார் கிராபிக்ஸ் அல்லது SVG இன்று இணையதளத்தில் வடிவமைப்பில் முக்கிய பங்கு வகிக்கிறது. நீங்கள் தற்போது உங்கள் வலை வடிவமைப்பு வேலைகளில் SVG ஐப் பயன்படுத்தவில்லை என்றால், நீங்கள் ஏன் அவ்வாறு செய்ய வேண்டும் என சில காரணங்கள் உள்ளன, அதேபோல் பழைய உலாவிகளுக்கு இந்த கோப்புகளை ஆதரிக்காத fallbacks.

தீர்மானம்

SVG இன் மிகப்பெரிய நன்மை தீர்மானம் சுதந்திரம் ஆகும். SVG கோப்புகள் திசையன் கிராபிக்ஸ் என்பதால் பிக்சல் அடிப்படையிலான ராஸ்டார் படங்களுக்கு பதிலாக, எந்த பட தரத்தையும் இழக்காமல் அவை மறுஅளவிடுகின்றன. நீங்கள் நன்றாக இருக்க வேண்டும் மற்றும் திரை அளவுகள் மற்றும் சாதனங்கள் ஒரு பரவலான முழுவதும் வேலை செய்ய வேண்டும் என்று பதிலளிக்க வலைத்தளங்களை உருவாக்கும் போது இது குறிப்பாக பயனுள்ளதாக இருக்கும்.

SVG கோப்புகளை உங்கள் பதிலளிக்க வலைத்தளத்தின் மாறி அளவு மற்றும் அமைப்பு தேவைகளை இடமளிக்கும் வரை கீழே அல்லது கீழே அளவிட முடியும் மற்றும் நீங்கள் தரத்தை சமரசம் தரம் எந்த படிப்பினையும் அந்த கிராபிக்ஸ் பற்றி கவலைப்பட தேவையில்லை.

கோப்பின் அளவு

பதிலளிக்க வலைத்தளங்களில் ராஸ்டர் படங்கள் (JPG, PNG, GIF) பயன்படுத்தி சவால்களில் ஒன்றாகும் அந்த படங்களின் கோப்பு அளவு. திசையன் செயல்களைச் செய்வதற்கு ராஸ்டெர் படங்கள் அளவிடாததால், உங்கள் பிக்சல்-சார்ந்த படங்களை அவர்கள் காட்டப்படும் மிகப்பெரிய அளவில் வழங்க வேண்டும். ஏனெனில் நீங்கள் எப்போதுமே ஒரு படத்தை சிறியதாகவும் அதன் தரத்தை தக்கவைத்துக்கொள்ளவும் முடியும், ஆனால் படங்களை பெரியதாக செய்வதற்கு இது உண்மையல்ல. இறுதி முடிவை நீங்கள் ஒரு நபரின் திரையில் காட்டப்படுவதை விட மிக அதிகமாக இருக்கும் படங்களைக் கொண்டிருக்கின்றன, அதாவது அவை மிகப்பெரிய கோப்பை பதிவிறக்க வேண்டிய அவசியம் என்று அர்த்தம்.

இந்த சவாலை SVG முகவரியிடும். வெக்டார் கிராபிக்ஸ் அளவிடக்கூடியது என்பதால், அந்த படங்கள் எவ்வளவு பெரிய அளவில் காட்டப்பட வேண்டும் என்பதைப் பொருட்படுத்தாமல் மிக சிறிய கோப்பு அளவுகளைக் கொண்டிருக்கலாம். இது இறுதியில் ஒரு தளம் ஒட்டுமொத்த செயல்திறன் மற்றும் பதிவிறக்க வேகத்தில் ஒரு சாதகமான தாக்கத்தை ஏற்படுத்தும்.

CSS ஸ்டைலிங்

SVG குறியீட்டை நேரடியாக HTML பக்கத்திற்கு சேர்க்கலாம். "இன்லைன் SVG" என்று அறியப்படுகிறது. இன்லைன் SVG ஐ பயன்படுத்துவதன் நன்மைகளில் ஒன்றானது, உங்கள் குறியீட்டை அடிப்படையாகக் கொண்ட உலாவி மூலம் உண்மையில் வரையப்பட்டிருப்பதால், ஒரு பட கோப்பைப் பெற HTTP கோரிக்கையை உருவாக்க வேண்டிய அவசியமில்லை. மற்றொரு நன்மை, இன்லைன் SVG CSS கொண்டு பாணியில் முடியும்.

SVG சின்னத்தின் நிறத்தை மாற்ற வேண்டுமா? சில வகையான எடிட்டிங் மென்பொருள் மற்றும் ஏற்றுமதிக்கு அந்த படத்தை திறக்க வேண்டும், அதற்கு பதிலாக கோப்பை மீண்டும் பதிவேற்றுவதற்கு பதிலாக, நீங்கள் CSS இன் சில வரிகளுடன் SVG கோப்பை மாற்றலாம்.

நீங்கள் மிதவை மாநிலங்களில் அல்லது சில வடிவமைப்பு தேவைகளை அவற்றை மாற்ற SVG கிராபிக்ஸ் மற்ற CSS பாணிகளை பயன்படுத்த முடியும். நீங்கள் ஒரு பக்கத்திற்கு சில இயக்கம் மற்றும் செயல்திறனை சேர்க்க அந்த கிராபிக்ஸ் உயிருள்ள முடியும்.

அனிமேஷன்கள்

இன்லைன் SVG கோப்புகளை CSS கொண்டு பாணியில் முடியும் என்பதால், நீங்கள் அவற்றை அத்துடன் CSS அனிமேஷன்கள் பயன்படுத்த முடியும். CSS மாற்றங்கள் மற்றும் மாற்றங்கள் SVG கோப்புகளை சில வாழ்க்கை சேர்க்க இரண்டு எளிய வழிகள் உள்ளன. இன்றைய வலைத்தளங்களில் ப்ளாஷ் பயன்படுத்தி வருகின்ற குறைபாடுகள் காரணமாக ஒரு பக்கத்தின் மீது பணக்கார ஃப்ளாஷ்-போன்ற அனுபவங்களைப் பெறலாம்.

SVG இன் பயன்கள்

SVG போன்ற சக்திவாய்ந்ததாக இருப்பதால், இந்த கிராபிக்ஸ் நீங்கள் உங்கள் வலைத்தளத்தில் பயன்படுத்தும் ஒவ்வொரு பட வடிவத்தையும் மாற்ற முடியாது. ஆழ்ந்த வண்ண ஆழம் தேவைப்படும் படங்கள் இன்னமும் JPG ஆக இருக்கலாம் அல்லது PNG கோப்பாக இருக்கலாம், ஆனால் சின்னங்கள் போன்ற எளிய படங்கள் SVG ஆக செயல்படுத்தப்படுவதற்கு மிகவும் பொருத்தமானது.

SVG நிறுவனத்தின் லோகோக்கள் அல்லது வரைபடங்கள் மற்றும் விளக்கப்படங்கள் போன்ற சிக்கலான விளக்கப்படங்களுக்கு பொருத்தமானது. கிராபிக்ஸ் அனைத்து CSS, மற்றும் இந்த கட்டுரையில் பட்டியலிடப்பட்ட மற்ற நன்மைகளை கொண்டு பாணியில் முடியும் திறன், இருந்து நன்மை அடைய.

பழைய உலாவிகளுக்கு ஆதரவு

SVG க்கான தற்போதைய ஆதரவு நவீன இணைய உலாவிகளில் மிகவும் நல்லது. இந்த கிராபிகளுக்கு உண்மையில் ஆதரவு இல்லாத ஒரே உலாவிகள் இன்டர்நெட் எக்ஸ்ப்ளோரர் பழைய பதிப்புகள் (பதிப்பு 8 மற்றும் கீழே) மற்றும் அண்ட்ராய்டு ஒரு சில பழைய பதிப்புகள். மொத்தத்தில், உலாவிகளில் உள்ள மிக சிறிய சதவீதமானது இன்னும் இந்த உலாவிகளில் பயன்படுத்துகிறது, அந்த எண்ணிக்கை சுருக்கமாக தொடர்கிறது. இந்த SVG இன்று வலைத்தளங்களில் அழகாக பாதுகாப்பாக பயன்படுத்த முடியும் என்று அர்த்தம்.

நீங்கள் SVG க்கு ஒரு குறைவடையாதலை வழங்க விரும்பினால், நீங்கள் ஃபிலிம்மென்ட் குழுவிலிருந்து Grumpicon போன்ற கருவியைப் பயன்படுத்தலாம். இந்த வளமானது உங்கள் SVG படக் கோப்புகளை எடுத்து பழைய உலாவிகளுக்கு PNG குறைவடையும்.

1/27/17 அன்று ஜெர்மி ஜாராரால் திருத்தப்பட்டது