Puis-je avoir Plusieurs images SVG dans un seul fichier?

Au lieu de faire ce qui suit:

<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>

Je prever faire quelque chose comme ceci

<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>

avec un fichier svg qui peut ressembler à quelque chose comme ceci

<?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>

Il semble comme un SVG est juste du XML je devrais être capable de stocker l'ensemble de mes images dans un seul fichier qu'ils telecharges une seule fois et est utilisé sur tout le site.

  • Si votre intention est de n'avoir que "triangle" visible lorsque vous l'appelez comme <embed src="shapes.svg#triangle" type="image/svg+xml" />, vous aurez à attendre pour les navigateurs à rattraper parce que le support n'est pas encore là: simurai.com/post/20251013889/svg-stacks. Vous pouvez, cependant, le traiter comme n'importe quel spritemap.
  • Double de stackoverflow.com/questions/14562136/...?
InformationsquelleAutor Jeremy A. West | 2013-01-31
  1. 5

    Vous ne pouvez avoir qu'un seul nœud racine dans un document html. Néanmoins, il existe différents moyens d'obtenir ce que vous voulez.

    Une façon est SVG Piles qui fonctionne avec tous les dessins sur le dessus de chaque autre, puis simplement les afficher celle que vous voulez voir à l'aide de CSS.

    Une autre façon peut-être d'avoir une des formes.svg comme ça avec tous les dessins dans différents endroits

    <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>

    Et ensuite utiliser svgView pour afficher uniquement les bits que vous souhaitez.

    <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>

    Tous ces ne signifie pas cependant que vous utiliser plus de mémoire dans l'UC comme tout le fichier svg est chargé 3 fois et que vous venez de voir une partie de chaque fois.

    • Le fichier SVG est chargé à chaque fois? Prend-il en charge chaque fois que vous utilisez l'incorporer déclaration?
    • Il ne sera pas le chercher 3 fois, il va créer la complète DOM 3 fois.
    • J'ai vu un bel exemple de cela aujourd'hui, ce qui m'a fait revoir ce post. C'est essentiellement à l'aide de cette même solution. codepen.io/NielsOeltjen/stylo/uCgLI
    • Je suis allé de l'avant et accepté la réponse, si j'ai toujours l'espoir de jours meilleurs à venir avec .les fichiers svg.
    InformationsquelleAutor Robert Longson
  2. 6

    Oui, mais des documents XML besoin d'un seul nœud racine. Le vôtre a trois. Essayez d'envelopper les trois nœuds d'un élément svg et déplacer l'espace de noms et le numéro de version à elle. Semble valider via 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>
    • Je ne vais pas vous jure que c'est la meilleure solution, juste le premier qui vient à l'esprit. Tous les documents XML doivent avoir un nœud racine.
    InformationsquelleAutor JayC