హెచ్టిఎంఎల్ లో ఎస్విజి

మీరు SVG ఎలిమెంట్ను నేరుగా HTML పేజీలో సమీకృతం చేయవచ్చు

SVG ను HTML పేజీలో సమీకృతం చేయండి

ఒక సాధారణ SVG చిత్రం ఉదాహరణ:

క్షమించండి, మీ బ్రౌజర్ ఇన్లైన్ SVG ను మద్దతు చేయలేదు.

ఇది HTML కోడ్ ఉంది:

<!DOCTYPE html>
<html>
<body>
<h1>నా మొదటి SVG</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

స్వయంగా ప్రయత్నించండి

SVG కోడ్ వివరణలు:

  • SVG చిత్రం <svg> ఎలిమెంట్ తో ప్రారంభబడుతుంది
  • <svg> ఎలిమెంట్ యొక్క width మరియు height అట్రిబ్యూట్లు SVG చిత్రం యొక్క వెడల్పు మరియు పొడవును నిర్వచిస్తాయి
  • <circle> ఎలిమెంట్ చక్రపిండాన్ని చిత్రీకరించడానికి ఉపయోగిస్తారు
  • cx మరియు cy అట్రిబ్యూట్లు చక్రపిండానికి కేంద్రం యొక్క x మరియు y కోఆర్డినేట్లను నిర్వచిస్తాయి. cx మరియు cy సెట్ చేయకపోతే, చక్రపిండానికి కేంద్రం (0, 0) గా అమర్చబడుతుంది
  • r అట్రిబ్యూట్ చక్రపిండానికి వెడల్పును నిర్వచిస్తుంది
  • స్ట్రోక్ మరియు స్ట్రోక్-విద్దియు అట్రిబ్యూట్లు ప్రమాణంగా ప్రక్రియను నియంత్రిస్తాయి. మేము చక్రపిండాన్ని 4 పిక్సెల్స్ పసుపు కంటర్లుగా అమర్చాము
  • ఫిల్ అట్రిబ్యూట్ వాల్యూస్ స్పర్ పైన రంగును అమర్చు. మేము రంగును పసుపు రంగునకు అమర్చాము
  • 标签关闭 SVG 图像

注意：由于 SVG 是用 XML 写的，因此所有元素都必须正确关闭！