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 l'index.html que 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 SVG sprite dans un fichier et l'inclure comme une ressource externe. Comment puis-je faire cela?

19
demandé sur leo 2014-04-10 20:11:40

3 réponses

essaye ceci:

créer un fichier svg, sprites.svg

Placez la suivante:

<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 voulez inclure dans un use l'élément

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

(à l'heure actuelle, Internet Explorer a un problème avec cela. IE aurait besoin d'une approche différente. Si vous voulez, je peux aussi montrer ce qui est nécessaire pour IE)

EDIT - Cross browser support: placer les éléments sprite SVG dans un fichier XML et les appeler dans un defs élément.

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>
20
répondu Francis Hemsher 2017-10-06 01:58:02

il existe plusieurs façons d'intégrer un fichier SVG dans un document sans utiliser le code SVG en ligne comme vous l'avez fait dans votre exemple de balisage. Le déplacement du SVG vers un fichier externe rend certainement le code beaucoup plus propre, plus modifiable. Chris Coyier a une bonne page sur utilisant SVG sur CSS-Tricks. Voici un résumé des techniques traitées dans cet article:

utilisant SVG comme <img>

vous pouvez intégrer des fichiers SVG dans un <img> balise comme vous le feriez pour un 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 soit avec les attributs inline width et height, soit en ciblant votre image SVG dans un document CSS.

notez que pour des raisons de sécurité, la plupart des navigateurs désactiveront les scripts, les liens et toute autre interactivité des fichiers SVG ajoutés avec <img> balises.

utilisant SVG comme arrière-plan-image

Dans votre exemple de code vous semblez utiliser le fichier SVG comme une image de contenu, mais juste au cas où le fichier SVG sert un but purement esthétique, vous pouvez utiliser le fichier SVG comme une image de fond dans CSS:

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

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

utilisant SVG comme <object>

vous pouvez également intégrer un fichier SVG dans un <object>. L'utilisation de cette technique vous permettra d'utiliser certaines fonctionnalités SVG avancées comme script:

<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 programmation. Cette technique pourrait être utile si vous avez une application plus sophistiquée exigeant des fichiers SVG à charger dynamiquement. En PHP votre SVG include ressemblerait à quelque chose comme ceci:

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

Conclusion

Il y a presque certainement d'autres façons d'ajouter des fichiers SVG à une page Web que je n'ai pas couvert ici (iframe peut-être?), mais j'espère que vous allez trouver 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, alors faites plus de recherche avant de choisir une méthode. Il y a aussi certaines méthodes qui devraient probablement être évitées. Par exemple, ne pas utiliser <embed> tag car il ne fait pas, et ne sera probablement jamais, partie d'une spécification HTML.

lire Aussi article de Chris Coyier que j'ai déjà mentionné.

10
répondu Toglefritz 2014-04-10 16:56:55

Une autre approche consiste à générer votre index.fichier 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 option Côté Serveur:

0
répondu Rudolf Olah 2017-03-11 20:21:43