前回は、SVG画像をHTMLファイルに埋め込む方法について書きました。
今回は、複数のSVG画像をソースコードに埋め込んで、fontawesomeのように使えるようにする方法です。
まずはソースコードから。
[code]
<style type="text/css">
.defs{
display: none;
}
.icon {
width: 30px;
height: 30px;
display: inline;
vertical-align: text-bottom;
margin-right: 10px;
}
.logo1_title {
color: #666;
fill: #0f0;
}
.logo2_title {
color: #666;
fill: #fa0;
}
h3 {
font-size: 30px;
}
</style>
<h3 class="logo1_title">
<svg class="icon"><use xlink:href="#logo_1"/></svg>有限会社ラスティーズ
</h3>
<h3 class="logo2_title">
<svg class="icon"><use xlink:href="#logo_2"/></svg>Lusties Inc.
</h3>
<svg class="defs">
<symbol id="logo_1" viewBox="0 0 141.7 73.7">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 141.7 73.7" style="enable-background:new 0 0 141.7 73.7;" xml:space="preserve">
<style type="text/css">
.logo_1{fill:#1FA9C2;}
</style>
<g id="XMLID_271_">
<path id="XMLID_312_" class="logo_1" d="M57.1,57.9c-3.2-0.1-17.5-1.8-20.6-2.1c0.1-0.5,0.3-1.2,0.5-1.8c0.6-2.3,4.6-19.2,5.8-24.3
c2.5-1,4.8-2.5,6.4-4.5c4.6-5.7,3.7-16.4-4.2-14.3c-5,1.3-6.4,7.7-7,10.8c0,0-0.5,2.2-1.2,5.3c-6.2-0.6-11.5-1.7-13.9-2.4
c-2.4-0.6-13.2-2.3-18.4,0.5c-6.5,3.5-3.8,11.1-3.8,11.1c3.5-5.4,15.1-6.9,22.3-6.3c3.4,0.3,6.9,0.7,9.7,1
c0.9,0.2,1.9,0.3,2.9,0.3c0.1,0,0.3,0,0.4,0c-1.1,4.8-5.1,21.5-5.5,23.1c-0.1,0.6-0.3,1.1-0.4,1.6c-20.2,1.7-16.7,19.6-7.4,17
c4.6-1.2,8.8-3.9,12.1-11.7c3.5,0.7,23,3.3,25.9,3.4c31.1,1.2,53.3-8.3,56.2-9.6c8.9-4,8.7-14.8,8.7-14.8
C122.5,43,83.1,58.5,57.1,57.9z M44.9,19.8c0.4-1.6,0.7-3.7,2-4c1.5-0.4,2.4,2.8,0,6.6c-0.6,1-1.7,2-3.1,2.8
C44.1,23.1,44.6,21.2,44.9,19.8z M21.9,68.4c-3.6,1-4.1-6.8,5.9-7.5C25.6,66,23.8,67.9,21.9,68.4z"/>
<path id="XMLID_306_" class="logo_1" d="M140.8,10.5c-1.6,4.8-4.7,9.3-5.8,10.3c0-0.8,0-1.6-0.1-2.5c-0.2-2.6-0.5-7-0.5-7
s4.7-6.9-1-4.9c-2.2,0.8-3.4,2.3-3.9,4.1c0,0-0.1,0.1-0.1,0.1c-4,10.7-9.1,20.3-14.8,21.9c-2.9,0.8-4.5-0.6-4.6-3.4
c0.6,0.3,1.2,0.5,2,0.5c3.1,0.1,6-2.3,7.9-6.7c3.2-7.2-1.1-11-5.9-9.7c-2.9,0.8-6.8,4.6-8.9,11.5c-0.1,0.3-0.2,0.7-0.3,1
c-1.5,2.5-2.9,4.6-3.2,5.2c-0.7,1-1.3,1.9-1.6,1.7c-0.3-0.2,0.1-2.3,0.3-3.3c0.7-3.1,3.1-13.2,3.1-13.2l-5.3,1.5
c0,0-0.4,1.9-1,4.4c-3,4.4-8.2,11.5-8.9,12.5c-0.7,1-1.3,1.9-1.6,1.7c-0.3-0.2,0.1-2.3,0.3-3.3c0.3-1.2,1.3-5.5,2.4-10.2l4-1.1
c0.3-1.2,0.4-1.9,0.4-1.9l-4,1.1c1.5-6.6,2.2-9.1,2.2-9.1l-5.3,1.4c0,0-0.5,2.1-2.2,9.1l-3.8,1c0,0-0.2,0.7-0.5,1.9l3.9-1
c-0.4,1.7-0.8,3.4-1.2,5c-2.1,3.5-4.3,5.8-6.3,7.4c0-0.8,0-1.6-0.1-2.5c-0.2-2.6-0.5-7-0.5-7s4.7-6.9-1-4.9
c-2.9,1-3.9,3.1-4.2,5.7c-2.3,3.9-7.6,12.5-8.4,13.6c-0.7,1-1.3,1.9-1.6,1.7c-0.3-0.2,0.1-2.3,0.3-3.3c0.7-3.1,3.1-13.2,3.1-13.2
L58.9,28c0,0-0.6,2.6-1.4,5.9c-1.1,4-5.1,11.4-7,11.9c-1.9,0.5-1.5-1.8-1.2-2.9c0.7-3.1,3.1-13.2,3.1-13.2l-5.3,1.5
c0,0-3.3,14.3-4,17.2c-1,4,0.7,7.4,4,6.5c2.2-0.6,5.3-5.2,7.9-10.1c-0.3,1.3-0.5,2.2-0.7,2.7c-1,4,0.5,5.3,2.7,4.7
c1.4-0.4,3-1.7,5.1-5.2c1.4-2.3,6-10.2,8.7-14.9c0.1,1.3,0.3,2.7,0.4,3.9c0.1,1.6,0.2,2.9,0.1,4c-4,2.3-7.7,4.1-7.5,6.5
c0.2,3,3.4,2.9,5.4,2.4c3.4-0.9,6.5-2.9,7.2-9.3c1.6-1.4,3.5-3.4,5.3-5.7c-0.8,3.4-1.4,6-1.6,6.7c-1,4,0.5,5.3,2.7,4.7
c1.4-0.4,3-1.7,5.1-5.2c1.1-1.8,4.6-7.1,7.6-11.6c-0.9,3.7-1.7,7.3-2,8.5c-1,4,0.5,5.3,2.7,4.7c1.4-0.4,3-1.7,5.1-5.2
c0.6-1,1.7-2.8,3-5.1c0.6,4.6,3.9,7,9.7,5.5c3.1-0.8,5.9-3.2,8.2-6.2c0,0.1,0,0.1,0,0.2c0.2,3,3.4,2.9,5.4,2.4
c3.4-0.9,6.5-2.9,7.2-9.3c1.5-1.4,5.1-5.9,6.8-11.2C141.9,12.2,141.4,9.6,140.8,10.5z M70,45.5c-0.5,1.4-2.1,2.1-2.2,0.8
c-0.1-0.7,1.3-1.7,3-2.8C70.5,44.2,70.2,44.8,70,45.5z M115.8,16.8c1.7-0.5,0.9,3.9-0.7,6.3c-1.2,1.7-2.7,3.5-4.7,2.7
c0.1-0.2,0.1-0.4,0.1-0.5C111.7,21,114.1,17.3,115.8,16.8z M128.3,29.8c-0.5,1.4-2.1,2.1-2.2,0.8c-0.1-0.7,1.3-1.7,3-2.8
C128.9,28.6,128.6,29.2,128.3,29.8z M129.7,24.4c-2,1.2-4,2.2-5.4,3.3c2-3.3,3.7-7,5-10.6c0.1,1.1,0.2,2.2,0.3,3.3
C129.7,22,129.8,23.3,129.7,24.4z"/>
<path id="XMLID_305_" class="logo_1" d="M103.2,0.1c-4.3,1.1-2,11.6-2,11.6S107.5-1.1,103.2,0.1z"/>
<path id="XMLID_304_" class="logo_1" d="M99.6,13.1c0,0-1.8-10.8-4.3-7.2C92.9,9.5,99.6,13.1,99.6,13.1z"/>
<path id="XMLID_303_" class="logo_1" d="M110.9,1.6c-2.7-2.2-8.2,10.6-8.2,10.6S113.6,3.8,110.9,1.6z"/>
</g>
</svg>
</symbol>
<symbol id="logo_2" viewBox="0 0 85 85">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 85 85" style="enable-background:new 0 0 85 85;" xml:space="preserve">
<style type="text/css">
.logo_20{fill:#000000;}
.logo_21{fill:#00A0E9;}
.logo_22{fill:#8FC322;}
.logo_23{fill:#E4007F;}
</style>
<g id="logo_2">
<g>
<path class="logo_20" d="M67.9,51.5H39.6c-4.6,0-8.6-3.1-8.6-6.6c0-3.5,4-6.6,8.6-6.6h40.2c2.3,0,4.3-1.9,4.3-4.2c0-2.3-2-4.2-4.3-4.2H39.6
c-9.4,0-17.1,6.8-17.1,15.1c0,8.3,7.7,15,17.1,15h28.3c4.6,0,8.5,3,8.5,6.6c0,3.6-4,6.8-8.5,6.8l-3.4,0c-0.1,0-0.4-0.1-0.7-0.1
H16.4c-4.3,0-7.9-3.5-7.9-7.8V7.7c0-2.3-1.9-4.2-4.3-4.2C1.9,3.4,0,5.3,0,7.7v57.6c0,9,7.4,16.3,16.4,16.3h51.5
c9.4,0,17.1-6.8,17.1-15.2C85,58.2,77.4,51.5,67.9,51.5z"/>
</g>
<g>
<path class="logo_21" d="M40.9,26.4h-8.1c-0.5,0-0.9-0.2-1.2-0.6c-0.3-0.4-0.3-0.9-0.2-1.3l7.4-20.1c0.2-0.6,0.7-0.9,1.3-0.9h8.1
c0.5,0,0.9,0.2,1.2,0.6c0.3,0.4,0.3,0.9,0.2,1.3l-7.4,20.1C42,26,41.5,26.4,40.9,26.4z"/>
</g>
<g>
<path class="logo_22" d="M57.1,26.4H49c-0.5,0-0.9-0.2-1.2-0.6c-0.3-0.4-0.3-0.9-0.2-1.3L55,4.4c0.2-0.6,0.7-0.9,1.3-0.9h8.1
c0.5,0,0.9,0.2,1.2,0.6c0.3,0.4,0.3,0.9,0.2,1.3l-7.4,20.1C58.2,26,57.7,26.4,57.1,26.4z"/>
</g>
<g>
<path class="logo_23" d="M73.4,26.4h-8.1c-0.5,0-0.9-0.2-1.2-0.6c-0.3-0.4-0.3-0.9-0.2-1.3l7.4-20.1c0.2-0.6,0.7-0.9,1.3-0.9h8.1
c0.5,0,0.9,0.2,1.2,0.6c0.3,0.4,0.3,0.9,0.2,1.3l-7.4,20.1C74.5,26,74,26.4,73.4,26.4z"/>
</g>
</g>
</svg>
</symbol>
</svg>
[/code]
一気に色々コードが増えました。
ここでは、２つのSVG画像データを記述しています。
複数のSVGを埋め込む時は、それぞれのSVGデータを <symbol>〜</symbol>で囲みます。
そして、それぞれのsymbolにidをつけておきます。
[code]
<svg>
<symbol id="symbol-1">
<svg>〜</svg>
</symbol>
<symbol id="symbol-2">
<svg>〜</svg>
</symbol>
</svg>
[/code]
idをつけておくと、画像を表示するコードが完結になり、ソースコードも見やすくなります。
[code]
<h3 class="logo1_title">
<svg class="icon"><use xlink:href="#logo_1"/></svg>有限会社ラスティーズ
</h3>
<h3 class="logo2_title">
<svg class="icon"><use xlink:href="#logo_2"/></svg>Lusties Inc.
</h3>
[/code]
なによりも、複数のsvg画像をまとめて記述できるのがいいですね。
ちなみに、svgのdefsクラスに「display: none;」を書いておかないと、svgのタグを書いている部分に空白ができてしまいますのでご注意を。
