2

Подключение в HTML:

    <?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 474.986 474.986" style="enable-background:new 0 0 474.986 474.986;" xml:space="preserve">
<path id="XMLID_3_" d="M440.904,356.937l-15.139-80.104c-0.632-3.32-2.842-6.123-5.93-7.501c-3.081-1.386-6.647-1.163-9.542,0.577
    l-69.815,42.086c-4.09,2.464-5.954,7.408-4.514,11.952c1.434,4.552,5.799,7.515,10.559,7.184l27.269-1.902
    c-26.037,34.993-65.227,49.355-110.178,53.036V153.103h22.449c3.62,2.695,8.07,4.343,12.929,4.343
    c12.021,0,21.771-9.742,21.771-21.764c0-12.029-9.75-21.771-21.771-21.771c-4.867,0-9.318,1.656-12.938,4.351h-22.441V86.789
    c12.776-8.494,21.231-22.987,21.231-39.436C284.845,21.247,263.6,0,237.493,0c-26.107,0-47.354,21.247-47.354,47.353
    c0,16.449,8.456,30.942,21.231,39.436v31.474h-22.44c-3.62-2.695-8.07-4.351-12.937-4.351c-12.021,0-21.771,9.742-21.771,21.771
    c0,12.021,9.75,21.764,21.771,21.764c4.859,0,9.309-1.648,12.929-4.343h22.448v229.162c-44.95-3.681-84.14-18.043-110.176-53.036
    l27.269,1.902c4.759,0.331,9.125-2.632,10.558-7.184c1.44-4.543-0.423-9.488-4.513-11.952l-69.816-42.086
    c-2.896-1.74-6.461-1.963-9.542-0.577c-3.088,1.378-5.298,4.181-5.93,7.501l-15.14,80.104c-0.886,4.689,1.555,9.372,5.906,11.327
    c4.351,1.965,9.472,0.686,12.399-3.088l16.287-21.008c31.843,51.565,81.914,94.736,139.664,105.942l21.854,21.854
    c4.036,4.028,10.565,4.028,14.594,0l21.854-21.854c57.75-11.198,107.828-54.377,139.672-105.942l16.287,21.008
    c2.927,3.774,8.048,5.053,12.398,3.088C439.349,366.309,441.79,361.626,440.904,356.937z M237.493,34.839
    c6.9,0,12.513,5.614,12.513,12.514c0,6.9-5.613,12.514-12.513,12.514c-6.9,0-12.515-5.614-12.515-12.514
    C224.979,40.453,230.593,34.839,237.493,34.839z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

UPD В сниппете, здесь на сайте отображается, но если сохранить в отдельный файл *.svg, то при запуске в браузерах выдаёт ошибку.

7
  • на сервере по пути img/symbol/sprite.svg 404 1 июн 2019 в 7:47
  • Что это значит? Я не совсем понял. 1 июн 2019 в 7:50
  • вы обращаетесь к картинке которой нет на сервере 1 июн 2019 в 7:51
  • Как мне её правильно подключить? 1 июн 2019 в 8:00
  • для начала нужно чтобы она открывалась по ссылке, по которой Вы ее запрашиваете с сервера, вбейте img/symbol/sprite.svg в строку браузера 1 июн 2019 в 8:06

1 ответ 1

2

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

<?xml version="1.0" encoding="iso-8859-1"?>

введите сюда описание изображения

Вот теперь, файл открывается:

 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 474.986 474.986" style="enable-background:new 0 0 474.986 474.986;" xml:space="preserve">
<path id="XMLID_3_" d="M440.904,356.937l-15.139-80.104c-0.632-3.32-2.842-6.123-5.93-7.501c-3.081-1.386-6.647-1.163-9.542,0.577
    l-69.815,42.086c-4.09,2.464-5.954,7.408-4.514,11.952c1.434,4.552,5.799,7.515,10.559,7.184l27.269-1.902
    c-26.037,34.993-65.227,49.355-110.178,53.036V153.103h22.449c3.62,2.695,8.07,4.343,12.929,4.343
    c12.021,0,21.771-9.742,21.771-21.764c0-12.029-9.75-21.771-21.771-21.771c-4.867,0-9.318,1.656-12.938,4.351h-22.441V86.789
    c12.776-8.494,21.231-22.987,21.231-39.436C284.845,21.247,263.6,0,237.493,0c-26.107,0-47.354,21.247-47.354,47.353
    c0,16.449,8.456,30.942,21.231,39.436v31.474h-22.44c-3.62-2.695-8.07-4.351-12.937-4.351c-12.021,0-21.771,9.742-21.771,21.771
    c0,12.021,9.75,21.764,21.771,21.764c4.859,0,9.309-1.648,12.929-4.343h22.448v229.162c-44.95-3.681-84.14-18.043-110.176-53.036
    l27.269,1.902c4.759,0.331,9.125-2.632,10.558-7.184c1.44-4.543-0.423-9.488-4.513-11.952l-69.816-42.086
    c-2.896-1.74-6.461-1.963-9.542-0.577c-3.088,1.378-5.298,4.181-5.93,7.501l-15.14,80.104c-0.886,4.689,1.555,9.372,5.906,11.327
    c4.351,1.965,9.472,0.686,12.399-3.088l16.287-21.008c31.843,51.565,81.914,94.736,139.664,105.942l21.854,21.854
    c4.036,4.028,10.565,4.028,14.594,0l21.854-21.854c57.75-11.198,107.828-54.377,139.672-105.942l16.287,21.008
    c2.927,3.774,8.048,5.053,12.398,3.088C439.349,366.309,441.79,361.626,440.904,356.937z M237.493,34.839
    c6.9,0,12.513,5.614,12.513,12.514c0,6.9-5.613,12.514-12.513,12.514c-6.9,0-12.515-5.614-12.515-12.514
    C224.979,40.453,230.593,34.839,237.493,34.839z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

  • Далее, можете просто скопировать этот код в вашу страничку, это, так называемый, инлайн способ добавления SVG в HTML. Пока вы не научились уверенно работать с SVG, лучше так делать и всё у вас будет работать.

  • Второй способ добавления SVG файлов, которые расположены в отдельной папке на сервере сложнее и требуют некоторых знаний

Сначала вы добавляете SVG файл в HTML

<object type="image/svg+xml" data="img/symbol/sprite.svg">
  Your  browser does not support SVG 
</object>

И только потом вызывать иконку по ID из этого спрайта:

<svg>
      <use  xlink:href="sprite.svg"#icons--icon1"></use>
</svg> 

Этот способ работает во всех браузерах

  • Третий способ, с помощью тега <img>- это добавление SVG аналогично добавлению растровой картинки, поэтому не будет работать стилизация иконки и интерактивность.

<img src="https://www.stupidedia.org/images/a/a3/Gangsta-balz-transparent.svg">

Более подробно можно почитать здесь

2
  • Помогло, работает. Но я могу каким-то образом добавить SVG-изображение через: <svg> <use xlink:href=""/> </svg> 2 июн 2019 в 9:46
  • @Frenc Olesov Пробуйте другими способами они проще - 1. либо просто копируйте содержание svg файла в html, оборачивайте svg в <div> и верстайте, как обычно 2 способ -. Добавляйте через тег <img>как в ответе 2 июн 2019 в 9:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.