మీ వెబ్పేజీలో SVG గ్రాఫిక్స్ ఉంచడం ఎలా

SVG లేదా స్కేలబుల్ వెక్టార్ గ్రాఫిక్స్ మీరు మరింత సంక్లిష్ట చిత్రాలను గీయండి మరియు వాటిని వెబ్ పేజీలలో అన్వయించనివ్వండి. కానీ మీరు కేవలం SVG ట్యాగ్లను తీసుకోలేరు మరియు మీ HTML లోకి వాటిని చరుస్తారు. అవి చూపబడవు మరియు మీ పేజీ చెల్లదు. బదులుగా, మీరు మూడు పద్ధతుల్లో ఒకటి ఉపయోగించాలి.

SVG ను పొందుపరచడానికి ఆబ్జెక్ట్ ట్యాగ్ను ఉపయోగించండి

HTML ట్యాగ్ మీ వెబ్ పేజీలో SVG గ్రాఫిక్ను పొందుపర్చబడుతుంది. మీరు తెరుచుకోవాల్సిన SVG ఫైల్ను నిర్వచించడానికి ఒక డేటా లక్షణంతో వస్తువు ట్యాగ్ను వ్రాయండి. మీ SVG ఇమేజ్ యొక్క వెడల్పు మరియు ఎత్తు (పిక్సెల్స్) లో నిర్వచించటానికి మీరు వెడల్పు మరియు ఎత్తు గుణాలను కలిగి ఉండాలి.

క్రాస్-బ్రౌజర్ అనుకూలత కోసం, మీరు తప్పక టైప్ చేసే లక్షణాన్ని కలిగి ఉండాలి:

రకం = "చిత్రం / svg + xml"

(ఇంటర్నెట్ ఎక్స్ప్లోరర్ 8 మరియు తక్కువ) మద్దతు లేని బ్రౌజర్లకు కోడ్బేస్. మీ కోడ్బేస్ SVG కి మద్దతివ్వని బ్రౌజర్ల కోసం SVG ప్లగిన్కు సూచించబడుతుంది. సాధారణంగా ఉపయోగించే ప్లగ్ఇన్ అడోబ్ నుండి http://www.adobe.com/svg/viewer/install/ వద్ద ఉంది. అయినప్పటికీ, ఈ ప్లగ్-ఇన్ ఇక Adobe ద్వారా మద్దతు ఇవ్వదు. మరొక ఎంపికను SavaSc సాఫ్ట్వేర్ పరిశోధనలో Ssrc SVG ప్లగ్ఇన్ http://www.savarese.com/software/svgplugin/.

మీ వస్తువు ఇలా ఉంటుంది:

SVG కోసం వస్తువుని ఉపయోగించడం కోసం చిట్కాలు

  • వెడల్పు మరియు ఎత్తు మీరు చొప్పించే చిత్రం వంటి కనీసం పెద్ద అని నిర్ధారించుకోండి. లేకపోతే, మీ చిత్రం కత్తిరించబడవచ్చు.
  • మీరు సరైన కంటెంట్ రకం (రకం = "ఇమేజ్ / svg + xml") చేర్చకపోతే మీ SVG సరిగ్గా కనిపించకపోవచ్చు, కనుక నేను దాన్ని వదిలి వెళ్ళమని సిఫార్సు చేయను.
  • SVG ఫైళ్ళను ప్రదర్శించలేని బ్రౌజర్ల కోసం ఆబ్జెక్ట్ ట్యాగ్ లోపల మీరు తిరిగి సమాచారాన్ని చేర్చవచ్చు.
  • మీరు మీ SVG మూలం మరియు పారామితులలో కంటెంట్ రకాన్ని కూడా సెట్ చేయవచ్చు. ఇది IE 6 మరియు 7 లలో బాగా పని చేస్తాయి:
క్లాస్సిడ్ = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" వెడల్పు = "110" ఎత్తు = "60" కోడ్బేస్ = "http://www.savarese.com/software/svgplugin/">

ఇది పని చేయడానికి ఒక క్లాస్సిడ్ అవసరం అని గమనించండి.

ఒక వస్తువు ట్యాగ్ ఉదాహరణలో ఒక SVG ను వీక్షించండి.

పొందుపరచు ట్యాగ్తో 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 చిత్రం చేర్చడానికి మరొక సులభమైన మార్గం. ఇది మూడు లక్షణాలను మాత్రమే కలిగి ఉంటుంది: సాధారణంగా వెడల్పు మరియు ఎత్తు, మరియు src మీ SVG ఫైల్ యొక్క స్థానానికి గురిపెట్టి.

మీ iframe ఇలా కనిపిస్తుంది: