உங்கள் வலைப்பக்கத்தில் SVG கிராபிக்ஸ் வைத்து எப்படி

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

SVG ஐ உட்பொதிக்க பொருள் குறிச்சொல்லைப் பயன்படுத்துக

HTML குறிச்சொல் உங்கள் வலைப்பக்கத்தில் ஒரு SVG கிராஃபிக் உட்பொதிக்கப்படும். நீங்கள் திறக்க விரும்பும் SVG கோப்பை வரையறுக்க ஒரு தரவு பண்புக்கூறுடன் பொருள் குறிச்சொல்லை எழுதவும். உங்கள் SVG படத்தின் அகலம் மற்றும் உயரம் (பிக்சல்களில்) வரையறுக்க அகலம் மற்றும் உயரம் பண்புகளை நீங்கள் சேர்க்க வேண்டும்.

குறுக்கு உலாவி இணக்கத்தன்மைக்கு, நீங்கள் கண்டிப்பாக வகை பண்புக்கூறலை சேர்க்க வேண்டும், இது படிக்க வேண்டும்:

வகை = "படத்தை / எஸ்விஜி + எக்ஸ்எம்எல்"

மற்றும் உலாவிக்கு ஒரு குறியீடை (Internet Explorer 8 மற்றும் குறைவான). SVG க்கு ஆதரவு இல்லாத உலாவிகளுக்கான SVG செருகுநிரலை உங்கள் குறியீட்டை சுட்டிக்காட்டுகிறது. மிகவும் பொதுவாக பயன்படுத்தப்படும் சொருகி அடோப் இருந்து http://www.adobe.com/svg/viewer/install/ இல். எனினும், இந்த கூடுதல் இணைப்பு இனி அடோப் ஆதரிக்கப்படவில்லை. மற்றொரு விருப்பம் Ssrc SVG சொருகி Savarese மென்பொருள் ஆராய்ச்சி இருந்து http://www.savarese.com/software/svgplugin/.

உங்கள் பொருள் இதுபோல் இருக்கும்:

SVG க்கான பொருளைப் பயன்படுத்துவதற்கான உதவிக்குறிப்புகள்

  • அகலம் மற்றும் உயரம் நீங்கள் உட்பொதித்த படமாக குறைந்தபட்சம் பெரியதாக இருப்பதை உறுதிசெய்யவும். இல்லையெனில், உங்கள் படத்தை க்ளிக் செய்திருக்கலாம்.
  • நீங்கள் சரியான உள்ளடக்க வகை (வகை = "படம் / svg + xml") அடையாவிட்டால், உங்கள் SVG சரியாக காட்டப்படாமல் இருக்கலாம், எனவே அதை விட்டு வெளியேற பரிந்துரைக்கிறேன்.
  • நீங்கள் 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 உடன் SVG ஐ உட்பொதிக்கவும்

SVG உள்ளிட்ட மற்றொரு விருப்பம் குறிப்பை பயன்படுத்த வேண்டும். அகலம் <, உயரம், வகை, மற்றும் குறியீட்டெண் உட்பட, பொருள் குறிச்சொல் போன்ற கிட்டத்தட்ட பண்புகளை நீங்கள் பயன்படுத்துகிறீர்கள். ஒரே ஒரு வித்தியாசம் என்னவென்றால் தரவுகளுக்கு பதிலாக, உங்கள் SVG ஆவணம் URL ஐ src பண்புக்கூறுக்குள் வைக்கிறீர்கள்.

உங்கள் உட்பொதி இதைப் போல இருக்கும்:

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>

SVG க்கான உட்பொதிப்பைப் பயன்படுத்துவதற்கான உதவிக்குறிப்புகள்

  • உட்பொதி குறிச்சொல் செல்லுபடியான HTML4 அல்ல, ஆனால் அது சரியான HTML5 ஆகும், எனவே நீங்கள் அதை ஒரு HTML4 பக்கத்தில் பயன்படுத்தினால், உங்கள் பக்கம் சரிபார்க்க முடியாது என்பதை நினைவில் கொள்ள வேண்டும்.
  • சிறந்த இணக்கத்தன்மைக்கு src பண்புக்கூறில் முழுமையாக quoalified டொமைன் பெயரைப் பயன்படுத்தவும்.
  • அடோப் சொருகி கொண்டு உட்பொதி குறிச்சொல்லைப் பயன்படுத்தி மோசில்லா பதிப்புகள் 1.0 முதல் 1.4 வரை செயலிழக்கும் என சில அறிக்கைகள் தெரிவிக்கின்றன.

உட்பொதி குறிச்சொல் எடுத்துக்காட்டாக ஒரு SVG காண்க.

SVG ஐ சேர்க்க ஒரு iframe ஐ பயன்படுத்தவும்

ஃபிரேம்களை உங்கள் வலை பக்கங்களில் ஒரு SVG படத்தை சேர்க்க மற்றொரு எளிய வழி. இது மூன்று பண்புகளை மட்டுமே தேவைப்படுகிறது: வழக்கம் போல் அகலம் மற்றும் உயரம், மற்றும் SRG உங்கள் SVG கோப்பின் இருப்பிடத்தை சுட்டிக்காட்டுகிறது.

உங்கள் iframe இதைப் போல இருக்கும்: