Как в Readme на гитхабе вставить SVG в виде inline-кода без ссылки на файл?

Question

[k3499]

Картинка в виде

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>.NET</title><path d="M24 8.77h-2.468v7.565h-1.425V8.77h-2.462V7.53H24zm-6.852 7.565h-4.821V7.53h4.63v1.24h-3.205v2.494h2.953v1.234h-2.953v2.604h3.396zm-6.708 0H8.882L4.78 9.863a2.896 2.896 0 0 1-.258-.51h-.036c.032.189.048.592.048 1.21v5.772H3.157V7.53h1.659l3.965 6.32c.167.261.275.442.323.54h.024c-.04-.233-.06-.629-.06-1.185V7.529h1.372zm-8.703-.693a.868.829 0 0 1-.869.829.868.829 0 0 1-.868-.83.868.829 0 0 1 .868-.828.868.829 0 0 1 .869.829Z"/></svg>

Comments

[Максим Федоров]

`тут код`

.md — это маркдаун, можете к нему инструкцию глянуть

[k3499]

Максим Федоров, Не получается. У меня просто код отображается

[Алексей Уколов]

Ну так, получается, вам не "в виде кода" надо вставить, а в виде картинки?

[Ankhena]

Вставьте картинкой, зачем кодом?

[Максим Федоров]

k3499,

Не получается. У меня просто код отображается

Таков был ваш запрос

[Дмитрий]

Файл создайте, его и вставляйте, на край пересохранить в формат другой

[k3499]

Алексей Уколов, Надо вставить чтобы отображалась картинка. Но свг не в виде файла, а в виде кода, который в вопросе прикрепил

[k3499]

Максим Федоров, Имел ввиду Как в Readme на гитхабе вставить "SVG в виде кода"?
свг бывает в виде файла и кода. Так вот вставить необходимо именно "SVG в виде кода" в md файл, чтобы отображалась картинка

[k3499]

Дмитрий, Мне не надо файл вставлять. Вопрос можно ли вставить СВГ в том виде, который я прикрепил в вопросе, чтобы в md отображалась картинка

[Дмитрий]

k3499, https://github.com/potherca-blog/StackOverflow/blo...

[k3499]

Дмитрий, Но по ссылке нет моего варианта. То есть так вставить нельзя?

[Дмитрий]

k3499, ну я бегло почитал, тут https://stackoverflow.com/questions/13808020/inclu...

[k3499]

Дмитрий, Ну естественно первую выдачу я видел, когда гуглил. В том треде вообще не про то разговор.

Answer 1

[mayton2019]

Картинки в Markdown вставляются так.

![SVG Image](https://host.com/your-image.svg)

Ессли SVG не отрисовывается - сконвертите его в формат растровой картинки.

Comments

[k3499]

Да, я понимаю, что если свг сконвертировать в файл, то его могу с отдельного сервера вставить. Но вопрос был в том, можно ли вставить "СВГ в виде кода" напрямую в md файл. Чтобы он оттуда обрисовывался как в html или нет.

[mayton2019]

k3499, я такого не знаю.

[Сергей Кузнецов]

k3499, GitHub Markdown такое не поддерживает. Хотя в продвинутых редакторах типа Obsidian такой фокус прокатывает.

[h8nor]

k3499, в виде кода нельзя. Вот вам пример с учетом смены темной/светлой темы.

## Link on [Drawio library](https://github.com/mondeja/simple-icons-drawio)<picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/simple-icons/simple-icons/develop/assets/readme/diagramsdotnet-white.svg" type="image/svg+xml"/><img src="https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/diagramsdotnet.svg" type="image/svg+xml" alt="Drawio" align="left" width="34" height="34"/></picture>

Можно проще. В подготовленную для web картинку svg после тега title добавляем стиль с заливкой:

<style type="text/css">
  path {
    stroke: transparent; fill: black;
  }
  @media (prefers-color-scheme: dark) {
    path {
      stroke: transparent; fill: white;
    }
  }
</style>

[mayton2019]

Если мы найдем онлайн-рендерер SVG файла который работает с GET запросами большой длины
то тогда задача может быть решена за счет них. Надо просто весь файл положить в параметры
GET запроса.