Как корректно отобразить SVG во всех последних версиях браузеров?

Question

[Илья Колесников]

Доброго времени суток. Есть svg файл следующего содержания:

svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   preserveAspectRatio="xMidYMid"
   width="55"
   height="165"
   viewBox="0 0 55 165"
   id="svg2"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="files_sprite.svg">
  <metadata
     id="metadata16">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1920"
     inkscape:window-height="1028"
     id="namedview14"
     showgrid="true"
     inkscape:zoom="4.1981686"
     inkscape:cx="20.5825"
     inkscape:cy="66.879932"
     inkscape:window-x="1600"
     inkscape:window-y="26"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg2"
     inkscape:object-paths="true"
     inkscape:snap-intersection-paths="true"
     inkscape:object-nodes="true"
     inkscape:snap-smooth-nodes="true"
     inkscape:snap-midpoints="true"
     inkscape:snap-object-midpoints="true"
     inkscape:snap-center="true"
     showguides="true"
     inkscape:guide-bbox="true">
    <inkscape:grid
       spacingx="55"
       spacingy="55"
       type="xygrid"
       id="grid4148" />
    <sodipodi:guide
       position="28.1315,81.854506"
       orientation="1,0"
       id="guide4150" />
  </sodipodi:namedview>
  <defs
     id="defs4">
    <style
       id="style6">
      .cls-1 {
        fill: #a9bfc7;
        fill-rule: evenodd;
      }
    </style>
  </defs>
  <g id="users" viewBox="0 0 32 96">
  <path
     d="m 44.524169,43.064177 -32.327,0 c -2.172,0 -2.7990001,-1.404 -1.394,-3.119 l 5.645,-6.894 c 1.405,-1.715 3.906,-2.162 5.562,-0.994 1.655,1.166 3.95,0.561 5.102,-1.346 l 5.667,-9.379 c 1.153,-1.909 2.963,-1.861 4.021,0.102 l 9.746,18.059 c 1.06,1.963 0.15,3.571 -2.022,3.571 z m -29.234,-18.567 c -3.324,0 -6.0160001,-2.791 -6.0160001,-6.232 0,-3.443 2.6920001,-6.232 6.0160001,-6.232 3.323,0 6.016,2.789 6.016,6.232 0,3.441 -2.693,6.232 -6.016,6.232 z"
     class="cls-1"
     id="path8"
     inkscape:connector-curvature="0"
     style="fill:#a9bfc7;fill-rule:evenodd" /> </g>
  <path
     d="m 36.176,101.625 c -0.189,0.082 -0.391,0.121 -0.584,0.121 -0.567,0 -1.104,-0.332 -1.344,-0.89 -0.318,-0.746 0.026,-1.611 0.769,-1.934 6.27,-2.72 10.317,-8.905 10.317,-15.759 0,-6.879 -4.063,-13.076 -10.351,-15.792 -0.746,-0.319 -1.089,-1.185 -0.768,-1.933 0.314,-0.749 1.179,-1.096 1.923,-0.771 7.368,3.179 12.126,10.44 12.125,18.494 0,8.031 -4.746,15.279 -12.087,18.464 z m 5.781,-18.464 c 0,5.496 -3.244,10.455 -8.269,12.634 -0.189,0.083 -0.388,0.121 -0.577,0.121 -0.571,0 -1.111,-0.332 -1.349,-0.89 -0.319,-0.745 0.024,-1.611 0.766,-1.934 3.95,-1.713 6.502,-5.613 6.502,-9.931 0,-4.338 -2.56,-8.247 -6.535,-9.96 -0.743,-0.32 -1.087,-1.186 -0.767,-1.933 0.316,-0.749 1.179,-1.094 1.922,-0.774 5.046,2.178 8.307,7.148 8.307,12.667 z M 35.48,83.158 c 0,2.883 -1.704,5.492 -4.34,6.643 -0.189,0.084 -0.39,0.123 -0.585,0.123 -0.565,0 -1.103,-0.33 -1.344,-0.885 -0.319,-0.747 0.02,-1.614 0.763,-1.937 1.563,-0.685 2.576,-2.234 2.576,-3.944 0,-1.731 -1.022,-3.286 -2.607,-3.961 -0.744,-0.318 -1.092,-1.182 -0.771,-1.931 0.313,-0.751 1.175,-1.094 1.915,-0.782 2.671,1.139 4.393,3.758 4.393,6.674 z m -8.755,16.11 c -0.178,0.075 -0.372,0.112 -0.559,0.112 -0.378,0 -0.755,-0.149 -1.035,-0.433 l -8.885,-8.957 -6.782,0 C 8.653,89.99 8,89.331 8,88.517 l 0,-10.63 c 0,-0.814 0.653,-1.473 1.464,-1.473 l 6.815,0 8.847,-8.957 c 0.423,-0.424 1.05,-0.55 1.595,-0.324 0.549,0.226 0.908,0.764 0.909,1.36 l 0,29.415 c 0,0.595 -0.355,1.134 -0.905,1.36 z"
     class="cls-1"
     id="path10"
     inkscape:connector-curvature="0"
     style="fill:#a9bfc7;fill-rule:evenodd" />
  <path
     d="m 45.671,119.51624 -1.461,0 0,2.917 -4.385,0 0,-2.917 -23.386,0 0,2.917 -4.384,0 0,-2.917 -1.463,0 c -0.8059998,0 -1.4609998,0.654 -1.4609998,1.458 l 0,32.093 c 0,0.804 0.655,1.46 1.4609998,1.46 l 1.461,0 0,-1.46 4.384,0 0,1.46 23.388,0 0,-1.46 4.385,0 0,1.46 1.461,0 c 0.804,0 1.461,-0.656 1.461,-1.46 l 0,-32.093 c 0,-0.804 -0.657,-1.458 -1.461,-1.458 z m -29.232,29.176 -4.384,0 0,-4.377 4.384,0 0,4.377 z m 0,-8.754 -4.384,0 0,-4.375 4.384,0 0,4.375 z m 0,-8.752 -4.384,0 0,-4.376 4.384,0 0,4.376 z m 18.398,6.792 -9.505,5.532 c -0.155,0.078 -0.324,0.115 -0.493,0.115 -0.201,0 -0.398,-0.053 -0.575,-0.16 -0.322,-0.192 -0.517,-0.539 -0.517,-0.912 l 0,-11.062 c 0,-0.373 0.195,-0.721 0.517,-0.915 0.325,-0.195 0.729,-0.214 1.068,-0.043 l 9.503,5.531 c 0.37,0.183 0.604,0.551 0.604,0.958 0,0.406 -0.234,0.774 -0.602,0.956 z m 9.373,10.714 -4.385,0 0,-4.377 4.385,0 0,4.377 z m 0,-8.754 -4.385,0 0,-4.375 4.385,0 0,4.375 z m 0,-8.752 -4.385,0 0,-4.376 4.385,0 0,4.376 z"
     class="cls-1"
     id="path12"
     inkscape:connector-curvature="0"
     style="fill:#a9bfc7;fill-rule:evenodd" />
</svg>

Если код разместить на той же странице, где он используется, то отображает корректно во всех браузерах.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Hello</h1>
    <svg width="64" height="64" >
         <use xLink:href="#users"  />
    </svg>
        
  
</body>
</html>

Если использовать обращение к файлу:

<svg width="64" height="64" >
         <use xLink:href="filename.svg#users"  />
</svg>

То в Chrome 69.0.3497.100 не отображается, в то время как в Mozila 26.0 все в порядке.
Вопрос: что я упускаю и что мне нужно добавить на html страницу для того, чтобы при обращение к файлу отображалось во всех браузерах?

Comments

[Ankhena]

То в Chrome 69.0.3497.100 не отображается, в то время как в Mozila 26.0 все в порядке.

А вы перестаньте смотреть на локалке, смотрите на сервере, все будет ок

[Moskus]

Вы сначала разберитесь, как Inkscape сохраняет SVG. То, что вы выложили - вообще его внутренний формат (который основан на SVG). Сохраняя, выбирайте тип файла не Inkscape SVG.

[Илья Колесников]

Moskus, polyside, для прояснения ситуации: SVG не моего авторства, я использую лишь то, что мне было предоставлено. Мною был добавлен только тэг g, не более.
За совет по Inkscape спасибо, могли бы вы скинуть хорошую статью на эту тему?

[Илья Колесников]

Ankhena, вы правы, после добавления на сервер все действительно отображается. Могли бы вы обьяснить почему так, или подсказать хороший материал? В любом случае спасибо.

[Moskus]

Illialkv, статью о том, как выбрать один из двух форматов SVG в выпадающем меню? Вы издеваетесь?

[Ankhena]

Illialkv, это вопрос к разработчикам хрома

[Илья Колесников]

Moskus, извините, по какой-то необьяснимой мне причине с первого раза я совершенно не так понял ваш комментарий. После перечитывания все встало на свои места.

Answer 1

[AngReload]

Проверьте такой SVG

<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg">
  <use href="filename.svg#users" />
</svg>

Comments

[Илья Колесников]

с href нигде не отображает, с xLink:href по прежнему отображает только в Mozila 26.0

Answer 2

[Денис Васильев]

Попробуйте подключить https://github.com/jonathantneal/svg4everybody

Answer 3

[Clark Kent]

А если так?
<img src="filename.svg" width="64" height="64">

Comments

[Илья Колесников]

В файле три иконки, нужно найти способ отображать одну в одном месте, другую - в другом. Через img отображает все три и сразу.

[Clark Kent]

Illialkv, Как вариант разбить один svg на три иконки svg.
Еще можно загрузить этот svg как xml и сделать из него три копии svg удалив в каждой лишние иконки. Тем самым получим три svg.