まずイラレで素材を作ります。
例のイラストはイラストACで引っばってきています。
パスファインダーを駆使して一つのオブジェクトにします。白い部分はきり抜くような感じです。
別名保存でSVGにします。
スポンサードリンク
SVGコードを押します。そうすると下記の様なコードが現れるので全てコピーします。
「 「<svg〜」に対してもクラスを付けます。このクラスを利用してCSSのwidthやheightを指定することが出来ます。
svgをひとファイルにまとめる
svg_data.svgというファイルを作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<svg class="sprite"> <symbol id=“icon1" viewBox=""> <!-- ▼▼▼SVGコード▼▼▼ --> <!-- ▲▲▲SVGコード▲▲▲ --> </symbol> <symbol id="icon2" viewBox=""> <!-- ▼▼▼SVGコード▼▼▼ --> <!-- ▲▲▲SVGコード▲▲▲ --> </symbol> <symbol id="icon3" viewBox=""> <!-- ▼▼▼SVGコード▼▼▼ --> <!-- ▲▲▲SVGコード▲▲▲ --> </symbol> <symbol id="icon4" viewBox=""> <!-- ▼▼▼SVGコード▼▼▼ --> <!-- ▲▲▲SVGコード▲▲▲ --> </symbol> </svg> |
こんなデータをつくりましょう。
先程イラレで作成したデータを<!– ここにSVGコードが入ります —>の下に入れます。
vieBox=の箇所はイラレからコピーした物に書き換えます。
「」のIDは任意です。
使用したいPHPに以下を入力します。
1 |
<?php include_once("assets/img/common/svg-defs.svg"); ?> |
その後使用したい箇所に以下を入れます。hrefの箇所は.svgデータで任意に入力したIDと揃えてください。
1 2 3 |
<svg class=“arrow"> <use xlink:href=“icon1"/> </svg> |
svgのクラスにたいして(上記ではarrow)「fill:#0000ff」などと入力すると色が変わります。同様にsvgに幅や高さ等を指定することが出来ます。
無駄なデータの除去
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?xml version="1.0" encoding="iso-8859-1"?> <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="イラスト" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 203.065 198.194" style="enable-background:new 0 0 203.065 198.194;" xml:space="preserve"> <path style="fill:#C93132;" d="M200.506,71.909c-7.146-21.991-27.549-35.961-49.485-35.957C144.244,15.088,124.655,0,101.533,0 C78.41,0,58.82,15.088,52.044,35.952C30.107,35.949,9.705,49.917,2.56,71.908c-7.146,21.991,1.15,45.284,18.899,58.176 c-6.782,20.862,0.198,44.583,18.905,58.174c18.706,13.591,43.423,12.899,61.168,0.002c17.746,12.897,42.463,13.589,61.17-0.002 c18.706-13.591,25.687-37.312,18.904-58.174C199.355,117.192,207.651,93.899,200.506,71.909z M52.783,106.333 c0-4.28,3.47-7.75,7.75-7.75c3.217,0,5.975,1.96,7.148,4.75h17.442c1.657,0,3,1.343,3,3c0,1.657-1.343,3-3,3H67.681 c-1.173,2.79-3.931,4.75-7.148,4.75C56.253,114.083,52.783,110.614,52.783,106.333z M92.049,120.06l-12.332,12.333 c1.145,2.802,0.58,6.139-1.695,8.413c-3.026,3.026-7.934,3.026-10.96,0c-3.026-3.027-3.026-7.934,0-10.961 c2.274-2.274,5.61-2.838,8.413-1.695l12.332-12.333c1.172-1.172,3.07-1.171,4.242,0C93.221,116.989,93.221,118.888,92.049,120.06z M92.053,96.852c-0.586,0.586-1.354,0.879-2.121,0.879s-1.535-0.293-2.121-0.878L75.475,84.517c-2.803,1.144-6.139,0.58-8.413-1.695 c-3.026-3.027-3.026-7.934,0-10.961c3.026-3.026,7.934-3.026,10.96,0c2.275,2.274,2.84,5.61,1.695,8.413L92.053,92.61 C93.225,93.782,93.225,95.681,92.053,96.852z M101.533,155.083c-4.28,0-7.75-3.47-7.75-7.75c0-3.216,1.96-5.975,4.75-7.147v-17.443 c0-1.657,1.343-3,3-3c1.657,0,3,1.343,3,3v17.443c2.79,1.172,4.75,3.931,4.75,7.147 C109.283,151.614,105.813,155.083,101.533,155.083z M104.533,72.48v17.443c0,1.657-1.343,3-3,3c-1.657,0-3-1.343-3-3V72.48 c-2.79-1.172-4.75-3.931-4.75-7.147c0-4.28,3.47-7.75,7.75-7.75c4.28,0,7.75,3.47,7.75,7.75 C109.283,68.55,107.323,71.308,104.533,72.48z M111.017,92.608l12.333-12.333c-1.145-2.802-0.58-6.138,1.695-8.413 c3.026-3.026,7.934-3.026,10.96,0c3.026,3.027,3.026,7.934,0,10.961c-2.274,2.274-5.61,2.838-8.413,1.695l-12.333,12.333 c-0.586,0.586-1.354,0.879-2.121,0.879c-0.768,0-1.535-0.293-2.121-0.878C109.845,95.679,109.845,93.78,111.017,92.608z M136.005,140.805c-3.026,3.026-7.934,3.026-10.96,0c-2.275-2.274-2.84-5.611-1.695-8.413l-12.332-12.333 c-1.172-1.171-1.172-3.071,0-4.243c1.172-1.171,3.07-1.171,4.242,0l12.332,12.333c2.803-1.143,6.139-0.58,8.413,1.695 C139.031,132.872,139.031,137.778,136.005,140.805z M142.533,114.083c-3.217,0-5.975-1.96-7.147-4.75h-17.442c-1.657,0-3-1.343-3-3 c0-1.657,1.343-3,3-3h17.442c1.173-2.79,3.931-4.75,7.147-4.75c4.28,0,7.75,3.47,7.75,7.75 C150.283,110.614,146.813,114.083,142.533,114.083z"/> </svg> |
とあります。
最初の方の
1 2 3 4 5 |
<?xml version="1.0" encoding="iso-8859-1"?> <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="イラスト" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 203.065 198.194" style="enable-background:new 0 0 203.065 198.194;" xml:space="preserve"> |
↓
1 |
<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 203.065 198.194"> |
でオッケーです。viewBoxの値に注意。
styleなどがついてたら消しちゃいましょう。
おまけ
svgでくるむやり方とsymbolでくるむやり方があるみたいですが、どっちもいけるようです。
1 2 3 4 5 |
<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 60 60"> <symbol id="icon" viewBox="0 0 60 60”> ーコードー </symbol> </svg> |
1 2 3 4 5 |
<symbol id="icon" viewBox="0 0 60 60"> <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 60 60"> ーコードー </svg> </symbol> |