നിങ്ങളുടെ വെബ്പേജിൽ SVG ഗ്രാഫിക്സ് എങ്ങനെ സ്ഥാപിച്ചു

SVG അല്ലെങ്കിൽ സ്കേലബിൾ വെക്റ്റർ ഗ്രാഫിക്സ് നിങ്ങൾ കൂടുതൽ സങ്കീർണ്ണ ഇമേജുകൾ വരയ്ക്കുകയും അവയെ വെബ് പേജുകളിൽ റെൻഡർ ചെയ്യുകയും ചെയ്യാം. എന്നാൽ നിങ്ങൾക്കത് എസ്.വി.ജി. ടാഗുകൾ എടുത്ത് നിങ്ങളുടെ HTML- ൽ അവയെ തട്ടുകയോ ചെയ്യാവൂ. അവ കാണിക്കില്ല, നിങ്ങളുടെ പേജ് അസാധുവാകും. പകരം, നിങ്ങൾ മൂന്നു രീതികളിൽ ഒന്നുപയോഗിക്കണം.

SVG ഉൾപ്പെടുത്താൻ ഒബ്ജക്റ്റ് ടാഗ് ഉപയോഗിക്കുക

HTML ടാഗ് നിങ്ങളുടെ വെബ് പേജിൽ ഒരു SVG ഗ്രാഫിക് ഉൾപ്പെടുത്തും. നിങ്ങൾ തുറക്കാൻ ആഗ്രഹിക്കുന്ന SVG ഫയൽ നിർവ്വചിക്കാൻ ഒരു ഡാറ്റ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് ഒബ്ജക്റ്റ് ടാഗ് എഴുതുക. നിങ്ങളുടെ SVG ചിത്രം (പിക്സലിൽ) വീതിയും ഉയരവും നിർവചിക്കാൻ വീതിയും ഉയരവും ചേർക്കേണ്ടതാണ്.

ക്രോസ്-ബ്രൗസർ അനുയോജ്യതയ്ക്കായി, നിങ്ങൾ ടൈപ്പുചെയ്യേണ്ട തരം ആട്രിബ്യൂട്ട് ഉൾപ്പെടുത്തണം:

type = "image / svg + xml"

അതു പിന്തുണയ്ക്കാത്ത ബ്രൌസറുകൾക്ക് കോഡ്ബേസ് (ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 8 ഉം അതിൽ കുറവുമാണ്). നിങ്ങളുടെ കോഡ്ബേസ് എസ്.വി.ജി സപ്പോർട്ട് ചെയ്യുന്ന ബ്രൗസറിനായുള്ള ഒരു എസ്.വി.ജി. ഏറ്റവും സാധാരണയായി ഉപയോഗിക്കപ്പെടുന്ന സംയോജകം Adobe- ൽ നിന്നാണ് http://www.adobe.com/svg/viewer/install/. എന്നിരുന്നാലും, ഈ പ്ലഗിൻ ഇനിമുതൽ Adobe പിന്തുണയ്ക്കുന്നില്ല. മറ്റൊരു ഓപ്ഷൻ എന്നത് Savarese Software റിസർച്ചിൽ നിന്ന് http://www.savarese.com/software/svgplugin/ ൽ നിന്നും Ssrc SVG പ്ലഗിൻ ആണ്.

നിങ്ങളുടെ വസ്തു ഇതെങ്ങിനെ ആയിരിക്കും:

SVG- യ്ക്കായുള്ള ഒബ്ജക്ട് ഉപയോഗിക്കുന്നതിനുള്ള നുറുങ്ങുകൾ

  • നിങ്ങൾ ഉൾച്ചേർത്ത ഇമേജിന്റെ വീതിയും ഉയരവും വലുതാണെന്ന് ഉറപ്പാക്കുക. അല്ലെങ്കിൽ, നിങ്ങളുടെ ചിത്രം ക്ലിപ്പുചെയ്തു.
  • നിങ്ങൾ ശരിയായ ഉള്ളടക്ക തരം (type = "image / svg + xml") ഉൾപ്പെടുത്തിയില്ലെങ്കിൽ നിങ്ങളുടെ എസ്.വി.ജി ശരിയായി പ്രദർശിപ്പിക്കില്ല. അതിനാൽ ഞാൻ അത് ഒഴിവാക്കാൻ ശുപാർശ ചെയ്യുന്നില്ല.
  • നിങ്ങൾക്ക് SVG ഫയലുകൾ പ്രദർശിപ്പിക്കാത്ത ബ്രൗസറുകൾക്കുള്ള ഒബ്ജക്റ്റ് ടാഗിൽ ഫോൾബാക്ക് വിവരങ്ങൾ ഉൾപ്പെടുത്താം.
  • നിങ്ങൾക്ക് നിങ്ങളുടെ എസ്.വി.ജി.യുടെ ഉറവിടവും ഉള്ളടക്കപാരമ്പര്യത്തിലെ ഉള്ളടക്ക തരവും സജ്ജമാക്കാം. IE 6, 7 എന്നിവയിൽ ഇത് മികച്ച രീതിയിൽ പ്രവർത്തിക്കാം:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" വീതി = "110" ഉയരം = "60" കോഡ്ബേസ് = "http://www.savarese.com/software/svgplugin/">

ഇത് പ്രവർത്തിപ്പിക്കാൻ ക്ലാസ്സിഡ് ആവശ്യമാണെന്ന് ശ്രദ്ധിക്കുക.

ഒരു വസ്തു ടാഗ് ഉദാഹരണത്തിൽ ഒരു SVG കാണുക.

ഉൾച്ചേർത്ത ടാഗ് ഉപയോഗിച്ച് SVG ഉൾച്ചേർക്കുക

SVG ഉൾപ്പെടുത്തുന്നതിന് നിങ്ങൾക്കുള്ള മറ്റൊരു ഓപ്ഷൻ ടാഗ് ആണ്. നിങ്ങൾ വീതി ഉൾപ്പെടെയുള്ള ഒബ്ജക്റ്റ് ടാഗായിട്ടുള്ള അതേ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുന്നു. ഒരേയൊരു വ്യത്യാസം മാത്രമാണ് ഡാറ്റയ്ക്ക് പകരം, നിങ്ങളുടെ എസ്.വി.ജി.

നിങ്ങളുടെ ഉൾച്ചേർത്തം ഇതുപോലെ ആയിരിയ്ക്കും:

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 ആട്രിബ്യൂട്ടിയിൽ പൂർണ്ണമായ ഒരു ക്വയറിഫൈഡ് ഡൊമെയ്ൻ നാമം ഉപയോഗിക്കുക.
  • അഡോബ് പ്ലഗിൻ ഉപയോഗിച്ചുള്ള ഉൾച്ചേർത്ത ടാഗ് ഉപയോഗിക്കുന്ന മോസില്ല പതിപ്പുകൾ 1.0 മുതൽ 1.4 വരെയാകുമെന്ന ചില റിപ്പോർട്ടുകളും ഉണ്ട്.

എംബഡ് ടാഗ് ഉദാഹരണത്തിൽ ഒരു SVG കാണുക.

SVG ഉൾപ്പെടുത്തുന്നതിന് ഒരു iframe ഉപയോഗിക്കുക

നിങ്ങളുടെ വെബ് പേജുകളിൽ ഒരു എസ്.വി.ജി ചിത്രം ഉൾപ്പെടുത്തുന്നതിന് അനായാസമായ മറ്റൊരു മാർഗമാണ് ഐഫ്രെയിമുകൾ . ഇത് മൂന്ന് ആട്രിബ്യൂട്ടുകൾ ആവശ്യമാണ്: സാധാരണ പോലെ വീതിയും ഉയരവും, ഒപ്പം നിങ്ങളുടെ എസ്.വി.ജി. ഫയലിന്റെ സ്ഥാനം ചൂണ്ടിക്കാട്ടുന്ന src.

നിങ്ങളുടെ iframe ഇതുപോലെ ആയിരിക്കും: