Как хостить свой svg иконки?

Question

[3Dcache]

Есть способ подключения svg иконки если сайт находится на одной машине где лежат svg иконки?
HTML интересует больше.
Вот нашёл пример со своим хостом:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 200 200" height="200px" id="Layer_1" version="1.1" viewBox="0 0 200 200" width="200px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M59.495,13.546H45.949V5.578c0-1.427,0.545-2.854,1.635-3.943C48.673,0.545,50.1,0,51.527,0h2.392   c1.425,0,2.854,0.546,3.941,1.635c1.091,1.089,1.634,2.517,1.634,3.943V13.546z M83.134,5.578c0-1.427-0.545-2.854-1.632-3.943   C80.413,0.545,78.983,0,77.556,0h-2.39c-1.427,0-2.856,0.546-3.945,1.635c-1.087,1.089-1.633,2.517-1.633,3.943v7.968h13.546V5.578   z M106.771,5.578c0-1.427-0.544-2.854-1.631-3.943C104.049,0.545,102.623,0,101.195,0h-2.39c-1.429,0-2.856,0.546-3.945,1.635   c-1.089,1.089-1.633,2.517-1.633,3.943v7.968h13.543V5.578z M130.413,5.578c0-1.427-0.547-2.854-1.634-3.943   C127.688,0.545,126.258,0,124.833,0h-2.392c-1.426,0-2.854,0.546-3.941,1.635c-1.092,1.089-1.635,2.517-1.635,3.943v7.968h13.548   V5.578z M154.048,5.578c0-1.427-0.543-2.854-1.634-3.943C151.326,0.545,149.897,0,148.473,0h-2.393   c-1.425,0-2.854,0.546-3.941,1.635c-1.091,1.089-1.635,2.517-1.635,3.943v7.968h13.544V5.578z M5.578,140.504   c-1.427,0-2.854,0.544-3.943,1.635C0.543,143.226,0,144.655,0,146.084v2.389c0,1.429,0.544,2.854,1.635,3.945   c1.089,1.087,2.517,1.635,3.943,1.635h7.968v-13.549H5.578z M5.578,116.865c-1.427,0-2.854,0.543-3.943,1.635   C0.543,119.587,0,121.016,0,122.445v2.388c0,1.43,0.544,2.854,1.635,3.946c1.089,1.087,2.517,1.63,3.943,1.63h7.968v-13.544H5.578z    M5.578,93.227c-1.427,0-2.854,0.543-3.943,1.635C0.543,95.949,0,97.376,0,98.805v2.39c0,1.428,0.544,2.854,1.635,3.944   c1.089,1.087,2.517,1.635,3.943,1.635h7.968V93.227H5.578z M5.578,69.588c-1.427,0-2.854,0.546-3.943,1.635   C0.543,72.312,0,73.739,0,75.164v2.392c0,1.427,0.544,2.856,1.635,3.946c1.089,1.087,2.517,1.632,3.943,1.632h7.968V69.588H5.578z    M5.578,45.951c-1.427,0-2.854,0.543-3.943,1.633C0.543,48.673,0,50.1,0,51.527v2.39c0,1.43,0.544,2.859,1.635,3.944   c1.089,1.091,2.517,1.634,3.943,1.634h7.968V45.951H5.578z M186.456,140.504v13.549h7.968c1.425,0,2.854-0.548,3.945-1.635   c1.087-1.092,1.631-2.517,1.631-3.945v-2.389c0-1.429-0.544-2.858-1.631-3.945c-1.091-1.091-2.521-1.635-3.945-1.635H186.456z    M186.456,116.865v13.544h7.968c1.425,0,2.854-0.543,3.945-1.63c1.087-1.092,1.631-2.517,1.631-3.946v-2.388   c0-1.43-0.544-2.858-1.631-3.945c-1.091-1.092-2.521-1.635-3.945-1.635H186.456z M186.456,93.227v13.547h7.968   c1.425,0,2.854-0.548,3.945-1.635c1.087-1.091,1.631-2.517,1.631-3.944v-2.39c0-1.429-0.544-2.856-1.631-3.943   c-1.091-1.091-2.521-1.635-3.945-1.635H186.456z M186.456,69.588v13.546h7.968c1.425,0,2.854-0.545,3.945-1.632   c1.087-1.089,1.631-2.519,1.631-3.946v-2.392c0-1.425-0.544-2.852-1.631-3.941c-1.091-1.089-2.521-1.635-3.945-1.635H186.456z    M186.456,45.951v13.544h7.968c1.425,0,2.854-0.543,3.945-1.634c1.087-1.085,1.631-2.514,1.631-3.944v-2.39   c0-1.427-0.544-2.854-1.631-3.943c-1.091-1.089-2.521-1.633-3.945-1.633H186.456z M59.495,186.456H45.949v7.968   c0,1.425,0.545,2.854,1.635,3.941C48.673,199.456,50.1,200,51.527,200h2.392c1.425,0,2.854-0.544,3.941-1.635   c1.091-1.087,1.634-2.517,1.634-3.941V186.456z M83.134,186.456H69.588v7.968c0,1.425,0.546,2.854,1.633,3.941   c1.089,1.091,2.519,1.635,3.945,1.635h2.39c1.427,0,2.854-0.544,3.946-1.635c1.087-1.087,1.632-2.517,1.632-3.941V186.456z    M106.771,186.456H93.227v7.968c0,1.425,0.543,2.854,1.633,3.941c1.089,1.091,2.518,1.635,3.945,1.635h2.39   c1.428,0,2.854-0.544,3.944-1.635c1.087-1.087,1.631-2.517,1.631-3.941V186.456z M130.413,186.456h-13.548v7.968   c0,1.425,0.543,2.854,1.635,3.941c1.087,1.091,2.516,1.635,3.941,1.635h2.392c1.425,0,2.854-0.544,3.946-1.635   c1.087-1.087,1.634-2.517,1.634-3.941V186.456z M154.048,186.456h-13.544v7.968c0,1.425,0.544,2.854,1.635,3.941   c1.087,1.091,2.517,1.635,3.941,1.635h2.393c1.425,0,2.854-0.544,3.941-1.635c1.091-1.087,1.634-2.517,1.634-3.941V186.456z" fill="#5E889E"/><path d="M48.467,33.866L33.864,48.467v103.065l14.603,14.601h103.065l14.601-14.601V48.467l-14.601-14.601H48.467z    M76.024,95.782l-5.812,0.922V91.98H54.548v15.804h15.665v-5.361l5.812,1.202v2.952c0,2.286-0.433,3.839-1.288,4.665   c-0.858,0.83-2.493,1.241-4.902,1.241H54.927c-2.424,0-4.061-0.411-4.913-1.241c-0.85-0.826-1.275-2.379-1.275-4.665V93.422   c0-2.268,0.426-3.821,1.275-4.654c0.852-0.834,2.488-1.251,4.913-1.251h14.907c2.41,0,4.044,0.417,4.902,1.251   c0.855,0.833,1.288,2.386,1.288,4.654V95.782z M114.999,97.932c0,1.684-0.444,2.91-1.335,3.674c-0.89,0.765-2.323,1.146-4.31,1.146   H93.717v9.731H88V87.517h21.354c1.986,0,3.42,0.381,4.31,1.145c0.891,0.764,1.335,1.996,1.335,3.697V97.932z M151.258,106.577   c0,2.286-0.423,3.839-1.271,4.665c-0.852,0.83-2.49,1.241-4.917,1.241h-15.778c-2.409,0-4.044-0.411-4.903-1.241   c-0.856-0.826-1.284-2.379-1.284-4.665V87.517h5.807v20.268h16.562V87.517h5.785V106.577z M108.846,92.277   c0.372,0.291,0.557,0.798,0.557,1.523v2.668c0,0.738-0.185,1.256-0.557,1.547s-1.057,0.437-2.067,0.437H93.717v-6.611h13.061   C107.789,91.841,108.474,91.984,108.846,92.277z M178.552,41.729l-20.284-20.284c-0.616-0.621-1.84-1.125-2.717-1.125H44.449   c-0.877,0-2.101,0.505-2.722,1.125L21.446,41.729c-0.621,0.619-1.128,1.842-1.128,2.72v111.102c0,0.877,0.507,2.101,1.128,2.717   l20.282,20.288c0.621,0.621,1.844,1.126,2.722,1.126h111.102c0.877,0,2.101-0.505,2.717-1.126l20.284-20.288   c0.62-0.616,1.13-1.84,1.13-2.717V44.449C179.682,43.572,179.172,42.348,178.552,41.729z M171.713,153.843l-17.87,17.87H46.154   l-17.868-17.87V46.157l17.868-17.871h107.688l17.87,17.871V153.843z" fill="#5E889E"/></g></svg>

Но что там надо поменять чтобы иконку брало с локального хоста а не с чужого хостинга?

Comments

[Вадим]

Так всмысле, свг это обычный файл. Подключается так же как и картинка. Если лежит там же где и сайт то прописывайте корректный путь в файле, где будет свг использовать и всё.
Ну и лишний мусор можно выбросить типа xml и doctype

[3Dcache]

Вадим, так а как в коде прописывать чтобы читал файл с своего хостинга а не файл из чужого хостинга?

[Вадим]

3Dcache, вы умеете подключать обычные картинки которые на вашем сервере лежат? Вот точно так же.

Просто по вашему описанию даже не понятно что именно у вас пошло не так. Откуда у вас эта проблема.

[3Dcache]

Вадим, нет не умею подключать вручную, я умею только чужой код вставлять, вот код:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 200 200" height="200px" id="Layer_1" version="1.1" viewBox="0 0 200 200" width="200px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M59.495,13.546H45.949V5.578c0-1.427,0.545-2.854,1.635-3.943C48.673,0.545,50.1,0,51.527,0h2.392   c1.425,0,2.854,0.546,3.941,1.635c1.091,1.089,1.634,2.517,1.634,3.943V13.546z M83.134,5.578c0-1.427-0.545-2.854-1.632-3.943   C80.413,0.545,78.983,0,77.556,0h-2.39c-1.427,0-2.856,0.546-3.945,1.635c-1.087,1.089-1.633,2.517-1.633,3.943v7.968h13.546V5.578   z M106.771,5.578c0-1.427-0.544-2.854-1.631-3.943C104.049,0.545,102.623,0,101.195,0h-2.39c-1.429,0-2.856,0.546-3.945,1.635   c-1.089,1.089-1.633,2.517-1.633,3.943v7.968h13.543V5.578z M130.413,5.578c0-1.427-0.547-2.854-1.634-3.943   C127.688,0.545,126.258,0,124.833,0h-2.392c-1.426,0-2.854,0.546-3.941,1.635c-1.092,1.089-1.635,2.517-1.635,3.943v7.968h13.548   V5.578z M154.048,5.578c0-1.427-0.543-2.854-1.634-3.943C151.326,0.545,149.897,0,148.473,0h-2.393   c-1.425,0-2.854,0.546-3.941,1.635c-1.091,1.089-1.635,2.517-1.635,3.943v7.968h13.544V5.578z M5.578,140.504   c-1.427,0-2.854,0.544-3.943,1.635C0.543,143.226,0,144.655,0,146.084v2.389c0,1.429,0.544,2.854,1.635,3.945   c1.089,1.087,2.517,1.635,3.943,1.635h7.968v-13.549H5.578z M5.578,116.865c-1.427,0-2.854,0.543-3.943,1.635   C0.543,119.587,0,121.016,0,122.445v2.388c0,1.43,0.544,2.854,1.635,3.946c1.089,1.087,2.517,1.63,3.943,1.63h7.968v-13.544H5.578z    M5.578,93.227c-1.427,0-2.854,0.543-3.943,1.635C0.543,95.949,0,97.376,0,98.805v2.39c0,1.428,0.544,2.854,1.635,3.944   c1.089,1.087,2.517,1.635,3.943,1.635h7.968V93.227H5.578z M5.578,69.588c-1.427,0-2.854,0.546-3.943,1.635   C0.543,72.312,0,73.739,0,75.164v2.392c0,1.427,0.544,2.856,1.635,3.946c1.089,1.087,2.517,1.632,3.943,1.632h7.968V69.588H5.578z    M5.578,45.951c-1.427,0-2.854,0.543-3.943,1.633C0.543,48.673,0,50.1,0,51.527v2.39c0,1.43,0.544,2.859,1.635,3.944   c1.089,1.091,2.517,1.634,3.943,1.634h7.968V45.951H5.578z M186.456,140.504v13.549h7.968c1.425,0,2.854-0.548,3.945-1.635   c1.087-1.092,1.631-2.517,1.631-3.945v-2.389c0-1.429-0.544-2.858-1.631-3.945c-1.091-1.091-2.521-1.635-3.945-1.635H186.456z    M186.456,116.865v13.544h7.968c1.425,0,2.854-0.543,3.945-1.63c1.087-1.092,1.631-2.517,1.631-3.946v-2.388   c0-1.43-0.544-2.858-1.631-3.945c-1.091-1.092-2.521-1.635-3.945-1.635H186.456z M186.456,93.227v13.547h7.968   c1.425,0,2.854-0.548,3.945-1.635c1.087-1.091,1.631-2.517,1.631-3.944v-2.39c0-1.429-0.544-2.856-1.631-3.943   c-1.091-1.091-2.521-1.635-3.945-1.635H186.456z M186.456,69.588v13.546h7.968c1.425,0,2.854-0.545,3.945-1.632   c1.087-1.089,1.631-2.519,1.631-3.946v-2.392c0-1.425-0.544-2.852-1.631-3.941c-1.091-1.089-2.521-1.635-3.945-1.635H186.456z    M186.456,45.951v13.544h7.968c1.425,0,2.854-0.543,3.945-1.634c1.087-1.085,1.631-2.514,1.631-3.944v-2.39   c0-1.427-0.544-2.854-1.631-3.943c-1.091-1.089-2.521-1.633-3.945-1.633H186.456z M59.495,186.456H45.949v7.968   c0,1.425,0.545,2.854,1.635,3.941C48.673,199.456,50.1,200,51.527,200h2.392c1.425,0,2.854-0.544,3.941-1.635   c1.091-1.087,1.634-2.517,1.634-3.941V186.456z M83.134,186.456H69.588v7.968c0,1.425,0.546,2.854,1.633,3.941   c1.089,1.091,2.519,1.635,3.945,1.635h2.39c1.427,0,2.854-0.544,3.946-1.635c1.087-1.087,1.632-2.517,1.632-3.941V186.456z    M106.771,186.456H93.227v7.968c0,1.425,0.543,2.854,1.633,3.941c1.089,1.091,2.518,1.635,3.945,1.635h2.39   c1.428,0,2.854-0.544,3.944-1.635c1.087-1.087,1.631-2.517,1.631-3.941V186.456z M130.413,186.456h-13.548v7.968   c0,1.425,0.543,2.854,1.635,3.941c1.087,1.091,2.516,1.635,3.941,1.635h2.392c1.425,0,2.854-0.544,3.946-1.635   c1.087-1.087,1.634-2.517,1.634-3.941V186.456z M154.048,186.456h-13.544v7.968c0,1.425,0.544,2.854,1.635,3.941   c1.087,1.091,2.517,1.635,3.941,1.635h2.393c1.425,0,2.854-0.544,3.941-1.635c1.091-1.087,1.634-2.517,1.634-3.941V186.456z" fill="#5E889E"/><path d="M48.467,33.866L33.864,48.467v103.065l14.603,14.601h103.065l14.601-14.601V48.467l-14.601-14.601H48.467z    M76.024,95.782l-5.812,0.922V91.98H54.548v15.804h15.665v-5.361l5.812,1.202v2.952c0,2.286-0.433,3.839-1.288,4.665   c-0.858,0.83-2.493,1.241-4.902,1.241H54.927c-2.424,0-4.061-0.411-4.913-1.241c-0.85-0.826-1.275-2.379-1.275-4.665V93.422   c0-2.268,0.426-3.821,1.275-4.654c0.852-0.834,2.488-1.251,4.913-1.251h14.907c2.41,0,4.044,0.417,4.902,1.251   c0.855,0.833,1.288,2.386,1.288,4.654V95.782z M114.999,97.932c0,1.684-0.444,2.91-1.335,3.674c-0.89,0.765-2.323,1.146-4.31,1.146   H93.717v9.731H88V87.517h21.354c1.986,0,3.42,0.381,4.31,1.145c0.891,0.764,1.335,1.996,1.335,3.697V97.932z M151.258,106.577   c0,2.286-0.423,3.839-1.271,4.665c-0.852,0.83-2.49,1.241-4.917,1.241h-15.778c-2.409,0-4.044-0.411-4.903-1.241   c-0.856-0.826-1.284-2.379-1.284-4.665V87.517h5.807v20.268h16.562V87.517h5.785V106.577z M108.846,92.277   c0.372,0.291,0.557,0.798,0.557,1.523v2.668c0,0.738-0.185,1.256-0.557,1.547s-1.057,0.437-2.067,0.437H93.717v-6.611h13.061   C107.789,91.841,108.474,91.984,108.846,92.277z M178.552,41.729l-20.284-20.284c-0.616-0.621-1.84-1.125-2.717-1.125H44.449   c-0.877,0-2.101,0.505-2.722,1.125L21.446,41.729c-0.621,0.619-1.128,1.842-1.128,2.72v111.102c0,0.877,0.507,2.101,1.128,2.717   l20.282,20.288c0.621,0.621,1.844,1.126,2.722,1.126h111.102c0.877,0,2.101-0.505,2.717-1.126l20.284-20.288   c0.62-0.616,1.13-1.84,1.13-2.717V44.449C179.682,43.572,179.172,42.348,178.552,41.729z M171.713,153.843l-17.87,17.87H46.154   l-17.868-17.87V46.157l17.868-17.871h107.688l17.87,17.871V153.843z" fill="#5E889E"/></g></svg>

- этот код я вставляю куда мне необходимо тем самым я после этого вижу на странице иконку.

[Вадим]

3Dcache,

я умею только чужой код вставлять

Ну, в таком случае, Вам тут не место. Согласно правилам сервиса у вас получается задание, а не вопрос.

[Вадим]

3Dcache,

этот код я вставляю куда мне необходимо тем самым я после этого вижу на странице иконку.

Так и в чем проблема то, если вы вставляете код и видите иконку? С какого чужого хоста, по вашему, она подключается ?

[Ankhena]

3Dcache, объясните толком, что у вас не получается? Вы не можете сделать файл picture.svg?

Только от мусора почистить не забудьте.

[3Dcache]

Ankhena,
- если брать в виде готового кода то вот что выходит, но как свою картинку поставить туда которая лежит на машине на которой сайт запущен?

[Ankhena]

3Dcache, svg вставляется на сайт несколькими способами:

1. Инлайном в разметку. Это тот код, который вы показываете прямо копируется и вставляется в html. (Так делают, если нужна смена нескольких цветов или анимации.)

2. SVG код сохраняется как файл с расширением . svg
И дальше вставляется
2.1 тегом img
2.2 фоном или маской в css
2.3 в content псевдоэлемента (неудобно управлять размерами)

3. Вставляется инлайном в base64 в css, всюду куда вставлялся путь к внешней картинке.

4. Из svg делаются спрайты.
4.1 из symbol - устаревший вариант,можно было использовать только в use
4.2 из svg - актуальный вариант, можно использовать в use, в img, в css в любом виде (фон, маски, content)

Думаю, что на данном этапе вам подойдут варианты 1 или лучше 2

Если опять не понятно, то постарайтесь конкретней сформулировать, что у вас есть и что нужно получить.

[3Dcache]

Ankhena, что делаю не так тут:12?

[Ankhena]

3Dcache, что это? Редактор какой-то cms?
Похоже на неверный путь.
Точнее похоже на путь по серверу, а не по сайту.
Вероятнее всего, путь будет просто src="picture.svg"
Если cms позволяет хранить картинки в своей корневой папке, а не в специальной папке images.

Обычно есть какая-то страница образец, на которой это можно посмотреть. И сделать по аналогии.

Дальше скажу сложное, но придётся разбираться. Нужно открыть инструменты разработчика в браузере, вкладку Console и посмотреть где браузер ищет каринку. Сравнить с тем, где она лежит на самом деле. И поправить путь.

По-хорошему, я вижу два варианта:
1. Немножко изучить html, css. Можно по тренажерам HTML Academy.
2. Нанять специалиста на фрилансе.

Почему я это пишу: потому что, судя по скринам, это не контентное изображение, это украшение какого-то текста. Такие картинки вставляются в стилях.
Конечно, всё зависит от того, какую задачу вы решаете этим сайтом. Если это сайт-однодневка для быстрой рекламы чего-то, то и черт с ним, как вставилось, так и ладно. А если что-то нормальное, то и делать хорошо бы сразу нормально.

Answer 1

[aleks-th]

SVG можно работать точно так же как и с любыми файлами - картинками например.

Comments

[3Dcache]

что толку от этой информации если смысл поста в другом?

[aleks-th]

3Dcache, если вы не получили ответ на свой вопрос - то вопрос задан не правильно.
Откуда мне например знать в чем смысл вашего поста.

Ваш вопрос дословно звучит так - "Как хостить свой SVG иконки ?"
На ваш вопрос ответ - так же как и все другие файлы, например картинки.

Если ваш вопрос подразумевает нечто иное - задайте его так чтобы людям было понятно, что вы имеете ввиду.

Наишите что хотите сделать.
Пример кода, что пробуете сделать.
И ошибку или что именно у вас не получается.

Тогда и ответ на ваш вопрос будет соответсвовать вашим желаниям.

[aleks-th]

3Dcache, еще раз прочитал ваш вопрос.
еще раз отвечу - svg - это просто формат файла.
работать с ним так же как любыми иными картинками, в любых иных форматах.

Более того в указанном вам примере если эта строка из вашего файла занчит это изображение - svg уже находится внутри вашего html файла, на вашем компьютере.

если хотите чего-то иного - уточняйте вопрос.

[aleks-th]

И еще раз отмечу вам три разных человека написали то же самое - соответсвенно ваше непонимание корректного ответа делает дискуссию с вами бесполезной.

[Кирилл Никитин]

3Dcache, я, возможно, понял. Вы, кажется, думаете что ваш svg хостится с www.w3.org?
Этот домен в коде svg про другое. Ссылки на спецификации формата, а не ваш файл.

[3Dcache]

Кирилл Никитин, Да верно.
я думаю что файл.svg откуда то берётся чтобы он отображаться мог на моем сайте.

[Кирилл Никитин]

3Dcache, это даже не необходимая часть и всё, что за пределами тега svg можно вообще удалить для оптимизации. А всё, что внутри тега svg и есть ваша картинка. Это координаты, по которым браузер отрисовывает вашу картинку каждый раз при открытие, а не берёт её откуда-то в тырнете.

[3Dcache]

Кирилл Никитин, Понял - просто "https://www.iconfinder.com/search?q=HHD" в один день может перестать открываться и тогда слетят svg иконки?
А так же зачем на таких сайтах можно скачать иконку к себе на компьютер? - для каких целей такое делать?

[Кирилл Никитин]

3Dcache, если вы скачали у них файл svg, то он уже у вас и вам не важно открывается иконфайндер или нет. Вы можете делать теперь с этим файлом всё, что можно делать с любым другим файлом или картинкой. Положить к себе на хостинг или куда хотите и ссылаться на него через тег img, в css через url или ещё как-то.

[3Dcache]

Кирилл Никитин, но как сделать чтобы:

<svg enable-background="new 0 0 200 200" height="50px" id="Layer_1" version="1.1" viewBox="0 0 200 200" width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M59.495,13.546H45.949V5.578c0-1.427,0.545-2.854,1.635-3.943C48.673,0.545,50.1,0,51.527,0h2.392   c1.425,0,2.854,0.546,3.941,1.635c1.091,1.089,1.634,2.517,1.634,3.943V13.546z M83.134,5.578c0-1.427-0.545-2.854-1.632-3.943   C80.413,0.545,78.983,0,77.556,0h-2.39c-1.427,0-2.856,0.546-3.945,1.635c-1.087,1.089-1.633,2.517-1.633,3.943v7.968h13.546V5.578   z M106.771,5.578c0-1.427-0.544-2.854-1.631-3.943C104.049,0.545,102.623,0,101.195,0h-2.39c-1.429,0-2.856,0.546-3.945,1.635   c-1.089,1.089-1.633,2.517-1.633,3.943v7.968h13.543V5.578z M130.413,5.578c0-1.427-0.547-2.854-1.634-3.943   C127.688,0.545,126.258,0,124.833,0h-2.392c-1.426,0-2.854,0.546-3.941,1.635c-1.092,1.089-1.635,2.517-1.635,3.943v7.968h13.548   V5.578z M154.048,5.578c0-1.427-0.543-2.854-1.634-3.943C151.326,0.545,149.897,0,148.473,0h-2.393   c-1.425,0-2.854,0.546-3.941,1.635c-1.091,1.089-1.635,2.517-1.635,3.943v7.968h13.544V5.578z M5.578,140.504   c-1.427,0-2.854,0.544-3.943,1.635C0.543,143.226,0,144.655,0,146.084v2.389c0,1.429,0.544,2.854,1.635,3.945   c1.089,1.087,2.517,1.635,3.943,1.635h7.968v-13.549H5.578z M5.578,116.865c-1.427,0-2.854,0.543-3.943,1.635   C0.543,119.587,0,121.016,0,122.445v2.388c0,1.43,0.544,2.854,1.635,3.946c1.089,1.087,2.517,1.63,3.943,1.63h7.968v-13.544H5.578z    M5.578,93.227c-1.427,0-2.854,0.543-3.943,1.635C0.543,95.949,0,97.376,0,98.805v2.39c0,1.428,0.544,2.854,1.635,3.944   c1.089,1.087,2.517,1.635,3.943,1.635h7.968V93.227H5.578z M5.578,69.588c-1.427,0-2.854,0.546-3.943,1.635   C0.543,72.312,0,73.739,0,75.164v2.392c0,1.427,0.544,2.856,1.635,3.946c1.089,1.087,2.517,1.632,3.943,1.632h7.968V69.588H5.578z    M5.578,45.951c-1.427,0-2.854,0.543-3.943,1.633C0.543,48.673,0,50.1,0,51.527v2.39c0,1.43,0.544,2.859,1.635,3.944   c1.089,1.091,2.517,1.634,3.943,1.634h7.968V45.951H5.578z M186.456,140.504v13.549h7.968c1.425,0,2.854-0.548,3.945-1.635   c1.087-1.092,1.631-2.517,1.631-3.945v-2.389c0-1.429-0.544-2.858-1.631-3.945c-1.091-1.091-2.521-1.635-3.945-1.635H186.456z    M186.456,116.865v13.544h7.968c1.425,0,2.854-0.543,3.945-1.63c1.087-1.092,1.631-2.517,1.631-3.946v-2.388   c0-1.43-0.544-2.858-1.631-3.945c-1.091-1.092-2.521-1.635-3.945-1.635H186.456z M186.456,93.227v13.547h7.968   c1.425,0,2.854-0.548,3.945-1.635c1.087-1.091,1.631-2.517,1.631-3.944v-2.39c0-1.429-0.544-2.856-1.631-3.943   c-1.091-1.091-2.521-1.635-3.945-1.635H186.456z M186.456,69.588v13.546h7.968c1.425,0,2.854-0.545,3.945-1.632   c1.087-1.089,1.631-2.519,1.631-3.946v-2.392c0-1.425-0.544-2.852-1.631-3.941c-1.091-1.089-2.521-1.635-3.945-1.635H186.456z    M186.456,45.951v13.544h7.968c1.425,0,2.854-0.543,3.945-1.634c1.087-1.085,1.631-2.514,1.631-3.944v-2.39   c0-1.427-0.544-2.854-1.631-3.943c-1.091-1.089-2.521-1.633-3.945-1.633H186.456z M59.495,186.456H45.949v7.968   c0,1.425,0.545,2.854,1.635,3.941C48.673,199.456,50.1,200,51.527,200h2.392c1.425,0,2.854-0.544,3.941-1.635   c1.091-1.087,1.634-2.517,1.634-3.941V186.456z M83.134,186.456H69.588v7.968c0,1.425,0.546,2.854,1.633,3.941   c1.089,1.091,2.519,1.635,3.945,1.635h2.39c1.427,0,2.854-0.544,3.946-1.635c1.087-1.087,1.632-2.517,1.632-3.941V186.456z    M106.771,186.456H93.227v7.968c0,1.425,0.543,2.854,1.633,3.941c1.089,1.091,2.518,1.635,3.945,1.635h2.39   c1.428,0,2.854-0.544,3.944-1.635c1.087-1.087,1.631-2.517,1.631-3.941V186.456z M130.413,186.456h-13.548v7.968   c0,1.425,0.543,2.854,1.635,3.941c1.087,1.091,2.516,1.635,3.941,1.635h2.392c1.425,0,2.854-0.544,3.946-1.635   c1.087-1.087,1.634-2.517,1.634-3.941V186.456z M154.048,186.456h-13.544v7.968c0,1.425,0.544,2.854,1.635,3.941   c1.087,1.091,2.517,1.635,3.941,1.635h2.393c1.425,0,2.854-0.544,3.941-1.635c1.091-1.087,1.634-2.517,1.634-3.941V186.456z" fill="#5E889E"/><path d="M48.467,33.866L33.864,48.467v103.065l14.603,14.601h103.065l14.601-14.601V48.467l-14.601-14.601H48.467z    M76.024,95.782l-5.812,0.922V91.98H54.548v15.804h15.665v-5.361l5.812,1.202v2.952c0,2.286-0.433,3.839-1.288,4.665   c-0.858,0.83-2.493,1.241-4.902,1.241H54.927c-2.424,0-4.061-0.411-4.913-1.241c-0.85-0.826-1.275-2.379-1.275-4.665V93.422   c0-2.268,0.426-3.821,1.275-4.654c0.852-0.834,2.488-1.251,4.913-1.251h14.907c2.41,0,4.044,0.417,4.902,1.251   c0.855,0.833,1.288,2.386,1.288,4.654V95.782z M114.999,97.932c0,1.684-0.444,2.91-1.335,3.674c-0.89,0.765-2.323,1.146-4.31,1.146   H93.717v9.731H88V87.517h21.354c1.986,0,3.42,0.381,4.31,1.145c0.891,0.764,1.335,1.996,1.335,3.697V97.932z M151.258,106.577   c0,2.286-0.423,3.839-1.271,4.665c-0.852,0.83-2.49,1.241-4.917,1.241h-15.778c-2.409,0-4.044-0.411-4.903-1.241   c-0.856-0.826-1.284-2.379-1.284-4.665V87.517h5.807v20.268h16.562V87.517h5.785V106.577z M108.846,92.277   c0.372,0.291,0.557,0.798,0.557,1.523v2.668c0,0.738-0.185,1.256-0.557,1.547s-1.057,0.437-2.067,0.437H93.717v-6.611h13.061   C107.789,91.841,108.474,91.984,108.846,92.277z M178.552,41.729l-20.284-20.284c-0.616-0.621-1.84-1.125-2.717-1.125H44.449   c-0.877,0-2.101,0.505-2.722,1.125L21.446,41.729c-0.621,0.619-1.128,1.842-1.128,2.72v111.102c0,0.877,0.507,2.101,1.128,2.717   l20.282,20.288c0.621,0.621,1.844,1.126,2.722,1.126h111.102c0.877,0,2.101-0.505,2.717-1.126l20.284-20.288   c0.62-0.616,1.13-1.84,1.13-2.717V44.449C179.682,43.572,179.172,42.348,178.552,41.729z M171.713,153.843l-17.87,17.87H46.154   l-17.868-17.87V46.157l17.868-17.871h107.688l17.87,17.871V153.843z" fill="#5E889E"/></g></svg>

ссылался на файл который лежит по пути /root/picture.svg? - чтобы сделать свой svg\png иконки и прикрепить их на сайт, дабы получилось вот что:

[Кирилл Никитин]

3Dcache, этот код то, что должно быть в вашем файле svg. Просто создайте новый документ в блокноте или редакторе кода, вставьте туда этот код и сохраните как picture.svg

SVG имеет два вида, как формат данных и как контейнер для этих данных. picture.svg — контейнер, который по своей сути просто текстовой файл. А внутри у него лежит уже вот этот ваш код — данные в формате svg.

[3Dcache]

Кирилл Никитин, так в любом случае как сделать чтобы читался этот picture.svg?
ведь от того что я положу файл в раздел /root то он не отобразится на сайте.

[Кирилл Никитин]

3Dcache, вставляете в html через тег img например.

<img src="/root/picture.svg" alt="">

Но вообще, в html вы можете вставлять тот ваш код напрямую. Без файла.

[3Dcache]

Кирилл Никитин, не получается почему-то.
Вторая картинка:

[Кирилл Никитин]

3Dcache, и что это? Куда вы это вставляете?

[3Dcache]

Кирилл Никитин, cюда вставляю:
Вторя картинка это где должна иконка быть видна но этого не происходит почему-то, только TXT видна надпись.
Код файла:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 200 200" height="200px" id="Layer_1" version="1.1" viewBox="0 0 200 200" width="200px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M59.495,13.546H45.949V5.578c0-1.427,0.545-2.854,1.635-3.943C48.673,0.545,50.1,0,51.527,0h2.392   c1.425,0,2.854,0.546,3.941,1.635c1.091,1.089,1.634,2.517,1.634,3.943V13.546z M83.134,5.578c0-1.427-0.545-2.854-1.632-3.943   C80.413,0.545,78.983,0,77.556,0h-2.39c-1.427,0-2.856,0.546-3.945,1.635c-1.087,1.089-1.633,2.517-1.633,3.943v7.968h13.546V5.578   z M106.771,5.578c0-1.427-0.544-2.854-1.631-3.943C104.049,0.545,102.623,0,101.195,0h-2.39c-1.429,0-2.856,0.546-3.945,1.635   c-1.089,1.089-1.633,2.517-1.633,3.943v7.968h13.543V5.578z M130.413,5.578c0-1.427-0.547-2.854-1.634-3.943   C127.688,0.545,126.258,0,124.833,0h-2.392c-1.426,0-2.854,0.546-3.941,1.635c-1.092,1.089-1.635,2.517-1.635,3.943v7.968h13.548   V5.578z M154.048,5.578c0-1.427-0.543-2.854-1.634-3.943C151.326,0.545,149.897,0,148.473,0h-2.393   c-1.425,0-2.854,0.546-3.941,1.635c-1.091,1.089-1.635,2.517-1.635,3.943v7.968h13.544V5.578z M5.578,140.504   c-1.427,0-2.854,0.544-3.943,1.635C0.543,143.226,0,144.655,0,146.084v2.389c0,1.429,0.544,2.854,1.635,3.945   c1.089,1.087,2.517,1.635,3.943,1.635h7.968v-13.549H5.578z M5.578,116.865c-1.427,0-2.854,0.543-3.943,1.635   C0.543,119.587,0,121.016,0,122.445v2.388c0,1.43,0.544,2.854,1.635,3.946c1.089,1.087,2.517,1.63,3.943,1.63h7.968v-13.544H5.578z    M5.578,93.227c-1.427,0-2.854,0.543-3.943,1.635C0.543,95.949,0,97.376,0,98.805v2.39c0,1.428,0.544,2.854,1.635,3.944   c1.089,1.087,2.517,1.635,3.943,1.635h7.968V93.227H5.578z M5.578,69.588c-1.427,0-2.854,0.546-3.943,1.635   C0.543,72.312,0,73.739,0,75.164v2.392c0,1.427,0.544,2.856,1.635,3.946c1.089,1.087,2.517,1.632,3.943,1.632h7.968V69.588H5.578z    M5.578,45.951c-1.427,0-2.854,0.543-3.943,1.633C0.543,48.673,0,50.1,0,51.527v2.39c0,1.43,0.544,2.859,1.635,3.944   c1.089,1.091,2.517,1.634,3.943,1.634h7.968V45.951H5.578z M186.456,140.504v13.549h7.968c1.425,0,2.854-0.548,3.945-1.635   c1.087-1.092,1.631-2.517,1.631-3.945v-2.389c0-1.429-0.544-2.858-1.631-3.945c-1.091-1.091-2.521-1.635-3.945-1.635H186.456z    M186.456,116.865v13.544h7.968c1.425,0,2.854-0.543,3.945-1.63c1.087-1.092,1.631-2.517,1.631-3.946v-2.388   c0-1.43-0.544-2.858-1.631-3.945c-1.091-1.092-2.521-1.635-3.945-1.635H186.456z M186.456,93.227v13.547h7.968   c1.425,0,2.854-0.548,3.945-1.635c1.087-1.091,1.631-2.517,1.631-3.944v-2.39c0-1.429-0.544-2.856-1.631-3.943   c-1.091-1.091-2.521-1.635-3.945-1.635H186.456z M186.456,69.588v13.546h7.968c1.425,0,2.854-0.545,3.945-1.632   c1.087-1.089,1.631-2.519,1.631-3.946v-2.392c0-1.425-0.544-2.852-1.631-3.941c-1.091-1.089-2.521-1.635-3.945-1.635H186.456z    M186.456,45.951v13.544h7.968c1.425,0,2.854-0.543,3.945-1.634c1.087-1.085,1.631-2.514,1.631-3.944v-2.39   c0-1.427-0.544-2.854-1.631-3.943c-1.091-1.089-2.521-1.633-3.945-1.633H186.456z M59.495,186.456H45.949v7.968   c0,1.425,0.545,2.854,1.635,3.941C48.673,199.456,50.1,200,51.527,200h2.392c1.425,0,2.854-0.544,3.941-1.635   c1.091-1.087,1.634-2.517,1.634-3.941V186.456z M83.134,186.456H69.588v7.968c0,1.425,0.546,2.854,1.633,3.941   c1.089,1.091,2.519,1.635,3.945,1.635h2.39c1.427,0,2.854-0.544,3.946-1.635c1.087-1.087,1.632-2.517,1.632-3.941V186.456z    M106.771,186.456H93.227v7.968c0,1.425,0.543,2.854,1.633,3.941c1.089,1.091,2.518,1.635,3.945,1.635h2.39   c1.428,0,2.854-0.544,3.944-1.635c1.087-1.087,1.631-2.517,1.631-3.941V186.456z M130.413,186.456h-13.548v7.968   c0,1.425,0.543,2.854,1.635,3.941c1.087,1.091,2.516,1.635,3.941,1.635h2.392c1.425,0,2.854-0.544,3.946-1.635   c1.087-1.087,1.634-2.517,1.634-3.941V186.456z M154.048,186.456h-13.544v7.968c0,1.425,0.544,2.854,1.635,3.941   c1.087,1.091,2.517,1.635,3.941,1.635h2.393c1.425,0,2.854-0.544,3.941-1.635c1.091-1.087,1.634-2.517,1.634-3.941V186.456z" fill="#5E889E"/><path d="M48.467,33.866L33.864,48.467v103.065l14.603,14.601h103.065l14.601-14.601V48.467l-14.601-14.601H48.467z    M76.024,95.782l-5.812,0.922V91.98H54.548v15.804h15.665v-5.361l5.812,1.202v2.952c0,2.286-0.433,3.839-1.288,4.665   c-0.858,0.83-2.493,1.241-4.902,1.241H54.927c-2.424,0-4.061-0.411-4.913-1.241c-0.85-0.826-1.275-2.379-1.275-4.665V93.422   c0-2.268,0.426-3.821,1.275-4.654c0.852-0.834,2.488-1.251,4.913-1.251h14.907c2.41,0,4.044,0.417,4.902,1.251   c0.855,0.833,1.288,2.386,1.288,4.654V95.782z M114.999,97.932c0,1.684-0.444,2.91-1.335,3.674c-0.89,0.765-2.323,1.146-4.31,1.146   H93.717v9.731H88V87.517h21.354c1.986,0,3.42,0.381,4.31,1.145c0.891,0.764,1.335,1.996,1.335,3.697V97.932z M151.258,106.577   c0,2.286-0.423,3.839-1.271,4.665c-0.852,0.83-2.49,1.241-4.917,1.241h-15.778c-2.409,0-4.044-0.411-4.903-1.241   c-0.856-0.826-1.284-2.379-1.284-4.665V87.517h5.807v20.268h16.562V87.517h5.785V106.577z M108.846,92.277   c0.372,0.291,0.557,0.798,0.557,1.523v2.668c0,0.738-0.185,1.256-0.557,1.547s-1.057,0.437-2.067,0.437H93.717v-6.611h13.061   C107.789,91.841,108.474,91.984,108.846,92.277z M178.552,41.729l-20.284-20.284c-0.616-0.621-1.84-1.125-2.717-1.125H44.449   c-0.877,0-2.101,0.505-2.722,1.125L21.446,41.729c-0.621,0.619-1.128,1.842-1.128,2.72v111.102c0,0.877,0.507,2.101,1.128,2.717   l20.282,20.288c0.621,0.621,1.844,1.126,2.722,1.126h111.102c0.877,0,2.101-0.505,2.717-1.126l20.284-20.288   c0.62-0.616,1.13-1.84,1.13-2.717V44.449C179.682,43.572,179.172,42.348,178.552,41.729z M171.713,153.843l-17.87,17.87H46.154   l-17.868-17.87V46.157l17.868-17.871h107.688l17.87,17.871V153.843z" fill="#5E889E"/></g></svg>

[Кирилл Никитин]

3Dcache, куда — сюда? Это какая-то cms? Там видимо ограничение на возможные теги, только базовое форматирование.

[3Dcache]

Кирилл Никитин, да это cms, whmcs.
Если так:
то работает.

[Кирилл Никитин]

3Dcache, это довольно значительная деталь, которую мы тут все должны были угадать?

Если работает, то оставьте. Вставлять svg не файлом тоже нормально. Этот код и есть иконка, она никуда не ссылается и не пропадёт.

[3Dcache]

Кирилл Никитин, но png иконки как можно вставлять не знаешь?

[Кирилл Никитин]

3Dcache, в вашу cms не знаю.

[3Dcache]

Кирилл Никитин, там знать не надо её, достаточно html\css знать.

[Кирилл Никитин]

3Dcache, я уже написал — через тег img. Но это при условие, что тег разрешен в редакторе этой cms. И естественно, вы должны эту картинку положить, куда у cms будет доступ и путь до картинки должен быть верным. Но, как вариант, вы можете конвертировать её в base64 (тут например) и попробовать вставить кодом, а не файлом.

Answer 2

[Myakish999]

svg в примере и так содержит всё необходимое.
Мне кажется, что вы немного упускаете из виду, что svg можно использовать как код, просто вставив в html собственно тег svg со всем содержимым, а можно обособить в файл или сделать инлайн инжекцию как с обычным jpg или png, например. Это тоже приведёт к отображению иконки.
Во всех случаях использования svg кроме явного указания другого сайта в пути для src="" или url() для background-image, содержимое иконки будет на вашем сайте.
Вообще, строго говоря, svg это не картинка. Это свой язык разметки, который может содержать в себе и стили и JS. Поэтому считается, что чужие svg могут быть небезопасными. Если тырите чужие svg для использования на своём сайте, обязательно проверяйте наличие в них JS. Особенно, если планируете использовать SVG не в img или url(), а в виде прямого кода.

Comments

[3Dcache]

Как проверять JS\стили?
С сайта "https://www.iconfinder.com/search?q=HHD" безопасно брать svg картинки?
Либо как можно png картинку разместить на сайте своём?
Сайт работает на языке PHP, php7.4, прокси nginx + php-fpm запущены.

[Myakish999]

Проверить просто: как я уже писал, svg - это не только картинка, вернее не столько картинка, сколько язык разметки. Соответственно это текстовый файл, в котором и стили, и JS присутствуют в явном виде в виде кода. Ваш пример просто немного сжат - из него убраны все переносы строк. Но если вы его откроете в текстовом редакторе, особенно в таком, который будет подсвечивать пару открытого и закрытого тега и вручную по нажимаете enter перед открывающем теге или после закрывающего, вы увидите структуру svg разметки. можете даже удалять/дублировать какие-нибудь теги типа и увидеть, как будет отображаться файл результата. Надеюсь не надо упоминать чем отличается открывающий тег от закрывающего :)?
Теги конечно отличаются от HTML, но есть и похожие. Например