HTML-тег img с svg выглядит меньше при получении html с сервера и больше при открытии html из файловой системы - PullRequest
Новая
       22

HTML-тег img с svg выглядит меньше при получении html с сервера и больше при открытии html из файловой системы

0 голосов
/ 08 июля 2019

Когда я открываю следующий HTML-файл: 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>SVG</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <img width="32px" height="32px" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg" alt="Kiwi standing on oval"/>
</body>

Двойной щелчок по html-файлу в моей файловой системе открывает chrome и правильно отображает изображение svg. Когда точно такой же HTML-файл получен от моего сервера узлов, изображение отображается меньше (выглядит как уменьшенное): svg diff

Я посмотрел html, свойства тела, используя инструменты разработчика Chrome, но не могу найти причину, по которой это происходит. Причина, по которой меня это беспокоит, заключается в том, что когда я вместо этого использую файлы png, у меня возникает та же проблема, и изображения размыты и не выглядят одинаково при открытии в фотошопе. Спасибо

1 Ответ

1 голос
/ 08 июля 2019

Попробуйте добавить тег svg вместо тега img. 

<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 105">
  <g fill="#97C024" stroke="#97C024" stroke-linejoin="round" stroke-linecap="round">
    <path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z" stroke-width="12"/>
    <path d="M32,5l5,10M64,5l-6,10 " stroke-width="2"/>
  </g>
  <path d="M22,35h51v10h-51zM22,33c0-31,51-31,51,0" fill="#97C024"/>
  <g fill="#FFF">
    <circle cx="36" cy="22" r="2"/>
    <circle cx="59" cy="22" r="2"/>
  </g>
</svg>


<!DOCTYPE html>
<html lang="en">
<head>
    <title>SVG</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 105">
  <g fill="#97C024" stroke="#97C024" stroke-linejoin="round" stroke-linecap="round">
    <path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z" stroke-width="12"/>
    <path d="M32,5l5,10M64,5l-6,10 " stroke-width="2"/>
  </g>
  <path d="M22,35h51v10h-51zM22,33c0-31,51-31,51,0" fill="#97C024"/>
  <g fill="#FFF">
    <circle cx="36" cy="22" r="2"/>
    <circle cx="59" cy="22" r="2"/>
  </g>
</svg>
</body>
...