web-dev-qa-db-fra.com

SVG Sprite dans un fichier externe

J'utilise un système d'icônes pour mon application avec SVG Sprite, créé par IcoMoon App . Dans index.html, j'ai maintenant quelque chose comme ceci:

<html>
<head>...</head>
<body>
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="752" height="80" viewBox="0 0 752 80">
    <defs>
    <g id="icon-home">
        <path class="path1" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z" />
    </g>
    <g id="icon-camera">
        <path class="path1" d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875 0-4.902 3.973-8.875 8.875-8.875 4.902 0 8.875 3.973 8.875 8.875 0 4.902-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z" />
    </g>
    </defs>
</svg>   
...some html code...
<!-- an image -->
<svg class="icon" viewBox="0 0 32 32"><use xlink:href="#icon-home"></use></svg>
</body>
<html>

Je dois déplacer le sprite svg dans un fichier, puis l'inclure en tant que ressource externe . Comment puis-je faire cela?

htmlsvgsprite
20
leo

Essaye ça:

Créez un fichier svg, sprites.svg

Placez-y le texte suivant:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <path id="icon-home" class="path1" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z" />
  <path id="icon-camera" class="path1" d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875 0-4.902 3.973-8.875 8.875-8.875 4.902 0 8.875 3.973 8.875 8.875 0 4.902-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z" />
</svg>

Ensuite, chaque fois que vous souhaitez inclure un élément use

<svg class="icon" viewBox="0 0 32 32">
  <use xlink:href="sprites.svg#icon-home" />
</svg>

(Actuellement, Internet Explorer a un problème avec cela. IE aurait besoin d'une approche différente. Si vous le souhaitez, je peux aussi montrer ce qu'il faut pour IE) 

EDIT - Prise en charge de plusieurs navigateurs: placez les éléments Sprite SVG dans un fichier XML et appelez-les dans un élément defs.

Fichier XML, nommé sprites.xml:

<?xml version="1.0" encoding="UTF-8"?>
<SPRITES xmlns="http://www.w3.org/2000/svg">
<path id="iconHome"  d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z" />
<path id="iconCamera"  d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875 0-4.902 3.973-8.875 8.875-8.875 4.902 0 8.875 3.973 8.875 8.875 0 4.902-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z" />
</SPRITES>

Un exemple de fichier HTML avec Javascript pour propager l'élément defs.

<!DOCTYPE HTML>
<html>
<head>
  <title>Sprites</title>
</head>
<body onLoad=loadSprites()>
<svg id=mySVG width="400" height="400">
<defs id="spriteDefs" />
    <use xlink:href="#iconHome" transform="translate(100 100)" />
    <use xlink:href="#iconHome" transform="translate(200 100)" />
    <use xlink:href="#iconHome" transform="translate(300 100)" />
    <use xlink:href="#iconCamera" transform="translate(100 200)" />
    <use xlink:href="#iconCamera" transform="translate(200 200)" />
    <use xlink:href="#iconCamera" transform="translate(300 200)" />
    <use xlink:href="#iconHome" transform="translate(200 300)" />
</svg>
<script>
function loadSprites()
{
   	var xmlFile="sprites.xml"
	var loadXML = new XMLHttpRequest;
	loadXML.onload = callback;
	loadXML.open("GET", xmlFile, true);
	loadXML.send();
	function callback()
	{
		//---responseText---
		var xmlString=loadXML.responseText
		//---DOMParser---
		var parser = new DOMParser();
	    var mySpritesDoc=parser.parseFromString(xmlString,"text/xml").documentElement ;
        var addSprites=mySpritesDoc.childNodes
        for(var k=0;k<addSprites.length;k++)
        {
           var Sprite=addSprites.item(k).cloneNode(true)
           document.getElementById("spriteDefs").appendChild(Sprite)
        }
    }
}
</script>
</body>
</html>

19
Francis Hemsher

Il existe différentes méthodes pour incorporer un fichier SVG dans un document sans utiliser de code SVG intégré, comme vous l'avez fait dans votre exemple de balisage. Déplacer le SVG vers un fichier externe donne certainement un code beaucoup plus propre et plus éditable. Chris Coyier a une bonne page sur Utilisation de SVG sur CSS-Tricks. Voici un résumé des techniques couvertes dans cet article:

Utiliser SVG comme un <img>

Vous pouvez incorporer des fichiers SVG dans une balise <img>, comme vous le feriez avec un fichier JPG ou PNG ou tout autre fichier image:

<img src="kiwi.svg" alt="Kiwi standing on oval">

Vous pouvez ajuster la largeur et la hauteur de votre image SVG avec des attributs de largeur et de hauteur intégrés ou en ciblant votre image SVG dans un document CSS.

Notez que pour des raisons de sécurité, la plupart des navigateurs désactivent les scripts, les liaisons et autres interactivités des fichiers SVG ajoutés avec les balises <img>.

Utiliser SVG comme image de fond

Dans votre exemple de code, vous semblez utiliser le fichier SVG comme image de contenu, mais dans le cas où le SVG sert uniquement à des fins esthétiques, vous pouvez utiliser le fichier SVG comme image de fond en CSS:

body {
  background: url(kiwi.svg);
  background-size: 100px 82px;
  /* some other CSS probably */
}

Comme les balises <img>, les fonctionnalités SVG avancées sont désactivées lors de l'utilisation de cette méthode.

Utiliser SVG comme un <object>

Vous pouvez également incorporer un fichier SVG dans un <object>. En utilisant cette technique, vous pourrez utiliser certaines fonctionnalités SVG avancées telles que les scripts:

<object type="image/svg+xml" data="kiwi.svg" class="logo"></object>

Incluant SVG avec PHP

Si vous utilisez PHP ou un autre code côté serveur, vous pouvez insérer le fichier SVG dans une page par programme. Cette technique peut être utile si vous avez une application plus sophistiquée nécessitant le chargement dynamique de fichiers SVG ou quelque chose de ce genre. Dans PHP, votre inclusion SVG ressemblerait à ceci:

<?php include("kiwi.svg"); ?>

Conclusion

Il existe presque certainement d'autres moyens d'ajouter des fichiers SVG à une page Web que je n'ai pas abordée ici (iframe peut-être?), Mais j'espère que vous trouverez une méthode qui fonctionne pour votre application dans cette liste. Notez qu'il y a des avantages et des inconvénients avec chaque méthode, faites donc plus de recherches avant de choisir une méthode. Il existe également certaines méthodes qui devraient probablement être évitées. Par exemple, n'utilisez pas de balise <embed> car elle ne fait pas et ne fera probablement jamais partie d'une spécification HTML. 

Lisez aussi l'article de Chris Coyier que j'ai déjà mentionné.

10
Toglefritz

Une autre approche consiste à générer votre fichier index.html avec les fichiers Sprite inclus. C'est la meilleure approche car cela signifie que vos icônes SVG sont chargées immédiatement.

Vous pouvez le faire sur le serveur Web avec une inclusion côté serveur:

0
Rudolf Olah