Scalable වීඩිෙයෝ ග්රාහකයන් භාවිතා කළ හැකිය
Scalable Vector Graphics, හෝ SVG, වෙබ් අඩවි නිර්මාණයේදී වැදගත් කාර්යභාරයක් ඉටු කරයි. ඔබ ඔබේ වෙබ් නිර්මාණකරණ වැඩයෙහි වර්තමානයේ SVG භාවිතා නොකරන්නේ නම්, ඔබ මෙය ආරම්භ කළ යුත්තේ ඇයිද යන්නත්, මෙම ගොනු සඳහා සහය නොදක්වන පැරණි වෙබ් බ්රව්සර සඳහාත් භාවිතා කළ හැක.
යෝජනාව
SVG හි ඇති විශාලතම වාසිය නම් විසඳීමේ නිදහසයි. SVG ගොනුව ව්යාකෘති ග්රැෆික්ස් වෙනුවට පික්සල් පදනම්ව ඇති ආකෘති එක්ස්ප්ලේෂන් අහිමි නොවී වෙනස් කළ හැකිය. ඔබ ඉතා හොඳ පෙනුමක් ලබා ගත යුතු සහ ප්රතිචාර දක්වන වෙබ් අඩවි නිර්මාණය කිරීමේදී විශේෂයෙන් ප්රයෝජනවත් වේ .
SVG ගොනු ඔබේ ප්රතිචාරාත්මක වෙබ් අඩවියේ වෙනස්වන ප්රමාණය හා පිරිසැලසුම් අවශ්යතා සැසඳීම සඳහා ඉහළ දැමීමට හෝ පහල දැමිය හැකි අතර එමඟින් ගුරුත්වාකර්ෂණ ගුණාත්මක භාවය ඇති ඕනෑම ආකාරයක කරදරයකින් තොරව කරදර විය යුතු නැත.
ගොනු ප්රමාණය
ප්රතිචාරාත්මක වෙබ් අඩවිවල වර්ණ රූප (JPG, PNG, GIF) භාවිතා කිරීමේ අභියෝගය වන්නේ එම රූපයේ ගොනු විශාලත්වයයි. වර්ථමානයේ රූපරාමු වල වර්ණ නොගැලපෙන බැවින්, ඔබේ පික්සල්-පාදක පින්තූර ඔවුන් ප්රදර්ශනය කෙරෙන විශාලතම ප්රමාණයෙන් ලබා ගත යුතුය. මේ නිසා ඔබට සෑම විටම පින්තූරයක් කුඩා කර එහි ගුණාත්මකභාවය රඳවා තබා ගත හැකිය, නමුත් පින්තූර විශාල කිරීම සඳහා එයම නොවේ. අවසාන ප්රතිඵලය වන්නේ පුද්ගලයෙකුගේ තිරය මත පෙන්වීමට වඩා බොහෝ දුරට රූප ඇති බවය. එයින් අදහස් කරන්නේ ඒවා ඉතා විශාල ගොනුව බාගත කිරීමට අනවශ්ය ලෙස බල කරන බවයි.
SVG මෙම අභියෝගයට ප්රතිචාර දක්වයි. දෛශික ග්රැෆික්ස් පරිමාණය කළ හැකි බැවින්, ඔබට කුඩා පින්තූර ප්රමාණය පෙන්විය යුතු වුවත් ඉතා කුඩා ප්රමාණයේ ගොනු ප්රමාණ තිබිය හැක. මෙය අවසානයේ වෙබ් අඩවියේ සමස්ත කාර්යසාධනය හා බාගැනීමේ වේගය කෙරෙහි ධනාත්මක බලපෑමක් ඇති කරයි.
CSS හැඩය
SVG කේතය පිටුවක HTML සඳහා කෙලින්ම එකතු කළ හැකිය. මෙය "Inline SVG" ලෙස හැඳින්වේ. ආර්ගික SVG භාවිතා කිරීමෙහි ප්රතිලාභයක් වන්නේ, ඔබේ කේතය මත පදනම් වූ ග්රැෆික්ස් ඇත්ත වශයෙන්ම බ්රවුසරය මඟින් ඇද ගන්නා නිසාය, ගොනුවේ ගොනුවක් ලබා ගැනීමට HTTP ඉල්ලීමක් සිදු කිරීමට අවශ්ය නොවේ. තවත් වාසි වන්නේ CSS සමඟ ආකෘතියේ SVG නිර්මාණය කළ හැකිය.
SVG අයිකනයේ වර්ණය වෙනස් කිරීමට අවශ්යද? යම් ආකාරයක සංස්කරණ මෘදුකාංගයක් භාවිතා කරමින් එම රූපය විවෘත කිරීමට සහ අපනයනය කර නැවත ගොනුව උඩුගත කිරීමට අවශ්ය නොවුවහොත්, සරල ලෙස CSG රේඛා කිහිපයක් ඔස්සේ SVG ගොනුව වෙනස් කළ හැකිය.
SVG චිත්රක මත වෙනත් CSS ශෛලයන්ද භාවිතා කළ හැකිය, ඒවාට ස්ථානගත කිරීමට හෝ යම් මෝස්තර අවශ්යතා සඳහා ඒවා වෙනස් කිරීම සඳහාද භාවිතා කළ හැකිය. කිසියම් ව්යාපාරයක් සහ අන්තර්ක්රියාකාරිත්වයක් එක් පිටුවක් සඳහා එම ග්රැෆික්ස් සජීවීකරණය කිරීමට ඔබට හැක.
සජීවීකරණය
CSS ගොනුවේ ආකෘතියට CSL ආකාරයෙන් පේනු ඇති බැවින් CSS සජිවීකරණ භාවිතා කළ හැකිය. CSS පරිවර්තනයන් සහ සංක්රමණය SVG ගොනු වලට කිසියම් ජීවයක් එක් කිරීමට පහසු ක්රම දෙකක් වේ. අද වෙබ් අඩවිවල ෆ්ලෑෂ් උපයෝගී කර ගනිමින් අඩපණ වීමෙන් තොරව පිටුවක පොහොසතා වගේ අත්දැකීම් ඔබට ලබා ගත හැකිය.
SVG භාවිතය
SVG ලෙස බලවත් වන පරිදි, ඔබගේ ග්රන්ථයේ ඔබ භාවිතා කරන වෙනත් රූප ආකෘතිය ප්රතිස්ථාපනය කිරීමට මෙම ග්රැෆික්ස් ඔබට නොහැකිය. ගැඹුරු වර්ණ ගැඹුරක් අවශ්ය වන ඡායාරූප සඳහා JPG හෝ සමහරවිට PNG ගොනුව විය යුතුය, නමුත් සරල පින්තූර වැනි සරල රූපයන් SVG ලෙස ක්රියාත්මක කිරීමට සුදුසුයි.
SVG භාවිතා කළ හැකිය, වඩා සංකීර්ණ නිදර්ශන සඳහා, සමාගම් ලාංඡන හෝ ප්රස්ථාර සහ ප්රස්ථාර සඳහා සුදුසු වේ. මෙම ග්රැෆික්ස්හි සියලු ග්රැෆික්ස් පරිමාණයන්ගෙන් පරිමාණයෙන් ප්රයෝජන ගත හැකි අතර, CSS සමඟ විලාසිතාවක් කිරීමට සහ මෙම ලිපියෙහි ලැයිස්තුගත අනෙකුත් වාසි.
පැරණි බ්රව්සර සඳහා සහය වීම
නවීන වෙබ් බ්රව්සර වල SVG සඳහා වර්තමාන සහාය ඉතා හොඳය. මෙම ග්රැෆික්ස් සඳහා ඇත්තෙන්ම නොලැබෙන එකම වෙබ් බ්රව්සරය වන්නේ Internet Explorer (Version 8 සහ ඊට පහළින්) සහ පැරණි සංස්කරණ කිහිපයක පැරණි අනුවාදයන් වේ. සමස්තයක් ලෙස, බ්රවුසින් ජනගහනයේ ඉතා සුළු ප්රතිශතයක් තවමත් මෙම බ්රව්සරයන් භාවිතා කරයි, එම සංඛ්යාව තව දුරටත් හැකිලී ඇත. මෙයින් අදහස් කරන්නේ SVG වෙබ් අඩවිවල ඉතා ආරක්ෂිතව භාවිතා කළ හැකි බවයි.
SVG සඳහා ඔබට ආපසු හැරවීමක් අවශ්ය නම්, ඔබට ෆිලන්තන් සමූහයෙන් ග්රුම්පික් වැනි මෙවලමක් භාවිතා කළ හැකිය. මෙම සම්පත ඔබේ SVG රූප ගොනුද රැගෙන පැරණි බ්රවුසර සඳහා PNG fallbacks නිර්මාණය කරයි.
ජේම්මි ජිරාඩ් විසින් 1/27/17 දින සංස්කරණය කරන ලදී