web-dev-qa-db-ja.com

外部ファイルのSVGスプライト

IcoMoon Appによって作成されたSVG Spriteを使用して、アプリにアイコンシステムを使用しています。 index.htmlには次のようなものがあります。

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

Svg Spriteをファイル内で移動し、外部リソースとして含める必要があります。これどうやってするの？

htmlsvgsprite
20
leo

これを試して：

Svgファイルsprites.svgを作成します

その中に以下を配置します。

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

その後、use要素に含めたいときはいつでも

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

（現時点では、Internet Explorerにはこれに関する問題があります。IEは別のアプローチが必要です。必要に応じて、IEに必要なものを表示することもできます）

編集-クロスブラウザーサポート：XMLファイルにSVGスプライト要素を配置し、defs要素に呼び出します。

Sprites.xmlという名前の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>

Defs要素を伝播するJavaScriptを含むサンプルHTMLファイル。

<!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
Francis Hemsher

サンプルマークアップで行ったように、インラインSVGコードを使用せずにドキュメントにSVGファイルを埋め込むには、さまざまな方法があります。 SVGを外部ファイルに移動すると、間違いなく、よりクリーンで編集可能なコードが作成されます。 Chris Coyierには、CSS-Tricksの sing SVG に関するすばらしいページがあります。その記事で取り上げたテクニックの概要を以下に示します。

SVGを<img>として使用する

JPGまたはPNGまたは他の画像ファイルと同じように、SVGファイルを<img>タグに埋め込むことができます。

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

SVG画像の幅と高さは、インラインの幅と高さの属性を使用するか、CSSドキュメントでSVG画像をターゲットとして調整できます。

セキュリティ上の理由から、ほとんどのブラウザは、<img>タグで追加されたSVGファイルのスクリプト、リンク、およびその他の対話機能を無効にします。

背景画像としてSVGを使用する

サンプルコードでは、SVGファイルをコンテンツイメージとして使用しているように見えますが、SVGが純粋に美的な目的を果たしている場合は、SVGファイルをCSSの背景イメージとして使用できます。

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

<img>タグと同様に、このメソッドを使用すると高度なSVG機能が無効になります。

SVGを<object>として使用する

<object>にSVGファイルを埋め込むこともできます。この手法を使用すると、スクリプトのようないくつかの高度なSVG機能を使用できます。

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

PHPでSVGを含める

PHPまたは他のサーバー側コードを使用している場合、SVGファイルをプログラムでページに挿入できます。この手法は、SVGファイルの動的なロードなどを必要とするより高度なアプリケーションがある場合に役立ちます。 In PHP SVGインクルードは次のようになります。

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

結論

ここでは取り上げなかったWebページにSVGファイルを追加する他の方法はほぼ確実にあります（iframeの可能性がありますか？）各メソッドには利点と欠点があるため、メソッドを選択する前にさらに調査を行ってください。おそらく避けるべきいくつかの方法もあります。たとえば、<embed>タグはHTML仕様の一部ではなく、今後もそうなることはないため、使用しないでください。

また、 Chris Coyierの記事 をお読みください。

10
Toglefritz

別の方法は、スプライトファイルを含めてindex.htmlファイルを生成することです。これは、SVGアイコンがすぐにロードされることを意味するため、最良のアプローチです。

これは、サーバー側インクルードを使用してWebサーバーで実行できます。

0
Rudolf Olah