एचटीएमएल ग्राफिक्स

ग्राफिक्स होम

गूगल मानचित्र

मानचित्र परिचय मैप्स बेसिक मैप्स ओवरले मानचित्र घटनाक्रम मानचित्र नियंत्रण मानचित्र प्रकार मानचित्र संदर्भ

एसवीजी ट्यूटोरियल

एसवीजी परिचय एचटीएमएल में एसवीजी एसवीजी आयत एसवीजी सर्किल एसवीजी एलिप्से एसवीजी लाइन एसवीजी बहुभुज एसवीजी पॉलीलाइन एसवीजी पथ एसवीजी पाठ एसवीजी पथपाकर एसवीजी फ़िल्टर परिचय एसवीजी धुंधला प्रभाव एसवीजी ड्रॉप शैडो एसवीजी रैखिक एसवीजी रेडियल एसवीजी उदाहरण एसवीजी संदर्भ

कैनवास ट्यूटोरियल

कैनवास परिचय कैनवास ड्राइंग कैनवास निर्देशांक कैनवास ग्रेडिएंट कैनवास पाठ कैनवास छवियां कैनवास संदर्भ

कैनवास घड़ी

घड़ी परिचय घडी का मुख घड़ी संख्या हाथ घड़ी घड़ी प्रारंभ

एचटीएमएल गेम

खेल परिचय खेल कैनवास खेल के घटक खेल नियंत्रक खेल बाधाएं गेम स्कोर खेल छवियां खेल ध्वनि गेम ग्रेविटी खेल उछल खेल रोटेशन खेल आंदोलन

एसवीजी <पथ>


एसवीजी पथ - <पथ>

पथ को परिभाषित करने के लिए <पथ> तत्व का उपयोग किया जाता है।

पथ डेटा के लिए निम्न आदेश उपलब्ध हैं:

  • एम = मूवटो
  • एल = लिनेटो
  • एच = क्षैतिज लाइनटो
  • वी = लंबवत लाइनटो
  • सी = वक्रतो
  • एस = चिकनी वक्रतो
  • क्यू = द्विघात बेज़ियर वक्र
  • टी = चिकनी द्विघात बेज़ियर वक्रतो
  • ए = अण्डाकार चाप
  • जेड = क्लोजपाथ

नोट: उपरोक्त सभी कमांड को निचले अक्षरों में भी व्यक्त किया जा सकता है। बड़े अक्षरों का अर्थ है पूरी तरह से स्थित, निचले मामलों का मतलब अपेक्षाकृत स्थित है।


उदाहरण 1

नीचे दिया गया उदाहरण एक पथ को परिभाषित करता है जो स्थिति 150,0 से शुरू होकर 75,200 की स्थिति के लिए एक पंक्ति के साथ शुरू होता है, फिर वहां से 225,200 तक एक रेखा और अंत में पथ को वापस 150,0 पर बंद कर देता है:

Sorry, your browser does not support inline SVG.

यहाँ एसवीजी कोड है:

उदाहरण

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>


उदाहरण 2

बेज़ियर कर्व्स का उपयोग चिकने कर्व्स को मॉडल करने के लिए किया जाता है जिन्हें अनिश्चित काल तक बढ़ाया जा सकता है। आम तौर पर, उपयोगकर्ता दो समापन बिंदुओं और एक या दो नियंत्रण बिंदुओं का चयन करता है। एक नियंत्रण बिंदु वाले बेज़ियर वक्र को द्विघात बेज़ियर वक्र कहा जाता है और दो नियंत्रण बिंदुओं वाले प्रकार को क्यूबिक कहा जाता है।

निम्न उदाहरण एक द्विघात बेज़ियर वक्र बनाता है, जहाँ A और C प्रारंभ और अंत बिंदु हैं, B नियंत्रण बिंदु है:

A B C Sorry, your browser does not support inline SVG.

यहाँ एसवीजी कोड है:

उदाहरण

<svg height="400" width="450">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
  stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
  stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
  fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue"
  stroke-width="5" fill="none" />
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- Label the points -->
  <g font-size="30" font-family="sans-serif" fill="black" stroke="none"
  text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>

जटिल? हां!!!! पथों को खींचने में शामिल जटिलता के कारण जटिल ग्राफिक्स बनाने के लिए एसवीजी संपादक का उपयोग करने की अत्यधिक अनुशंसा की जाती है।