web-dev-qa-db-de.com

SVG Sprite in externer Datei

Ich verwende ein Icon-System für meine App mit SVG Sprite, das von IcoMoon App erstellt wurde. In index.html habe ich nun etwa Folgendes:

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

Ich muss das svg-Sprite in eine Datei verschieben und es dann als externe Ressource hinzufügen .. Wie kann ich das tun?

20
leo

Versuche dies:

Erstellen Sie eine SVG-Datei, sprites.svg

Fügen Sie folgendes ein:

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

Dann, wann immer Sie in ein use-Element einschließen möchten

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

(Derzeit hat Internet Explorer ein Problem damit. IE würde einen anderen Ansatz benötigen. Wenn Sie möchten, kann ich auch zeigen, was für IE erforderlich ist.) 

EDIT - Browserübergreifende Unterstützung: Platzieren Sie SVG Sprite-Elemente in einer XML-Datei und rufen Sie sie in ein defs-Element auf.

XML-Datei mit dem Namen 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>

Eine HTML-Beispieldatei mit Javascript zum Verbreiten des Elements "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

Es gibt verschiedene Möglichkeiten, eine SVG-Datei in ein Dokument einzubetten, ohne Inline-SVG-Code wie in Ihrem Beispielmarkup verwenden zu müssen. Das Verschieben der SVG-Datei in eine externe Datei sorgt für deutlich saubereren und bearbeitbaren Code. Chris Coyier hat eine großartige Seite zu Using SVG zu CSS-Tricks. Hier ist eine Zusammenfassung der in diesem Artikel behandelten Techniken:

Verwendung von SVG als <img>

Sie können SVG-Dateien in ein <img>-Tag einbetten, wie Sie es auch von JPG- oder PNG-Dateien oder anderen Bilddateien tun würden:

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

Sie können die Breite und Höhe Ihres SVG-Bildes entweder mit Inline-Attributen für Breite und Höhe anpassen oder indem Sie Ihr SVG-Bild in einem CSS-Dokument als Ziel festlegen.

Beachten Sie, dass die meisten Browser aus Sicherheitsgründen Skripts, Verknüpfungen und andere Interaktivität von mit <img>-Tags hinzugefügten SVG-Dateien deaktivieren.

SVG als Hintergrundbild verwenden

In Ihrem Beispielcode scheinen Sie die SVG-Datei als Inhaltsbild zu verwenden. Wenn die SVG jedoch rein ästhetischen Zwecken dient, können Sie die SVG-Datei als Hintergrundbild in CSS verwenden:

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

Wie bei <img>-Tags sind erweiterte SVG-Funktionen bei Verwendung dieser Methode deaktiviert.

Verwendung von SVG als <object>

Sie können eine SVG-Datei auch in einen <object> einbetten. Mit dieser Technik können Sie einige fortgeschrittene SVG-Funktionen wie Skripting verwenden:

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

Einschließen von SVG mit PHP

Wenn Sie PHP oder einen anderen serverseitigen Code verwenden, können Sie die SVG-Datei programmgesteuert in eine Seite einfügen. Diese Technik kann nützlich sein, wenn Sie eine anspruchsvollere Anwendung haben, bei der SVG-Dateien dynamisch geladen werden müssen. In PHP würde Ihr SVG-Include ungefähr so ​​aussehen:

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

Fazit

Es gibt mit großer Wahrscheinlichkeit andere Möglichkeiten, SVG-Dateien zu einer Webseite hinzuzufügen, die ich hier nicht behandelt habe (iframe vielleicht?), Aber ich hoffe, Sie finden in dieser Liste eine Methode, die für Ihre Anwendung geeignet ist. Beachten Sie, dass es bei jeder Methode Vor- und Nachteile gibt. Erkundigen Sie sich also, bevor Sie eine Methode auswählen. Es gibt auch einige Methoden, die wahrscheinlich vermieden werden sollten. Verwenden Sie beispielsweise kein <embed>-Tag, da es nicht Teil einer HTML-Spezifikation ist und wahrscheinlich nie sein wird. 

Lesen Sie auch Chris Coyiers Artikel den ich zuvor erwähnt habe.

10
Toglefritz

Ein alternativer Ansatz ist das Generieren Ihrer index.html-Datei mit den enthaltenen Sprite-Dateien. Dies ist der beste Ansatz, da Ihre SVG-Symbole sofort geladen werden.

Sie können dies auf dem Webserver mit einem Server Side Include tun:

0
Rudolf Olah