html — Как включить изображение svg с помощью элемента?
Задавать вопрос
спросил 2 года 11 месяцев назад
Изменено
2 года, 11 месяцев назад
Просмотрено
786 раз
Я пытаюсь включить изображение svg (из моей локальной папки с изображениями) на свою страницу с помощью тега svg, но безуспешно. Вместо изображения появляется только пустое место. Следует отметить, что я использую живой сервер для отображения страницы, а не только локальный файл (насколько мне известно, тег svg работает только на сервере).
Это содержимое файла изображения (он называется «logo.svg», находится в папке с именем «images»):
162-4.775-.242-8.948.491-13.1.068-. 614,298-1,242,542-1,767,404-,632 1,023-,725 1,644-,897 7,956-2,197 15,74-3,84 23,068-3,845 3,592,13 7,364,49 10,354 1,273 зм-27,479 8,09с-1,096 1,313-,987 3,096- 0,14 4,29,442,625 1,132 1,128 1,972 1,242 1,091,09 1,783-0,352 2,53-0,86 1,353-1,176 1,49-3,228,461-4,71-0,524-0,755-1,362-1,2 08-2.218-1.24-1.172.012-1.968,535-2,605 1,277zm11,856-1,072c-1,092,035-1,975,791-2,514 1,607-,617,933-,977 2,101-,478 3,246,96 2,203 4,277 2,176 5,6 -0,063,61-1,032,454-2,205 0-3,056 -.452-.85-1.136-1.543-2.131-1.702a2.494 2.494 0 0 0-.477-.032zm9.625.207c-.34-.008-.69.024-1.018.111-1.312.35-2.429 1.704 -2,26 3,437,086,872,487 1,722 1,21 2,308,723,585 1,773,847 2,88,62 1,272-0,26 2,06-1,285 2,323-2,275,263-0,99,197-1,999-0,414 -2,817а3,47 3,47 0 0 0-2,72- 1.384zm-18.965 1.623c.245.002.438.08.637.366.445.642.321 1.615-.128 2.005-.447.39-.726.424-.922.398-.196-.027-.395-.162-.573-.414-.34-.48-.44-1.256.007-1.81.238-.316.675-.513.98-.545zm9 .483.223c.038.006.464.253.668.
332-. 337-4.757-1.011а10.904 10.904 0 0 1-3.642-2.758с-1.003-1.164-1.781-2.524-2.332-4.08-.552-1.554-.828-3.213-.828-4.974V10.6 95c0-.582.127 -1.022.38-1.321.252-.299.654-.448 1.206-.448h5.308c.66 0 1.111.11 1.356.333.245.222.368.655.368 1.298v14.96c0 .66.15 1.284 0,448 1,874,299,59,693 1,11 1,184 1,562 0,49,452 1,045,809 1,666 1,069,62,26 1,252,39 1,896,39,551 0 1,122-0,13 1,712-0,39а6.361 6.361 0 0 0 1.631-1.046с.498-.436.908-.95 1.23-1.54.322-.59.482-1.214.482-1.872V10.626с0-.26.05-.52.15-.781.1-.26.2 49-. 46.448-.598.199-.122.387-.206.563-.252.176-.046.38-.07.609-.07h5.194c.658 0 1.133.162 1.424.483.291.322.437.751.437 1.287 v25.716c0 .29–.065.559–.195.804s -.31.437-.54.574л.137-.068зм26.681-3.172с-.414.414-.87.858-1.367 1.333-.498.475-1.046.92-1.643 1.333а9.3 9.3 0 0 1-1.93 1. 023 6,097 6,097 0 0 1-2,23,402с-2,083 0-4,002-0,39-5,757-1,172а13,777 13,777 0 0 1-4,527-3,206с-1,264-1,356-2,252-2,953-2,964-4,792-,713-1,838-1,069-3,814-1,069-5,929 0-2,13,356-4,11 1,069-5,94,712-1,83 1,7-3,424 2,964-4,78a13,635 13,635 0 0 1 4.
452.15.712v34.334c0 .582-.165 1.022-.495 1.321-.329.299-.754.448-1.275.448h-5.332c-.597 0-1.018-.15-1.264-.448-.245-. 299 -.367-.74-.367-1.321V2.008zm38.7 32.61a15.31 15.31 0 0 1-4.55 2.907 13.87 13.87 0 0 1-5.355 1.046c-2.1 0-4.083-.383-5.952- 1.15а15. 494 15,494 0 0 1-4,918-3,182 15,273 15,273 0 0 1-3,355-4,792c-,828-1,838-1,241-3,837-1,241-5,998 0-1,348,164-2,654,494-3,918a15,45 15,45 0 0 1 1,402-3,55 15,055 15,055 0 0 1 2,206-3,045 13,957 13,957 0 0 1 2,907-2,379 14,327 14,327 0 0 1 3,493—1,54 14,084 14,084 0 0 1 3,975—0,551с1,272 0 2,505 0,169 3,7,506 1,195,337 2,318,812 3,367 1,424 1,05,613 2,01 1,349 2,884 2,207а14,896 14,896 0 0 1 2,252 2,815 13,58 13,58 0 0 1 1,46 3,263с.344 1,157,517 2,348,517 3,573 0,797- .012 1.448-.035 1.954-.023.505-.142.908-.356 1.206-.215.3-.57.506-1.069.62-.498.116-1.23.173-2.194.173h-16.546c.153.98.46 3 1.8.93 2.46а5 0,842 5,842 0 0 0 1,62 1,573с.613,391 1.264.67 1.954.84a8.24 8.24 0 0 0 1.953.252c.552 0 1.118-.058 1.7-.172a12.179 12.179 0 0 0 1.69-.46 9.
И это HTML-код, который я пробовал, но он не работал:
<использовать xlink:href="images/logo.svg">
Подскажите пожалуйста как правильно сделать?
html изображение svg теги 1
SVG должен работать на локальном сервере, он ничем не отличается от файла HTML.
Если дважды щелкнуть файл SVG в файловой системе, откроется браузер, поскольку по умолчанию .svg связан с файлом, открываемым браузером по умолчанию.
Содержимое SVG имеет ограничения безопасности CORS для предотвращения открытия содержимого из другого местоположения файла; поэтому вы не можете легко загружать внешний контент
Единственный способ обойти это с помощью кода JavaScript, см.:
В вашем случае, вероятно, все дело в правильной загрузке SVG:
обозначение — это когда у вас есть несколько символов/иконок в одном SVG-файле,
Примечание: вы можете сэкономить более 50% размера файла SVG с помощью: https://jakearchibald.github.io/svgomg/
. 3
Зарегистрируйтесь или войдите в систему Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость Электронная почта
Требуется, но не отображается
Могу ли я отправить по электронной почте… Формат изображения SVG Могу ли я отправить по электронной почте… Формат изображения SVG
Gmail Настольная веб-почта 2020-02
2023-01
iOS 2020-02
1
2023-01
1
Андроид 2020-02
1
2023-01
1
Мобильная веб-почта 2020-02
2023-01
Перспектива Окна 2007
2010
2013
2016
2019
Почта Windows 2020-02
macOS 2016
13.
Outlook.com 2020-02
iOS 2020-02
2023-01
Андроид 2020-02
Яху! Почта Настольная веб-почта 2020-02
iOS 2020-02
Андроид 2020-02
АОЛ Настольная веб-почта 2020-02
iOS 2020-02
Андроид 2020-02
Мозилла Тандерберд Окна 2020-02
ПротонПочта Настольная веб-почта 2020-03
iOS 2020-03
Андроид 2020-03
Быстрая почта Настольная веб-почта 2021-07
ПРИВЕТ Настольная веб-почта 2020-06
Апельсин Настольная веб-почта 2020-02
2021-03
iOS 2020-02
Андроид 2020-02
LaPoste. 
1