SVGスプライトは、一つのSVGファイル内に、色などの設定を複数記述して必要なものを呼び出すテクニックですが、
具体的な使い方については、あまり紹介されていません。
一例をメモに残します。
SVG
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"> <defs> <symbol id="heart"> <path d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"/> </symbol> </defs> <view id="orange" viewBox="0 24 24 24" /> <view id="yellow" viewBox="0 48 24 24" /> <view id="green" viewBox="0 72 24 24" /> <view id="blue" viewBox="0 96 24 24" /> <view id="indigo" viewBox="0 120 24 24" /> <view id="violet" viewBox="0 144 24 24" /> <use xlink:href="#heart" x="0" y="0" fill="red" /> <use xlink:href="#heart" x="0" y="24" fill="orange" /> <use xlink:href="#heart" x="0" y="48" fill="yellow" /> <use xlink:href="#heart" x="0" y="72" fill="green" /> <use xlink:href="#heart" x="0" y="96" fill="blue" /> <use xlink:href="#heart" x="0" y="120" fill="indigo" /> <use xlink:href="#heart" x="0" y="144" fill="violet" /> </svg>
HTML
<img src="/labo/css/wp-content/themes/css/images/sprite-example.svg"> <img src="/labo/css/wp-content/themes/css/images/sprite-example.svg#blue"> <img src="/labo/css/wp-content/themes/css/images/sprite-example.svg#green">
DEMO
背景として表示
svg
svg
HTML
<p class="external-svg">svg</p> <p class="external-svg-2">svg</p>
CSS
.external-svg:before{
content:'';
display:inline-block;
width:24px;
height:24px;
background: url('https://www.tenman.info/labo/css/wp-content/themes/css/images/sprite-example.svg#green');
margin-right:1rem;
vertical-align:middle;
}
.external-svg-2:before{
content:'';
display:inline-block;
width:48px;
height:48px;
background:url('https://www.tenman.info/labo/css/wp-content/themes/css/images/sprite-example.svg');
margin-right:1rem;
vertical-align:middle;
background-size:cover;
}
関連
WordPressでsvgファイルのアップロードや、メディア一覧でのsvgファイルの表示が簡単に行えるプラグイン