ඔබේ වෙබ් පිටුවෙහි SVG ග්රැෆික්ස් පිටපත් කර ගන්නේ කෙසේද?

SVG හෝ Scalable Vector Graphics ඔබට වඩා සංකීර්ණ රූප සාදාගෙන ඒවා වෙබ් පිටු තුලට පරිවර්තනය කර ඇත. නමුත් ඔබට සරලවම SVG ටැග් සටහන් ගෙන ඒවා ඔබේ HTML බවට පත්කරන්න. ඔවුන් පෙන්වනු නොලැබේ, ඔබේ පිටුව අවලංගු වේ. ඒ වෙනුවට, ඔබට ක්රම තුනක් භාවිතා කළ යුතුය.

SVG ආයාත කිරීම සඳහා Object Tag භාවිතා කරන්න

HTML ටැගය ඔබේ වෙබ් පිටුවෙහි SVG ග්රැෆික්ස් ඇතුළත් කර ඇත. ඔබ විසින් වස්තුවේ ටැගය වින්යාස කිරීමට අවශ්ය වන SVG ගොනුව අර්ථ දැක්වීමට දත්ත ගුණාංගයක් ලිවිය යුතුය. ඔබේ SVG රූපය (පික්සල්වල) පළල සහ උෂ්ණත්වය අර්ථදැක්වීම සඳහා පළල සහ උස ගුණාංගයන් ද ඇතුළත් කළ යුතුය.

හරස් බ්රවුසර් අනුකූලතාව සඳහා, ඔබ විසින් වර්ගය ආවේගය ඇතුළත් කළ යුතුය:

type = "image / svg + xml"

සහ එය සහාය නොදක්වන බ්රවුසර සඳහා codebase (Internet Explorer 8 සහ පහල). SVWeb වලට සහය නොදක්වන බ්රවුසර සඳහා ඔබේ SVB ප්ලගිනය වෙත යොමු කරනු ඇත. වඩාත් බහුලව භාවිතා කරන ප්ලගිනය වන්නේ Adobe හි http://www.adobe.com/svg/viewer/install/. කෙසේ වෙතත්, මෙම ප්ලගිනය ඇඩොබ් විසින් තවදුරටත් සහාය නොදක්වයි. තවත් විකල්පයක් වන්නේ Savarese Software Research වෙතින් සර්වර් SVG ප්ලගින. Http://www.savarese.com/software/svgplugin/.

ඔබගේ වස්තුව මෙම ආකාරයෙන් පෙනෙනු ඇත:

SVG සඳහා වස්තූන් භාවිතා කිරීම සඳහා ඉඟි

  • ඔබ රූපය ආලේප කිරීම මෙන් පළල සහ උස උසින් අඩු තරමේ විශාල වේ. එසේ නොමැතිනම්, ඔබේ රූපය කපා ගත හැකිය.
  • ඔබ නිවැරදිව අන්තර්ගතය වර්ගය ඇතුළත් නොකළහොත් ඔබේ SVG නිවැරදිව ප්රදර්ශනය නොකරනු ඇත (මාදිලිය = "image / svg + xml"), එබැවින් මම එය පිටවීම නිර්දේශ නොකරමි.
  • SVG ගොනු ප්රදර්ශනය නොකරන බ්රව්සර් සඳහා වස්තු බැරලයක අඩංගු විකල්ප තොරතුරු ඇතුලත් කළ හැක.
  • ඔබේ SVG හි මූලාශ්රය හා අන්තර්ගතය වර්ගය පරාමිතීන් තුළද සැකසිය හැකිය. මෙය IE 6 සහ 7 හි වඩා හොඳ විය හැකිය:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

මෙය කාර්යය කිරීමට වර්ගීකරණය අවශ්ය බව සැලකිල්ලට ගන්න.

වස්තුවක ටැගය උදාහරණයක් ලෙස SVG බලන්න.

Embed Tag සමඟ Embed SVG උඩුගත කරන්න

SVG ඇතුලත් කිරීම සඳහා ඔබ සතුව ඇති තවත් විකල්පයක් වන්නේ ටැගය භාවිතා කිරීමයි. වස්තුව <, උස, ටයිප්, සහ codebase> ඇතුළුව වස්තු සලකුණ ලෙස ඔබ භාවිතා කරන ගුණාංග පමණි. එකම වෙනස වන්නේ දත්ත වෙනුවට, ඔබේ SVG ලේඛන URL වන src ගුණාංගයේ ය.

ඔබගේ ආයාතයන් මෙලෙස දිස්වනු ඇත:

width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>

SVG සඳහා ආයාචනය කිරීම සඳහා ඉඟි

  • සංකේතාත්මක ටැගය වලංගු HTML4 නොවේ, නමුත් එය HTML5 වලංගු වේ, ඔබ එය HTML4 පිටුවක භාවිතා කරන්නේ නම්, ඔබේ පිටුව වලංගු නොවන බව මතක තබා ගන්න.
  • හොඳම ගැළපීම සඳහා src query හි පූර්ණ කුටියකින් යුත් ඩොමේන් නාමය භාවිතා කරන්න.
  • Adobe ප්ලගිනය සමඟ ඇති ටැබ් එක භාවිතා කිරීම මගින් මොසිල්ලා අනුවාද 1.0 සිට 1.4 දක්වා කඩා වැටෙනු ඇත.

සංකේතාත්මක ටැගය උදාහරණයක් ලෙස SVG බලන්න.

SVG ඇතුලත් කිරීම සඳහා අවශ්ය නම්

ඔබගේ වෙබ් පිටු වල SVG පිළිබිඹුවක් ඇතුළත් කිරීමට තවත් සරල ක්රමයක් තිබේ. එය උපලක්ෂණ තුනක් පමණි: පළල මෙන් පළල සහ උස, සහ ඔබේ SVG ගොනුවේ පිහිටීම දක්වන්න.

ඔබේ ඉරුමය මෙවැන්නක් පෙනේ: