Могу ли я иметь несколько изображений SVG в одном файле?

Вместо того, чтобы делать следующее:

<html>
<body>
  <embed src="circle.svg" type="image/svg+xml" /> 
  <embed src="square.svg" type="image/svg+xml" /> 
  <embed src="triangle.svg" type="image/svg+xml" />  
</body>
</html>

Я бы предпочел сделать что-то вроде этого

<html>
<body>
<embed src="shapes.svg" type="image/svg+xml" id="circle" /> 
<embed src="shapes.svg" type="image/svg+xml" id="square" /> 
<embed src="shapes.svg" type="image/svg+xml" id="triangle" />  
</body>
</html>

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" >

  <svg id="circle">
    <circle cx="100" cy="50" r="40" stroke="black"
    stroke-width="2" fill="red" />
  </svg> 

  <svg id="square">
    <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
  </svg>

  <svg id="triangle">
    <line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
    <line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
    <line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
  </svg>
</svg>

Кажется, что SVG - это просто XML, я должен иметь возможность хранить все мои изображения в одном файле, который скачивается за один раз и используется на всем сайте.

Ответ 1

В html-документе может быть только один корень node. Тем не менее существуют различные способы достижения желаемого.

Один из способов - SVG Stacks, который работает, имея все рисунки друг над другом, а затем просто отображая тот, который вы хотите увидеть, используя CSS.

Другим способом может быть создание shape.svg, как это, со всеми чертежами в разных местах

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

  <g transform="translate(0,0)">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
  </g>

  <g transform="translate(0,200)">
    <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
  </g>
  <g transform="translate(0,400)">
    <line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
    <line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
    <line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
  </g>
</svg>

И затем используйте svgView, чтобы показать только нужные вам биты.

<html>
<body>
<embed src="shapes.svg#svgView(viewBox(50,0,100,100))" style="width:100px;        height:100px" type="image/svg+xml" />
<embed src="shapes.svg#svgView(viewBox(0,200,100,100))" style="width:100px;height:100px" type="image/svg+xml"/> 
<embed src="shapes.svg#svgView(viewBox(0,400,100,100))" style="width:100px;height:100px" type="image/svg+xml"/>  
</body>
</html>

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

Ответ 2

Да, но XML-документам нужен один корень node. У вас три. Попробуйте обернуть три узла в элементе svg и переместить им пространство имен и номер версии. Кажется, нужно проверить через http://validator.w3.org/check

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <svg id="circle">
      <circle cx="100" cy="50" r="40" stroke="black"
      stroke-width="2" fill="red" />
    </svg> 

    <svg id="square">
      <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
    </svg>

    <svg id="triangle">
      <line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
      <line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
      <line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
    </svg>
</svg>