Html svg img: Как правильно вставлять SVG — журнал «Доктайп»

html — Как включить изображение svg с помощью элемента?

Задавать вопрос

спросил

Изменено 2 года, 11 месяцев назад

Просмотрено 786 раз

Я пытаюсь включить изображение svg (из моей локальной папки с изображениями) на свою страницу с помощью тега svg, но безуспешно. Вместо изображения появляется только пустое место. Следует отметить, что я использую живой сервер для отображения страницы, а не только локальный файл (насколько мне известно, тег svg работает только на сервере).

Это содержимое файла изображения (он называется «logo.svg», находится в папке с именем «images»):

   967.879C20.242.875 12.182 2.615 4.047 4.872c-1.033.208-2.041.884-2.574 1.72C.983 7.38.805 8.171. 652 9c-.79 4.428-.694 8.776-.53 13.594.036 1.103.2 2.41.715 3.205.538.803 1.46 1.313 2.561 1.48a95.99 95.99 0 0 0 4.232.5 25л-.312 8.698с-.048.692.29 1.267 .71 1.598.376.286.795.413 1.225.445.86.065 1.869-0,303 2,37-1,257 2,195-4,224 3,572-6,089 6,317-8,895 7,158,176 13,407-0,222 20,482-0,745 2,501-0,065 4,218-2,11 4,672-3,743 1 .357-4.232 1.568-9.456 1.712-14.737.061-2.093- .665-4.148-1.95-5.234-1.222-.991-2.702-1.35-4.058-1.718C35.031 1.363 31.263.905 27.967.879zm10.29 3.31c1.358.369 2.555.72 4 3,31 1,337 1,26 1,339 1,218 2,23 1,2 3,675-. 142 5,122-0,388 10,093-1,544 13,86-0,498 1,405-1,366 2,405-3,006 2,556-7,208,533-13,462,945-20,707,739а1,032 1,032 0 0 0-,7 63,302с-3,044 3,074-4,601 5,21-6,921 9,676 -.054.102-.171.164-.315.175-.097-.005-.136-.08-.142-.148l.314-9.432c.019-.509-.401-.995-.907-1.05a95.48 95.48 0 0 1-5.06-.62c- .726-.111-.994-.31-1.193-.606-.346-.825-.338-1.335-.365-2.128-.
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.
636.204.383.242.739.048 1.066-.577.976-1.804.712-1.99.287-.07-.162-.017-.813.32-1.32.335-.5 09.757-.7.954- .67zm10.564.748c.062.083.213.64.096 1.082-.118.442-.31.715-.78.811-.602.124-.94 0-1.193-.207-.254-.205-.425-.552-.462-. 923-.09-.92.24-1.133.764-1.273.61-.15 1.3.112 1.575.51z" fill="#FF52C1"/>
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.
527-3.194с1. 755-.774 3.674-1.161 5.757-1.161.843 0 1.613.123 2.31.368a8.51 8.51 0 0 1 1.907.942c.575.383 1.103.816 1.586 1.298.482.48 3.938.954 1.367 1.414V1.985c0-.49.15-.903.448 -1.24.299-.338.747-.506 1.345-.506х5.17с.2 0 .41.042.632.126.222.085.425.203.61.357.183.153.332.337.447.551.115.215.173.45 2.173.712v34.357c0 1.18-.62 1.77- 1.862 1.77h-4.504c-.306 0-.544-.04-.712-.116a1.13 1.13 0 0 1-.426-.333 2.3192.319 0 0 1-.31-.551 17.13 17.13 0 0 0-.344-.77l-.667-1.793zm-13.214-11.008a8.39 8.39 0 0 0 .471 2.839c.314.88.762 1.643 1,345 2,286а6 0,384 6,384 0 0 0 2,102 1,528с,82,376 1,728,563 2,724,563,98 0 1,903—0,176 2,769—0,528а7,058 7,058 0 0 0 2,263—1,46 7,256 7. 256 0 0 0 1,552-2,194с.39-,843,609- 1.747.655-2.712v-.322a7.26 7.26 0 0 0-.552-2.803 7.427 7.427 0 0 0-1.528-2.344 7.242 7.242 0 0 0-2.298-1.597 6.977 6.977 0 0 0-2,861-.586с-. 996 0-1.904.195-2.724.586-.82.39-1.52.923-2.102 1.597a7.236 7.236 0 0 0-1.345 2.344 8.35 8.35 0 0 0-.47 2.803zm48.72 11.0 08с-.414.414-.87.858 -1,368 1,333-0,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,756-1,172а13,777 13,7 77 0 0 1-4,528-3,206 с-1,263-1,356-2,252-2,953-2,964-4,792-0,712-1,838-1,069-3,814-1,069-5,929 0-2,13,357-4,11 1,069-5,94s1,7-3,424 2,964-4,78а1 3,635 13,635 0 0 1 4,528-3,194с1,754-0,774 3,673-1,161 5,756-1,161,843 0 1,613,123 2,31,368а8,51 8,51 0 0 1 1,907,942с,575,383 1,103,816 1.
586 1.298.483.483.938.954 1.367 1.414V1.985c0 -.49.15-.903.448-1.24.3-.338.747-.506 1.345-.506х5.17с.2 0 .41.042.632.126.223.085.426.203.61.357.183.153.333.337.448.551. 114.215.172.452.172.712v34.357c0 1,18–0,62 1,77–1,862 1,77h–4,504c–0,306 0–0,544–0,04–0,712–0,116a1,13 1,13 0 0 1–0,425–0,333 2,3192.319 0 0 1-.31-.551 17.13 17.13 0 0 0-.345-.77l-.667-1.793zm-13.215-11.008a8.39 8.39 0 0 0 .471 2.839c.315.88.763 1.643 1,345 2,286а6 0,384 6,384 0 0 0 2,103 1,528с.82,376 1,727,563 2,723,563,98 0 1,903—0,176 2,769—0,528а7,058 7,058 0 0 0 2,264—1,46 7,256 7. 256 0 0 0 1,55-2,194с,391-,843,61- 1.747.656-2.712v-.322a7.26 7.26 0 0 0-.552-2.803 7.427 7.427 0 0 0-1.528-2.344 7.242 7.242 0 0 0-2.298-1.597 6.977 6.977 0 0 0-2,861-.586с-. 996 0-1.904.195-2.723.586-.82.39-1.521.923-2.103 1.597a7.236 7.236 0 0 0-1.345 2.344 8.35 8.35 0 0 0-.47 2.803zM197.61 2.008c0-.49.122-.903.367-1.24.246-.338.667-.506 1.264-.506h5.63c.154 0 .315.042.483.126a1.7 1.7 0 0 1.471.357c.146. 153.268.337.368.551.1.215 .15.
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.
557 9.557 0 0 0 1 .493-.667c.452-. 252.816-.517 1.092-.792.245-.2.456-.349.632-.449.176-.1.364-.149.563-.149.2 0 .402.07.61.207a4.8 4.8 0 0 1 .7.597l2.436 2 .758с.168.2.276.38. 322.54.046.161.069.326.069.494 0 .307-.085.571-.253.793a2.89 2.89 0 0 1-.598.586zm-11.054-19.143c-.598 0-1.176.119-1.735. 356а6.547 6.547 0 0 0 -1,575,954с-,49,398-,93,85-1,321 1,356а8,315 8,315 0 0 0-0,954 1,54h21,743а13,536 13,536 0 0 0-1,045-1,655 7,081 7,081 0 0 0–1,287–1,333 5,558 5,558 0 0 0–1,655–0,896c-.62-.215-1.344-.322-2.171-.322z" fill="#00252E"/>

И это HTML-код, который я пробовал, но он не работал:

 
          <использовать xlink:href="images/logo.svg">
        
 

Подскажите пожалуйста как правильно сделать?

  • html
  • изображение
  • svg
  • теги

1

SVG должен работать на локальном сервере, он ничем не отличается от файла HTML.

Если дважды щелкнуть файл SVG в файловой системе, откроется браузер, поскольку по умолчанию .svg связан с файлом, открываемым браузером по умолчанию.

Содержимое SVG имеет ограничения безопасности CORS для предотвращения открытия содержимого из другого местоположения файла; поэтому вы не можете легко загружать внешний контент

Единственный способ обойти это с помощью кода JavaScript, см.:
SVG полностью прозрачный в теге img

В вашем случае, вероятно, все дело в правильной загрузке SVG:

 

обозначение — это когда у вас есть несколько символов/иконок в одном SVG-файле,
см.: https://css-tricks.com/svg-symbol-good-choice-icons/

Примечание: вы можете сэкономить более 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. 1

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.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *