Какое значение имеет встроенный SVG в URI данных и какой тег использовать? - PullRequest
Новая
       0

Какое значение имеет встроенный SVG в URI данных и какой тег использовать?

0 голосов
/ 08 мая 2020

Если у меня есть этот SVG: 

<body> 
   <svg xmlns="http://www.w3.org/2000/svg">
       <text x="10" y="50" font-size="30" class="svgClass2" id="svgText2">My SVG</text>
   </svg> 
</body>

IIU C Если я хочу встроить эту разметку SVG в URI данных, я бы преобразовал эту разметку SVG в base64 и установил ее как источник тег изображения? 

<img src="data:image/svg+xml,charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmN==" />

Значение PD94bWwgdmVyc2lvbj0iMS4wIiBlbmN... это: 

   <svg xmlns="http://www.w3.org/2000/svg">
       <text x="10" y="50" font-size="30" class="svgClass2" id="svgText2">My SVG</text>
   </svg>

Это правильно?

Дополнительные вопросы, если возможно:
Это все еще интерактивно как img? Применяются ли классы? Идентификатор по-прежнему действует? Он меньше по размеру, чем base64 URI данных?

Примечание: существует особый вариант использования c, в котором это будет использоваться. Я знаю некоторые плюсы и минусы.

Ссылки :

{ ссылка } - URI данных в теге изображения

https://vecta.io/blog/best-way-to-embed-svg - здесь не показаны примеры, но в комментариях люди говорят о URI данных

https://www.w3schools.com/html/html5_svg.asp

Ответы [ 2 ]

1 голос
/ 09 мая 2020

После обсуждения первого ответа, вот как преобразовать SVG в base64, чтобы вы могли встроить его в тег <img>.

Да, вам просто нужно передать следующую структуру по конвейеру в кодировщик base64: 

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="537" height="474" viewBox="-3 6 358 316">
...
</svg>

Это просто псевдо-пример, конечно, используйте свои собственные width, height и viewBox и заполните разметку графики. Если вы хотите немного сжать его, вы можете уменьшить код svg заранее.

Быстрое ручное решение

  1. Получите свой svg, например this ♡ .
  2. Используйте этот конвертер для получения текста base64: https://base64.guru/converter/encode/image/svg
  3. Выберите вариант создания тега img сразу или сделайте это вручную: <img src="data:image/svg+xml;charset=utf-8;base64, loaded-plain-base64-string ">.

Вы можете увидеть преобразованный ♡ в этой скрипке .

Автоматическое решение

Если вы заинтересованы в программном преобразовании c в base64, вы обязательно найдете ресурсы для языка / фреймворка по вашему выбору.

0 голосов
/ 08 мая 2020

И я хочу встроить его

Не уверен, что вы имеете в виду, это уже встроено на страницу в вашем первом примере.

, тогда я бы преобразовал эту строку в base64 и установил ее как источник тега изображения?

вы могли бы, но я не вижу возможной выгоды.

Это все еще интерактивно?

Нет. SVG в тегах img теряет интерактивность.

Применяются ли классы?

Если они применяются со страницы, номер

Идентификатор по-прежнему применяется?

Идентификаторы в SVG не будут видны из других частей страницы, если вы это имеете в виду.

Он меньше по размеру как base64?

Нет, он будет на 33% больше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...