Как задать img источник из svg inline?

Question

Hidden Fronter @AlTerminator

Как задать img источник из svg inline?

Нужно, чтобы у img src был равен изображению из svg.

<!DOCTYPE html>
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body onload="OnLoad()">
  <?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg onclick="SvgLogoClick()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="172" height="32" viewBox="0 0 172 32" xml:space="preserve"> <desc></desc> <rect x="0" y="0" width="100%" height="100%" fill="transparent"></rect> <g transform="matrix(0 0 0 0 0 0)" id="ab89e07f-1442-43df-bb69-1ec894fd456a"> </g> <g transform="matrix(1 0 0 1 86 16)" id="1fbb36a9-15d3-4ba8-b58d-3b0aa80f1c18"> <rect id="RectBG" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: transparent; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  x="-86" y="-16" rx="0" ry="0" width="172" height="32"/> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0.32 0 0 0.32 15.33 16)" id="7f53d056-24ba-4c38-9fbb-39099604a94d"> 	<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #000000; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  xlink:href="data:image/png;base64,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" x="-50" y="-50" width="100" height="100"></image> </g> <g transform="matrix(0.19 0 0 0.19 101.6 16)" id="882d3729-3beb-4d12-a29d-ee9b20efa81c"> 	<text id="TextLogo" xml:space="preserve" font-family="Raleway" font-size="105" font-style="normal" font-weight="900" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #000000; fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-318.02" y="32.98" >ГОСТСТРОЙ</tspan></text> </g></svg>
  <img src="" alt="">
  <script>
   function OnLoad(){
      document.querySelector("img").src = ""; //Что прописать в источнике img?
   }
  </script>
 </body>
</html>

Вопрос задан 25 апр.
133 просмотра

13 комментариев

Подписаться 1 Средний 13 комментариев

Ankhena @Ankhena Куратор тега JavaScript

Зачем вам там вообще SVG, если внутри растр и текст не вектором?

Если всё таки SVG, то его нужно привести к состоянию стека (желательно предварительно очистив от кучи мусора, которая там есть)
Сначала изучить это css.yoksel.ru/svg-groups-use
Потом (ничего не делая с тем что выше) это https://telegra.ph/Stack--sprajt-zdorovogo-chelove...

И потом можете использовать как угодно, хоть в img, хоть в use, хоть в стилях.

Написано 25 апр.
Hidden Fronter @AlTerminator Автор вопроса

Ankhena, чтобы менять цвет текста при наведении на лого сайта в формате svg. Что такое состояние стека?

Написано 25 апр.
Ankhena @Ankhena Куратор тега JavaScript

Hidden Fronter,

чтобы менять цвет текста при наведении на лого сайта в формате svg.

С этой конкретной SVG у вас ничего не выйдет, там растр. Это раз.
Если будете использовать как img, то тоже ничего не выйдет.
Ну разве что фильтрами.

Что такое состояние стека?

Вы точно прочитали статьи?

Написано 25 апр.
Hidden Fronter @AlTerminator Автор вопроса

Ankhena, насчет стека понял теперь. В этой свг у меня уже меняется цвет текста при наведении на нее. В img мне нужен тот же svg, что и в шапке сайта, фильтры на нем не нужны, так как он будет как картинка.

Написано 25 апр.
Ankhena @Ankhena Куратор тега JavaScript

Hidden Fronter, цвет текста можно менять и без svg
Смысл текста в лого в svg в том, чтобы он выглядел всегда одинаково, именно так, каким его нарисовал дизайнер и не зависел от шрифта (его наличия и версий). Для этого его переводят в кривые.
В том виде как сейчас, вы можете спокойно использовать span.

Написано 25 апр.
Hidden Fronter @AlTerminator Автор вопроса

Ankhena, svg использую для того, чтобы лого выглядело четко на любых устройствах.

Написано 25 апр.
Ankhena @Ankhena Куратор тега JavaScript

Hidden Fronter, еще раз: у вас внутри svg картинка в png формате. Она не будет выглядеть четко из-за того, что вы перевели её в base64 и засунули в svg, а будет мылить, как мылила бы прямо в png.
Текст в svg у вас написан текстом, буквами. Если по какой-то причине ваш raleway не загрузится пользователю или если вдруг указан local, а у пользователя другая версия шрифта, то текст будет выглядеть не так, как хочется вам или дизайнеру.

Написано 25 апр.
Hidden Fronter @AlTerminator Автор вопроса

Ankhena, какой шрифт рекомендовали бы выставить вместо raleway, чтобы он всегда поддерживался у пользователя? Собираю на этом сайте новый svg:

Написано 25 апр.
Ankhena @Ankhena Куратор тега JavaScript

Hidden Fronter, чтобы было одинаково, шрифт переводят в кривые.

Написано 25 апр.
Hidden Fronter @AlTerminator Автор вопроса

Ankhena, собираю на сайте svg editor - mediamodifier. Ссылка не отправилась сразу.

Написано 25 апр.
Ankhena @Ankhena Куратор тега JavaScript

Hidden Fronter, да хоть ручками в блокноте)) Главное, чтобы результат был нужным.

Написано 25 апр.
Hidden Fronter @AlTerminator Автор вопроса

Ankhena, этот сайт поможет преобразовать текст в кривые? Я правильно понял? https://products.aspose.app/svg/ru/text-to-vector. Кстати, на самом сайте у меня для всех элементов определено семейство шрифта "Georgia, 'Times New Roman', Times, serif". Разве оно есть не у всех и все равно заменится на то, которое есть у пользователя?

Написано 25 апр.
Ankhena @Ankhena Куратор тега JavaScript

Hidden Fronter,
этот сайт поможет преобразовать текст в кривые?

Без понятия чем занят этот сайт.
Думаю, вы можете изучить это самостоятельно.

Кстати, на самом сайте у меня для всех элементов определено семейство шрифта "Georgia, 'Times New Roman', Times, serif".

Ну да, ну да. По какой тогда логике вы тут задаете запасные шрифты-то, а?
Или вам пользователи поклялись не удалять шрифты из системы?
В svg у вас raleway указан, если что.

Написано 25 апр.

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 1

6 комментариев

Hidden Fronter @AlTerminator Автор вопроса

у меня так и сделано)

Написано 26 апр.
Nik Faraday @NikFaraday

Hidden Fronter, тогда предоставьте фрагмент кода с этим "сделано", потому что в том коде, что вы представили в вопросе такого нет

Написано 26 апр.
Hidden Fronter @AlTerminator Автор вопроса

После <body onload="OnLoad()"> идет строка с svg файлом, в одну строку.

Написано 26 апр.
Nik Faraday @NikFaraday

Hidden Fronter, а вам что, за говорю? Тег svg используйте

Написано 26 апр.

Hidden Fronter @AlTerminator Автор вопроса

У меня как раз svg и используется:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg onclick="SvgLogoClick()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="172" height="32" viewBox="0 0 172 32" xml:space="preserve"> <desc></desc> <rect x="0" y="0" width="100%" height="100%" fill="transparent"></rect> <g transform="matrix(0 0 0 0 0 0)" id="ab89e07f-1442-43df-bb69-1ec894fd456a"> </g> <g transform="matrix(1 0 0 1 86 16)" id="1fbb36a9-15d3-4ba8-b58d-3b0aa80f1c18"> <rect id="RectBG" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: transparent; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  x="-86" y="-16" rx="0" ry="0" width="172" height="32"/> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0.32 0 0 0.32 15.33 16)" id="7f53d056-24ba-4c38-9fbb-39099604a94d"> 	<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #000000; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  xlink:href="data:image/png;base64,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" x="-50" y="-50" width="100" height="100"></image> </g> <g transform="matrix(0.19 0 0 0.19 101.6 16)" id="882d3729-3beb-4d12-a29d-ee9b20efa81c"> 	<text id="TextLogo" xml:space="preserve" font-family="Raleway" font-size="105" font-style="normal" font-weight="900" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #000000; fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-318.02" y="32.98" >ГОСТСТРОЙ</tspan></text> </g></svg>

Написано 27 апр.

Nik Faraday @NikFaraday

Hidden Fronter, так вот же примеры вам. Я же говорил, что вам читать нужно. Та нет там никакого xml и т.д. Просто svg код в html вставляете и всё

Написано 27 апр.

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Средний
Как подключить вконтакте на сайт чтобы слать юзеру в вк уведомления или сообщения?
- нет подписчиков
- 5 часов назад
- 61 просмотр
1

ответ
JavaScript

+1 ещё

Сложный
Fastify долгая загрузка что можно сделать как найти причину?
- 1 подписчик
- 10 часов назад
- 36 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 134 просмотра
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- вчера
- 99 просмотров
1

ответ
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- вчера
- 96 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 97 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- вчера
- 96 просмотров
0

ответов
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- вчера
- 674 просмотра
1

ответ
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 73 просмотра
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 55 просмотров
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Аудит и поддержка проекта внедрению виртуальной архитектуры (АСУ ТП)

25 нояб. 2024, в 03:04

500000 руб./за проект

Сделать простой лендинг

25 нояб. 2024, в 02:45

2000 руб./за проект

Изображения на главную страницу в стиле Jetton и 1вин

25 нояб. 2024, в 00:22

12000 руб./за проект

Зачем вам там вообще SVG, если внутри растр и текст не вектором?

Если всё таки SVG, то его нужно привести к состоянию стека (желательно предварительно очистив от кучи мусора, которая там есть)
Сначала изучить это css.yoksel.ru/svg-groups-use
Потом (ничего не делая с тем что выше) это https://telegra.ph/Stack--sprajt-zdorovogo-chelove...

И потом можете использовать как угодно, хоть в img, хоть в use, хоть в стилях.
Ankhena, чтобы менять цвет текста при наведении на лого сайта в формате svg. Что такое состояние стека?
Hidden Fronter,

чтобы менять цвет текста при наведении на лого сайта в формате svg.

С этой конкретной SVG у вас ничего не выйдет, там растр. Это раз.
Если будете использовать как img, то тоже ничего не выйдет.
Ну разве что фильтрами.

Что такое состояние стека?

Вы точно прочитали статьи?
Ankhena, насчет стека понял теперь. В этой свг у меня уже меняется цвет текста при наведении на нее. В img мне нужен тот же svg, что и в шапке сайта, фильтры на нем не нужны, так как он будет как картинка.
Hidden Fronter, цвет текста можно менять и без svg
Смысл текста в лого в svg в том, чтобы он выглядел всегда одинаково, именно так, каким его нарисовал дизайнер и не зависел от шрифта (его наличия и версий). Для этого его переводят в кривые.
В том виде как сейчас, вы можете спокойно использовать span.
Ankhena, svg использую для того, чтобы лого выглядело четко на любых устройствах.
Hidden Fronter, еще раз: у вас внутри svg картинка в png формате. Она не будет выглядеть четко из-за того, что вы перевели её в base64 и засунули в svg, а будет мылить, как мылила бы прямо в png.
Текст в svg у вас написан текстом, буквами. Если по какой-то причине ваш raleway не загрузится пользователю или если вдруг указан local, а у пользователя другая версия шрифта, то текст будет выглядеть не так, как хочется вам или дизайнеру.
Ankhena, какой шрифт рекомендовали бы выставить вместо raleway, чтобы он всегда поддерживался у пользователя? Собираю на этом сайте новый svg:
Hidden Fronter, чтобы было одинаково, шрифт переводят в кривые.
Ankhena, собираю на сайте svg editor - mediamodifier. Ссылка не отправилась сразу.
Hidden Fronter, да хоть ручками в блокноте)) Главное, чтобы результат был нужным.
Ankhena, этот сайт поможет преобразовать текст в кривые? Я правильно понял? https://products.aspose.app/svg/ru/text-to-vector. Кстати, на самом сайте у меня для всех элементов определено семейство шрифта "Georgia, 'Times New Roman', Times, serif". Разве оно есть не у всех и все равно заменится на то, которое есть у пользователя?
Hidden Fronter,
этот сайт поможет преобразовать текст в кривые?

Без понятия чем занят этот сайт.
Думаю, вы можете изучить это самостоятельно.

Кстати, на самом сайте у меня для всех элементов определено семейство шрифта "Georgia, 'Times New Roman', Times, serif".

Ну да, ну да. По какой тогда логике вы тут задаете запасные шрифты-то, а?
Или вам пользователи поклялись не удалять шрифты из системы?
В svg у вас raleway указан, если что.

Answer 1 · 2024-04-27 13:05:00

Hidden Fronter @AlTerminator Автор вопроса

Нужно использовать <use>

Ответ написан 27 апр.

Комментировать

Answer 2 · 2024-04-25 13:26:25

Вы можете вывести изображение в формате svg прямо а html разметку и работать с ним± как с img. Попробуйте открыть svg в любом редакторе текста/кода и перекопировать его содержимое в свой html. Так же рекоменду почитать про svg хотя бы в этой статье

Как задать img источник из svg inline?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт