Как загрузить свг картинку на какой то сервис?

Question

[tkachenkoaanna097]

для вставки потом на codepen или jsfiddle.
многие сайты позволяют все форматы
кроме свг

Comments

[RAX7]

https://svgur.com/

Answer 1

[Moon Presence]

1. Купить хостинг, и забрасывать картинки туда.
2. Купить PRO - статус на Codepen, после чего можно получить небольшой хостинг от codepen для хранения активов.
3. Создать на Github репозиторий, залить папку с изображениями и можно грузить оттуда.
4. И наверное один из простых вариантов которые подходят для SVG:

Можно перевести SVG в data URI, например, с помощью такого генератора. На выходе будет готовый SVG код изображения который можно вставить в CSS файл.

В итоге такая SVG:

<svg width="1em" height="1em" viewBox="0 0 16 16" 
xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" 
d="M8 0a.5.5 0 0 1 .416.223l3 4.5A.5.5 0 0 1 11 5.5h-.098l2.022 3.235a.5.5 
0 0 1-.424.765h-.191l1.638 3.276a.5.5 0 0 1-.447.724h-11a.5.5 0 0 
1-.447-.724L3.69 9.5H3.5a.5.5 0 0 1-.424-.765L5.098 
5.5H5a.5.5 0 0 1-.416-.777l3-4.5A.5.5 0 0 1 8 0z"/>
  <path d="M7 13h2v3H7v-3z"/>
</svg>

Может стать такой:

background-image: 
url("data:image/svg+xml,%3Csvg 
width='1em' height='1em' viewBox='0 0 16 16' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' 
d='M8 0a.5.5 0 0 1 .416.223l3 4.5A.5.5 0 0 1 11 5.5h-.098l2.022 
3.235a.5.5 0 0 1-.424.765h-.191l1.638 3.276a.5.5 0 0 
1-.447.724h-11a.5.5 0 0 1-.447-.724L3.69 9.5H3.5a.5.5 0 0 1-.424-.765L5.098 
5.5H5a.5.5 0 0 1-.416-.777l3-4.5A.5.5 0 0 1 8 0z'/%3E%3Cpath d='M7 
13h2v3H7v-3z'/%3E%3C/svg%3E");

Далее уже можно установить как бекграунд для какого-нибудь элемента. Но в таком виде, SVG не будет иметь анимаций и пр. Поэтому если оценить ситуацию трезво, тогда вариант с личным хостингом и/или Репо на Гитхабе - самые лучшие.

Comments

[lagudal]

А можно еще и закодировать, тогда елочка как background может выглядеть так

background-image: url(data:image/svg;base64,PHN2ZyB3aWR0aD0nMWVtJyBoZWlnaHQ9JzFlbScgdmlld0JveD0nMCAwIDE2IDE2JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGZpbGwtcnVsZT0nZXZlbm9kZCcgZD0nTTggMGEuNS41IDAgMCAxIC40MTYuMjIzbDMgNC41QS41LjUgMCAwIDEgMTEgNS41aC0uMDk4bDIuMDIyIDMuMjM1YS41LjUgMCAwIDEtLjQyNC43NjVoLS4xOTFsMS42MzggMy4yNzZhLjUuNSAwIDAgMS0uNDQ3LjcyNGgtMTFhLjUuNSAwIDAgMS0uNDQ3LS43MjRMMy42OSA5LjVIMy41YS41LjUgMCAwIDEtLjQyNC0uNzY1TDUuMDk4IDUuNUg1YS41LjUgMCAwIDEtLjQxNi0uNzc3bDMtNC41QS41LjUgMCAwIDEgOCAweicvPjxwYXRoIGQ9J003IDEzaDJ2M0g3di0zeicvPjwvc3ZnPg==);

Answer 2

[lagudal]

Как вариант - svgshare