MarkDown में एक SVG (GitHub पर होस्ट किया गया) शामिल करें

Question

मुझे पता है कि एक छवि को एमडी के सिंटैक्स के साथ एमडी में रखा जा सकता है ![Alt text](/path/to/img.jpg)या ![Alt text](/path/to/img.jpg "Optional title"), लेकिन मुझे एमडी में एक एसवीजी रखने में कठिनाई हो रही है, जहां कोड गीथहब पर होस्ट किया गया है।

अंत में rails3 का उपयोग कर, और मॉडल बदल रहा है अक्सर अभी, इसलिए मैं उपयोग कर रहा हूँ RailRoady मॉडल की स्कीमा चित्र का एक एसवीजी उत्पन्न करने के लिए। मैं चाहूंगा कि एसवीजी को फिर रीडमीएमडी में रखा जाए, और प्रदर्शित किया जाए। जब मैं स्थानीय स्तर पर एसवीजी फ़ाइल खोलता हूं, तो यह काम करता है, इसलिए मुझे एमडीजी फ़ाइल में एसवीजी को प्रस्तुत करने के लिए ब्राउज़र कैसे मिलेगा? यह देखते हुए कि कोड तब तक गतिशील रहेगा जब तक कि इसे अंतिम रूप नहीं दिया जाता है (कभी नहीं लगता है), एसवीजी को एक अलग स्थान पर होस्ट करना अधिक मुश्किल लगता है और यह पूरा करने के लिए मुझे एक दृष्टिकोण याद आ रहा है।

एसवीजी मैं शामिल करने के लिए कोशिश कर रहा हूँ है यहाँ GitHub पर:https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg

मैंने निम्नलिखित की कोशिश की है, एक वास्तविक छवि के साथ-साथ सिंटैक्स को सत्यापित करने के लिए काम कर रहा है, बस एसवीजी कोड प्रदान नहीं किया जा रहा है:

![Overview][1]
[1]: https://github.com/specialorange/FDXCM/blob/master/doc/controllers_brief.svg  "Overview"

<img src="https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg">

![Alt text](https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg)

[Google Doc](https://docs.google.com/drawings/d/1B95ajItJTAImL2WXISX0fkBLYk3nldea4Vm9eo-VyE4/edit) :

<img src="https://docs.google.com/drawings/pub?id=117XsJ1kDyaY-n8AdPS3_8jTgMyITqaoT3-ah_BSc9YQ&w=960&h=720">

<img src="https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg">

<img src="https://docs.google.com/drawings/d/1B95ajItJTAImL2WXISX0fkBLYk3nldea4Vm9eo-VyE4/edit">

के परिणाम प्राप्त करने के लिए:

1 : https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/controllers_brief.svg "अवलोकन"

---

Google डॉक्टर :

Comments

GitHub की अब एक प्रासंगिक खुली बग रिपोर्ट है: github.com/github/markup/issues/556

— sampablokuper

लोगों क्लिक बचाने के लिए, GitHub पर बग रिपोर्ट अक्टूबर 13, 2015 को खोला गया था

— Potherca

Answer 1

इसका उद्देश्य raw.github.comउपयोगकर्ताओं को किसी फ़ाइल की सामग्री को देखने की अनुमति देना है, इसलिए पाठ आधारित फ़ाइलों के लिए इसका मतलब है (कुछ सामग्री प्रकारों के लिए) आप ब्राउज़र में गलत हेडर और चीजें तोड़ सकते हैं।

जब यह सवाल पूछा गया (2012 में) SVGs ने काम नहीं किया। तब से जीथब ने कई सुधारों को लागू किया है। अब (एसवीजी के लिए कम से कम), सही कंटेंट-टाइप हेडर भेजे जाते हैं।

उदाहरण

नीचे बताए गए सभी तरीके काम करेंगे।

^{मैं करने के लिए सवाल से एसवीजी छवि की नकल की GitHub पर एक रेपो क्रम नीचे दिए गए उदाहरण बनाने के लिए}

रिश्तेदार पथों का उपयोग करके फ़ाइलों से लिंक करना (कार्य करता है, लेकिन जाहिर है कि केवल github.com / github.io पर)

कोड

![Alt text](./controllers_brief.svg)
<img src="./controllers_brief.svg">

परिणाम

Github.com पर काम करने का उदाहरण देखें ।

RAW फ़ाइलों से लिंक करना

कोड

![Alt text](https://raw.github.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg)
<img src="https://raw.github.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg">

परिणाम

RAW फ़ाइलों का उपयोग करके लिंक करना ?sanitize=true

कोड

![Alt text](https://raw.github.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg?sanitize=true)
<img src="https://raw.github.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg?sanitize=true">

परिणाम

Github.io पर होस्ट की गई फ़ाइलों से लिंक करना

कोड

![Alt text](https://potherca-blog.github.io/StackOverflow/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg)
<img src="https://potherca-blog.github.io/StackOverflow/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg">

परिणाम

---

रास्ते में हुए परिवर्तनों के संबंध में कुछ टिप्पणियां:

• गितुब ने एक फीचर लागू किया है जो एसवीजी के लिए मार्कडाउन इमेज सिंटैक्स के साथ उपयोग करना संभव बनाता है। SVG इमेज को सही HTTP हेडर के साथ साफ और प्रदर्शित किया जाएगा। कुछ टैग (जैसे <script>) हटा दिए जाते हैं।

  सैनिटाइज्ड एसवीजी को देखने के लिए या अन्य स्थानों से इस आशय को प्राप्त करने के लिए (अर्थात मार्कगेड फाइलों से जो रिपॉजिट में होस्ट नहीं किया गया है http://github.com/ पर ) बस ?sanitize=trueएसवीजी के कच्चे URL पर जाएं।

• जैसा कि टिप्पणियों में एडमकेट्ज ने कहा है, github.io के अलावा किसी अन्य स्रोत का उपयोग करके संभावित गोपनीयता और सुरक्षा जोखिमों का परिचय दिया जा सकता है। देखें CiroSantilli द्वारा जवाब और DavidChambers द्वारा जवाब अधिक जानकारी के लिए।

• इसे हल करने का मुद्दा 13 अक्टूबर 2015 को जीथूब पर खोला गया था और 31 अगस्त 2017 को हल किया गया था

Comments

बस स्पष्ट होने के लिए, आप कह रहे हैं कि एसवीजी चित्र प्रस्तुत नहीं करेंगे , सही?

— श्रीवत्सआर

@ShreevatsaR नहीं, सब कुछ लेकिन raw.github.com फ़ाइल को हॉटलाइन करना ठीक काम करता है। मैंने सिर्फ जीथब रेपो में कुछ नाम बदल दिया था और उदाहरणों को तोड़ते हुए अपने जवाब को अपडेट करना भूल गया था। अब तय हो गया।

— पर्थका

@ श्रीवत्सआर सही। गीथब ने कभी भी फाइलों को होस्ट करने के तरीके के रूप में उपयोग किए जाने वाले कच्चे दृश्य का उल्लेख नहीं किया, केवल देखने के लिए, इसलिए यह एक text/plainहेडर भेजता है ।

— पार्थका

चेतावनी: rawgit.com और rawgithub.com , GitHub के स्वामित्व या संचालित नहीं हैं , जो दुरुपयोग से गोपनीयता और यहां तक ​​कि सुरक्षा जोखिमों का परिचय देता है, यदि इसके वर्तमान मालिक से नहीं तो शायद भविष्य के मालिक से अगर DNS पंजीकरण में कमी आती है। यह github.io समाधान को सबसे सुरक्षित बनाता है। @ CiroSantilli का उत्तर और @ davidchambers का उत्तर भी देखें जो दोनों एक XSS जोखिम को नोट करते हैं जो इसे बनाता है।

— एडम काट्ज

@MonsieurDart मैंने उत्तर के लिए आपकी चिंता को जोड़ा।

— पर्ट्का

Answer 2

मैंने GitHub से यह कहने के लिए संपर्क किया कि github.io- होस्ट किए गए SVG को अब GitHub README में प्रदर्शित नहीं किया गया है। मुझे यह उत्तर मिला:

हमें संभावित क्रॉस साइट स्क्रिप्टिंग कमजोरियों के कारण GitHub.com पर svg इमेज रेंडरिंग को निष्क्रिय करना पड़ा है।

Comments

रुको, क्या ऐसा होता है? नहीं पता था।

— कैमिलो मार्टिन

दिलचस्प है, हालांकि, यह बूँद शो पर प्रस्तुत करता है: मेरा जवाब देखें । इसलिए मुझे समझ नहीं आ रहा है कि README में क्यों नहीं।

— सिरो सेंटिल्ली 郝海东 冠状 i i 14 '20

@CiroSantilli 六四 ill ill ill 轩 uses बूँद एक iframe का उपयोग करता है जो XSS एक एम्बेडेड SVG की तरह नहीं कर सकता।

— पेटा

अगर यह संभव था तो यहां ठीक से खोजा गया। अवधारणा का सबूत कि यह संभव है: jsfiddle.net/franciscop/krqea6gc

— फ्रांसिस्को प्रेसेंसिया

Hm, XSS हमले के गवाह के लिए यहां क्लिक करें? अच्छा लगा।

— एडम काट्ज

Answer 3

rawgit.com इस समस्या को अच्छी तरह से हल करता है। प्रत्येक अनुरोध के लिए, यह GitHub से उपयुक्त दस्तावेज़ को पुनः प्राप्त करता है और, महत्वपूर्ण रूप से, यह सही सामग्री-प्रकार हेडर के साथ कार्य करता है।

Comments

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

— eonist

आपको पहले वेबसाइट @GitSyncApp पर जाने की आवश्यकता नहीं है। :)

— दाविदचमर्स

अपने आप को जवाब देना ... G RawGit निजी रिपोज के लिए काम नहीं करता है: github.com/rgrove/rawgit/issues/62

— MonsieurDart

rawgit.com दूर जा रहा है। वेबसाइट के अनुसार: "रॉगिट 8 अक्टूबर, 2018 को अपने उपयोगी जीवन के अंत तक पहुंच गया है। रॉगिट अब एक सूर्यास्त के चरण में है और जल्द ही बंद हो जाएगा। यह एक मजेदार पांच साल हो गया है, लेकिन सभी चीजें समाप्त होनी चाहिए। सामग्री को परोसने वाले गिटहब रिपॉजिटरी। पिछले महीने के भीतर रॉगिट के माध्यम से 2019 के कम से कम अक्टूबर तक सेवा जारी रहेगी। अन्य रिपॉजिटरी के URL अब नहीं परोसे जा रहे हैं। यदि आप वर्तमान में रॉगिट का उपयोग कर रहे हैं, तो कृपया जितनी जल्दी हो सके इसका उपयोग बंद कर दें। "

— jeffhale

इसके अलावा rawgit.com सूर्यास्त की घोषणा से: "आपको इसके बजाय क्या उपयोग करना चाहिए। निम्नलिखित मुफ्त सेवाएँ कुछ या सभी रॉगिट की कार्यक्षमता के लिए शानदार विकल्प प्रदान करती हैं। आप उन्हें रॉगिट से भी अधिक पसंद कर सकते हैं। jsDelivr GitHub 'CodeSandbox unpkg"

— jeffhale

Answer 4

यह काम करेगा। निम्नलिखित पैटर्न का उपयोग करके अपने एसवीजी से लिंक करें:

https://cdn.rawgit.com/<repo-owner>/<repo>/<branch>/path/to.svg

नीचे की ओर मार्ग में मालिक और रेपो हार्डकोडिंग कर रहे हैं, जिसका अर्थ है कि यदि उनमें से किसी का भी नाम बदला गया है तो svg टूट जाएगा।

Comments

उपयोग करने cdn.rawgit.comका एक और नकारात्मक पहलू यह है कि "फाइल URL के आधार पर स्थायी रूप से कैश की जाती हैं"। यदि आप फ़ाइल को संशोधित करते हैं, तो यह तब तक अपडेट नहीं होगा जब तक आप नाम या पथ नहीं बदलते।

— मॉटी

@ मॉटी: रॉवित्जर ने अब अपडेट किया है: "नए परिवर्तन जो आप GitHub को धक्का देते हैं, मिनटों में दिखाई देंगे।"

— eonist

जरूरी! RawGit निजी रिपोज के लिए काम नहीं करता है: github.com/rgrove/rawgit/issues/62

— MonsieurDart

अपडेट 2018. रावतजी सूर्यास्त कर रहे हैं। ऊपर मेरी टिप्पणी देखें।

— जेफेल डेस

Answer 5

अपडेट 2017

वर्तमान में GitHub देव इस पर गौर कर रहा है: https://github.com/github/markup/issues/556#issuecomment-306103203

अपडेट २०१४-१२ : GitHub अब बूँद शो पर SVG प्रस्तुत करता है, इसलिए मुझे कोई कारण नहीं दिखता है कि README रेंडरिंग पर रेंडर क्यों न करें:

• https://github.com/blog/1902-svg-viewing-diffing
• https://github.com/cirosantilli/test/blob/2144a93333be144152e8b0d4144b77b211afce63/svg.svg

यह भी ध्यान दें कि SVG में XSS का प्रयास है लेकिन यह नहीं चलता है: https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4b4b77b211afce63/svg.svg.svg

बिलियन लाफ एसवीजी फ़ायरफ़ॉक्स 44 फ्रीज़ बनाता है, लेकिन क्रोमियम 48 ठीक है: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

पेटा ने उल्लेख किया कि बूँदें ठीक हैं क्योंकि एसवीजी अंदर है iframe।

गीथब के लिए संभावित तर्क एसवीजी छवियों की सेवा नहीं

• सामान्य XML कमजोरियाँ। जैसे एक बिलियन हंसी का फायदा उठाकर फायरफॉक्स ने मेरे सिस्टम को क्रैश कर दिया। शोषित के साथ फ़ायरफ़ॉक्स बग संलग्न: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html । क्रोमियम पर समान: https://code.google.com/p/chromium/issues/detail?id=231562

• SVG XSS स्क्रिप्टिंग: जबकि SVG के साथ एम्बेडेड होने पर अधिकांश ब्राउज़र स्क्रिप्ट नहीं चलाते हैं img, ऐसा लगता है कि मानकों द्वारा इसकी आवश्यकता नहीं है, इसलिए शायद GitHub इसे सुरक्षित खेल रहा है।

  ब्राउजर इसे चलाते हैं यदि आप सीधे एसवीजी खोलते हैं (लेकिन ऐसा प्रतीत होता है कि गिटहब कभी भी github.comडोमेन पर सीधे चित्र नहीं दिखाता है ) या यदि यह इनलाइन है (जो वर्तमान में गिटहब द्वारा पूरी तरह से हटा दिया गया है), तो उन मामलों में सुरक्षा चिंता नहीं होनी चाहिए। प्रासंगिक लिंक:

  • कल्पना: http://www.w3.org/TR/SVG/script.html
  • इंटरैक्टिव एसवीजी डेमो: http://www.w3.org/TR/SVG/images/script/script01.svg

निम्नलिखित प्रश्न सामान्य रूप से एसवीजी के जोखिमों के बारे में पूछते हैं: /security/11384/exploits-or-other-security-risks-with-svg-upload

Comments

जब एसवीजी को एक छवि टैग के माध्यम से एक्सेस किया जाता है तो ब्राउज़र स्क्रिप्ट नहीं चलाते हैं। अपने आप को जांचने के लिए स्वतंत्र महसूस करें।

— रॉबर्ट लोंगसन

@RobertLongson सुधार के लिए धन्यवाद। क्या यह केवल एक सामान्य ब्राउज़र व्यवहार के मानक पर निर्दिष्ट है? क्या यह सुरक्षा के लिए किया गया है?

— सिरो सेंटिल्ली i i i i i i

इसकी गोपनीयता के लिए किया गया है, और यह वास्तव में एक मानक नहीं है। लोग समझते हैं कि रेखापुंज चित्र कैसे काम करते हैं और वे क्या कर सकते हैं / नहीं कर सकते हैं जब एक छवि के रूप में उपयोग किया जाता है एसवीजी छवियों को उसी तरह काम करना चाहिए।

— रॉबर्ट लोंगसन

Answer 6

मेरे पास img-tag के साथ एक कार्यशील उदाहरण है, लेकिन आपकी छवियां प्रदर्शित नहीं होंगी। मुझे जो अंतर दिखाई दे रहा है वह सामग्री-प्रकार है।

मैंने आपके पोस्ट से जीथब इमेज (गूगल डॉक की इमेज कनेक्शन फेल होने के कारण लोड नहीं होने) की जाँच की। Github से छवि सामग्री-प्रकार: पाठ / सादे के रूप में वितरित की जाती है, जो आपके ब्राउज़र द्वारा एक छवि के रूप में प्रदान नहीं की जाएगी।

Svg के लिए सही सामग्री-प्रकार का मूल्य छवि / svg + xml है। तो आपको यह सुनिश्चित करना होगा कि svg फाइलें सही माइम प्रकार सेट करती हैं, लेकिन यह एक सर्वर समस्या है।

इसे http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg के साथ आज़माएं और टैग में चौड़ाई और ऊँचाई निर्दिष्ट करना न भूलें।

Answer 7

इस साइट का उपयोग करें: https://rawgit.com , यह मेरे लिए काम करता है क्योंकि मेरे पास svg फ़ाइल के साथ अनुमति समस्या नहीं है।
कृपया ध्यान दें कि रावजीत जीथब की सेवा नहीं है, जैसा कि रावजीत में उल्लेख किया गया है :

रॉइटिट किसी भी तरह से गिटहब से जुड़ा नहीं है। GitHub से संपर्क करने के लिए कृपया RawGit से मदद न लें

Svg का url दर्ज करें, जैसे आपको चाहिए:

https://github.com/sel-fish/redis-experiments/blob/master/dat/memDistrib-jemalloc-4.0.3.svg

फिर, आप url bellow प्राप्त कर सकते हैं जिसे प्रदर्शित करने के लिए उपयोग किया जा सकता है:

https://cdn.rawgit.com/sel-fish/redis-experiments/master/dat/memDistrib-jemalloc-4.0.3.svg

Comments

जरूरी! प्राइवेट रिपोज के लिए रॉगिट काम नहीं करता है: github.com/rgrove/rawgit/issues/62

— MonsieurDart

Answer 8

ठीक इसी तरह मेरे लिए गितुब पर काम किया।

![Imgae Caption](ImageAddressOnGitHub.svg)

या

<img src="ImageAddressOnGitHub.svg">