Перестали отображаеться svg через url data

240
14 апреля 2022, 15:30

Всем привет! Спустя несколько лет перестали отображаеться svg через url data.

Раньше все работало, в коде ничего не менялось. Ниже привел стиль элемента из инструментов разработчика Chrome

background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" id="m1"><style>path,circle{stroke-linecap:round;stroke-linejoin:round}.a{stroke:#222}.a,.b{fill:none;stroke-width:2}.b{stroke:#59f}.c{stroke-width:6}</style><circle class="a" r="6.5" cy="71.95" cx="82.787"/><circle class="a" r="6.5" cy="11.098" cx="49.316"/><path class="a" d="M42.49 11.442c-22.965 4.815-37.04 28.892-28.52 54.08m7.777 12.41c15.187 16.483 43.71 15.372 57.23-.556"/><circle class="a" r="6.5" cy="72.217" cx="17.831"/><circle class="b c" r="12.5" cy="50" cx="50"/><path class="a b" d="M89.163 59.41c7.41-37.04-27.04-47.227-27.04-47.227M77.31 56.447C82.125 31.444 58.79 24.59 58.79 24.59"/></svg>')

В таком виде тоже не отображаются

<img style="height:4em;" src="data:image/svg+xml;utf8,<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 100 100&quot; height=&quot;100&quot; width=&quot;100&quot;><defs><marker id=&quot;a&quot; orient=&quot;auto&quot; overflow=&quot;visible&quot;><path class=&quot;c e i&quot; d=&quot;M.508 0l-3.46 2v-4z&quot;/></marker><marker id=&quot;b&quot; orient=&quot;auto&quot; overflow=&quot;visible&quot;><path class=&quot;c e i&quot; d=&quot;M.508 0l-3.46 2v-4z&quot;/></marker></defs><style>circle,path,rect{stroke-linecap:round;stroke-linejoin:round}.a{fill:none}.b{fill:#e66}.c{fill:#777}.d{stroke:#e66}.e{stroke:#777}.f{paint-order:stroke fill markers}.g{cx:50;cy:50}.h{stroke-width:2}.i{stroke-width:.5}</style><circle class=&quot;a d f g&quot; r=&quot;46.5&quot; stroke-width=&quot;7&quot;/><circle class=&quot;a f g&quot; r=&quot;49.5&quot; stroke=&quot;#555&quot; stroke-width=&quot;1&quot;/><path class=&quot;a d&quot; d=&quot;M42.5 44.535v20.93M62.464 44.5h-9.928M52.5 44.535v20.93M62.464 54.5h-9.928&quot; stroke-width=&quot;5&quot;/><rect class=&quot;b e f&quot; width=&quot;11&quot; height=&quot;11&quot; x=&quot;66&quot; y=&quot;67&quot; rx=&quot;3&quot; ry=&quot;3&quot; stroke-width=&quot;4&quot;/><rect class=&quot;a e f h&quot; width=&quot;13&quot; height=&quot;13&quot; x=&quot;21&quot; y=&quot;21&quot; rx=&quot;7&quot; ry=&quot;7&quot;/><path class=&quot;a e f h&quot; d=&quot;M37.963 18.99a33.264 33.264 0 0 1 35.482 7.414 33.264 33.264 0 0 1 7.64 35.434&quot; marker-end=&quot;url(#a)&quot;/><path class=&quot;a e f h&quot; d=&quot;M-61.835-82.277a33.264 33.264 0 0 1 35.274 7.67 33.264 33.264 0 0 1 7.512 35.306&quot; transform=&quot;scale(-1)&quot; marker-end=&quot;url(#b)&quot;/><circle class=&quot;b f&quot; cx=&quot;42.5&quot; cy=&quot;37.5&quot; r=&quot;2.5&quot;/></svg>">

Есть идею, почему так?

Answer 1

Для того, чтобы вставлять SVG в url(), требуется экранировать многие символы. Например, с помощью сервиса - URL-encoder for SVG

body {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' id='m1'%3E%3Cstyle%3Epath,circle%7Bstroke-linecap:round;stroke-linejoin:round%7D.a%7Bstroke:%23222%7D.a,.b%7Bfill:none;stroke-width:2%7D.b%7Bstroke:%2359f%7D.c%7Bstroke-width:6%7D%3C/style%3E%3Ccircle class='a' r='6.5' cy='71.95' cx='82.787'/%3E%3Ccircle class='a' r='6.5' cy='11.098' cx='49.316'/%3E%3Cpath class='a' d='M42.49 11.442c-22.965 4.815-37.04 28.892-28.52 54.08m7.777 12.41c15.187 16.483 43.71 15.372 57.23-.556'/%3E%3Ccircle class='a' r='6.5' cy='72.217' cx='17.831'/%3E%3Ccircle class='b c' r='12.5' cy='50' cx='50'/%3E%3Cpath class='a b' d='M89.163 59.41c7.41-37.04-27.04-47.227-27.04-47.227M77.31 56.447C82.125 31.444 58.79 24.59 58.79 24.59'/%3E%3C/svg%3E");
}

READ ALSO
Необычный лоадер из падающих капель

Необычный лоадер из падающих капель

Идея инспирирована ответом

248
Как поместить один блок под другой?

Как поместить один блок под другой?

Появилась задача - поместить SVG блок под блок описания, но так, чтобы он оказался ПОД блоком описанияВот что у меня вышло:

200
Стилизвация маркера в списку ul li?

Стилизвация маркера в списку ul li?

Здравствуйте дорогие друзья! Подскажите как сделать стилизация маркера списка (ul li) Слева должен быть блок с такими стилями

221
unexpected token &lt; in JSON

unexpected token < in JSON

помогите, не отправляется форма отправки на почту

134